HTML tags and elements, with an example of each

Form Elements

HTML forms are used to collect user input on a webpage. Forms can include text fields, radio buttons, checkboxes, dropdowns, and buttons. Every form element should have a proper label for accessibility.

• The form element wraps all form controls and handles form submission.
• The action attribute defines where to send the form data.
• The method attribute (like GET or POST) defines how data is sent.
• JavaScript can be used to validate form inputs before submitting.

The <img> tag is used to embed images in HTML. It's an empty tag (no closing tag) that requires at least two attributes:

• src - Specifies the path to the image file
• alt - Provides alternative text for accessibility
• width and height (optional) - Set the image dimensions

<img
  src="/images/htmlimage.jpeg"
  alt="Beautiful sunset over mountains"
  width="800"
  height="600"
/>

Best Practices

• Always include meaningful alt text for screen readers and SEO
• Optimize images for web (use JPG for photos, PNG for graphics)
• Use responsive images with srcset attribute for different screen sizes
• Specify width and height to prevent layout shifts
• Use descriptive filenames (e.g., "red-apple.jpg" instead of "img123.jpg")

This is an example of an image embedded using HTML. Notice how it displays directly in the browser when the page loads.

<img src="..." alt="..." />

The Video tag in HTML allows you to embed a video directly on your webpage, and it's a simple way to show video content without needing to rely on external players.

<video width="640" height="360" controls loop>
  <source src="movie.mp4" type="video/mp4">
</video>

• Supports multiple formats with <source> elements
• Fallback content for unsupported browsers
• Fully customizable with JavaScript and CSS

Accessibility Best Practices

• Use semantic HTML tags to improve screen reader navigation.
• Provide descriptive alt text for all images.
• Follow proper heading order (h1 → h2 → h3) for content hierarchy.
• Always associate <label> elements with form inputs.
• Ensure sufficient color contrast for text and interactive elements.
• Make all interactive components accessible via keyboard.
• Use ARIA attributes only when necessary and correctly.
• Avoid flashing or blinking content that could trigger seizures.

SEO & Metadata

• <title> and <meta name="description"> tags
• Use alt text for images
• Open Graph tags like og:title and og:image
• Proper heading structure (h1, h2, h3...)
• meta viewport for mobile devices
• Use canonical links to avoid duplicates
• Structured data using JSON-LD for rich snippets
• Mobile-friendly responsive design

The HTML <canvas> element provides a drawing surface for creating graphics, animations, and visualizations using JavaScript.

• Used for rendering 2D shapes, text, and images
• Supports animations through JavaScript
• Can create games, data visualizations, and image processing
• Requires JavaScript to draw content
• Provides both 2D and WebGL (3D) contexts

<canvas id="myCanvas" width="600" height="400"></canvas>
<script>
  const canvas = document.getElementById('myCanvas');
  const ctx = canvas.getContext('2d');
  // Draw a red rectangle
  ctx.fillStyle = 'red';
  ctx.fillRect(10, 10, 150, 100);
</script>

Canvas Capabilities

• Path drawing (lines, curves, shapes)
• Text rendering with custom fonts
• Image manipulation and compositing
• Pixel-level operations
• Transformations (translate, rotate, scale)
• Shadows and gradients