Quick Reference

HTML5 Semantic

Comprehensive reference for structured, accessible HTML.

Document Structure

Standard Boilerplate

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- SEO Meta Tags -->
  <meta name="description" content="Page description here">
  <title>Document</title>
</head>
<body>
  <main>
    <!-- Content here -->
  </main>
</body>
</html>

Semantic Sectioning

Common Layout Elements

Tag	Description
`<header>`	`Introductory content or navigation links.`
`<nav>`	`Navigation section containing links.`
`<main>`	`The dominant, unique content of the body.`
`<article>`	`Self-contained composition (e.g. blog post).`
`<section>`	`Thematic grouping of content, typically with a heading.`
`<aside>`	`Content tangentially related to the main content (sidebar).`
`<footer>`	`Footer for its nearest sectioning content.`

Forms & Accessibility

Accessible Form Structure

Always link labels to inputs using `for` and `id`.

<form action="/submit" method="POST">
  <fieldset>
    <legend>User Information</legend>
    
    <div class="input-group">
      <label for="email">Email Address:</label>
      <input 
        type="email" 
        id="email" 
        name="email" 
        placeholder="[email protected]"
        required 
      />
    </div>
    
    <button type="submit">Register</button>
  </fieldset>
</form>

Input Types

Modern HTML5 Inputs

HTML5 brings built-in validation via input types.

Type	Usage
`text`	`Default single-line text.`
`email`	`Validates for @ format. Shows email keyboard on mobile.`
`password`	`Obscures characters.`
`number`	`Accepts numbers only. Shows numeric keyboard.`
`date`	`Native date picker UI.`
`checkbox`	`Multiple selections allowed.`
`radio`	`Single selection within a name group.`
`file`	`Native file selection dialog.`

Media Embedding

Images & Video

Always include `alt` tags for screen readers and SEO.

<!-- Responsive Image -->
<img 
  src="photo.jpg" 
  alt="Description of image" 
  loading="lazy" 
  width="800" 
  height="600" 
/>

<!-- Native Video Player -->
<video controls width="100%">
  <source src="video.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>