Document Structure
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Page description">
<title>Page Title</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Page content goes here -->
<script src="script.js"></script>
</body>
</html>
Semantic Elements
<!-- Page structure -->
<header>Site header, navigation</header>
<nav>Navigation links</nav>
<main>Main content (one per page)</main>
<article>Self-contained content</article>
<section>Thematic grouping</section>
<aside>Sidebar, related content</aside>
<footer>Site footer, copyright</footer>
<!-- Text semantics -->
<h1>Main heading (one per page)</h1>
<h2> to <h6>Subheadings</h2>
<p>Paragraph</p>
<blockquote>Block quotation</blockquote>
<figure>
<img src="image.jpg" alt="Description">
<figcaption>Image caption</figcaption>
</figure>
Text Formatting
Important text (bold)
<strong>Important text (bold)</strong>
Emphasized text (italic)
<em>Emphasized text (italic)</em>
Highlighted text
<mark>Highlighted text</mark>
Deleted text
<del>Deleted text</del>
Inserted text
<ins>Inserted text</ins>
H2O
H<sub>2</sub>O
E=mc2
E=mc<sup>2</sup>
Inline code
<code>Inline code</code>
Ctrl + C
<kbd>Ctrl</kbd> + <kbd>C</kbd>
HTML (hover for full text)
<abbr title="HyperText Markup Language">HTML</abbr>
<time datetime="2024-01-15">January 15, 2024</time>
Links and Navigation
<!-- Basic link -->
<a href="https://example.com">External link</a>
<a href="/about">Internal link</a>
<a href="#section-id">Anchor link</a>
<!-- Link attributes -->
<a href="page.html" target="_blank" rel="noopener noreferrer">
Open in new tab (secure)
</a>
<a href="file.pdf" download>Download file</a>
<a href="mailto:email@example.com">Email link</a>
<a href="tel:+1234567890">Phone link</a>
Lists
<!-- Unordered list -->
<ul>
<li>Item one</li>
<li>Item two</li>
</ul>
<!-- Ordered list -->
<ol>
<li>First item</li>
<li>Second item</li>
</ol>
<!-- Description list -->
<dl>
<dt>Term</dt>
<dd>Definition</dd>
<dt>Another term</dt>
<dd>Another definition</dd>
</dl>
Images and Media
<!-- Images -->
<img src="image.jpg" alt="Description" width="300" height="200">
<!-- Responsive images -->
<picture>
<source media="(min-width: 800px)" srcset="large.jpg">
<source media="(min-width: 400px)" srcset="medium.jpg">
<img src="small.jpg" alt="Description">
</picture>
<!-- Video -->
<video controls width="640" height="360" poster="thumbnail.jpg">
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
Your browser does not support video.
</video>
<!-- Audio -->
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
<source src="audio.ogg" type="audio/ogg">
Your browser does not support audio.
</audio>
<!-- Embed external content -->
<iframe src="https://example.com" width="600" height="400"
title="Embedded content" loading="lazy"></iframe>
Forms
<form action="/submit" method="POST">
<!-- Text inputs -->
<label for="name">Name:</label>
<input type="text" id="name" name="name" required placeholder="Enter name">
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<label for="password">Password:</label>
<input type="password" id="password" name="password" minlength="8">
<!-- Other input types -->
<input type="number" min="0" max="100" step="1">
<input type="date">
<input type="tel" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}">
<input type="url">
<input type="search">
<input type="color">
<input type="range" min="0" max="100">
<input type="file" accept="image/*" multiple>
<!-- Textarea -->
<label for="message">Message:</label>
<textarea id="message" name="message" rows="4" cols="50"></textarea>
<!-- Select dropdown -->
<label for="country">Country:</label>
<select id="country" name="country">
<option value="">Select...</option>
<option value="us">United States</option>
<option value="uk">United Kingdom</option>
</select>
<!-- Radio buttons -->
<fieldset>
<legend>Gender:</legend>
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label>
</fieldset>
<!-- Checkbox -->
<input type="checkbox" id="agree" name="agree" required>
<label for="agree">I agree to terms</label>
<!-- Submit -->
<button type="submit">Submit</button>
<button type="reset">Reset</button>
</form>
Tables
<table>
<caption>Table caption</caption>
<thead>
<tr>
<th scope="col">Header 1</th>
<th scope="col">Header 2</th>
<th scope="col">Header 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1, Cell 1</td>
<td>Row 1, Cell 2</td>
<td>Row 1, Cell 3</td>
</tr>
<tr>
<td colspan="2">Spans 2 columns</td>
<td rowspan="2">Spans 2 rows</td>
</tr>
<tr>
<td>Row 3, Cell 1</td>
<td>Row 3, Cell 2</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">Table footer</td>
</tr>
</tfoot>
</table>
Meta Tags
<head>
<!-- Character encoding -->
<meta charset="UTF-8">
<!-- Viewport for responsive design -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- SEO meta tags -->
<meta name="description" content="Page description (150-160 chars)">
<meta name="keywords" content="keyword1, keyword2, keyword3">
<meta name="author" content="Author Name">
<meta name="robots" content="index, follow">
<!-- Open Graph (social sharing) -->
<meta property="og:title" content="Page Title">
<meta property="og:description" content="Description for social media">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:url" content="https://example.com/page">
<meta property="og:type" content="website">
<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Page Title">
<meta name="twitter:description" content="Description for Twitter">
<meta name="twitter:image" content="https://example.com/image.jpg">
<!-- Favicon -->
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<!-- Canonical URL -->
<link rel="canonical" href="https://example.com/page">
</head>
Accessibility Attributes
<!-- ARIA roles and attributes -->
<nav role="navigation" aria-label="Main navigation">
<ul>
<li><a href="/" aria-current="page">Home</a></li>
</ul>
</nav>
<button aria-expanded="false" aria-controls="menu-id">Toggle Menu</button>
<div id="menu-id" aria-hidden="true">Menu content</div>
<!-- Skip link for keyboard users -->
<a href="#main-content" class="skip-link">Skip to main content</a>
<!-- Form accessibility -->
<label for="search">Search:</label>
<input type="search" id="search" aria-describedby="search-hint">
<span id="search-hint">Enter keywords to search</span>
<!-- Image accessibility -->
<img src="chart.png" alt="Sales chart showing 20% growth in Q4">
<img src="decorative.png" alt="" role="presentation">
<!-- Live regions for dynamic content -->
<div aria-live="polite" aria-atomic="true">
Status messages appear here
</div>
Global Attributes
<!-- Common attributes available on all elements -->
<div
id="unique-id" <!-- Unique identifier -->
class="class1 class2" <!-- CSS classes -->
style="color: red;" <!-- Inline styles (avoid) -->
title="Tooltip text" <!-- Tooltip on hover -->
data-custom="value" <!-- Custom data attributes -->
hidden <!-- Hide element -->
tabindex="0" <!-- Tab order -->
lang="en" <!-- Language -->
dir="ltr" <!-- Text direction -->
contenteditable="true" <!-- Make editable -->
draggable="true" <!-- Enable drag and drop -->
spellcheck="true" <!-- Enable spell checking -->
>
Content
</div>
Interactive Elements
<!-- Details/Summary (collapsible) -->
<details>
<summary>Click to expand</summary>
<p>Hidden content revealed on click</p>
</details>
<!-- Dialog (modal) -->
<dialog id="my-dialog">
<h2>Dialog Title</h2>
<p>Dialog content</p>
<button onclick="this.closest('dialog').close()">Close</button>
</dialog>
<button onclick="document.getElementById('my-dialog').showModal()">
Open Dialog
</button>
<!-- Progress and Meter -->
<progress value="70" max="100">70%</progress>
<meter value="0.7" min="0" max="1" low="0.3" high="0.7" optimum="0.8">70%</meter>
HTML Versions
HTML 1.0 1993 First version, basic elements
HTML 2.0 1995 Standard version, forms added
HTML 3.2 1997 Tables, applets, text flow
HTML 4.01 1999 Stylesheets, scripting, frames
XHTML 1.0 2000 HTML as XML, stricter syntax
XHTML 1.1 2001 Modularized XHTML
HTML5 2014 Semantic elements, audio/video, canvas, APIs
HTML5.1 2016 Minor updates, picture element
HTML5.2 2017 Payment Request API, dialog element
HTML Living Standard (ongoing) - Continuously updated by WHATWG