Every HTML page follows a standard structure. The DOCTYPE declaration tells the browser which version of HTML to use.
<!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">
<link rel="icon" href="favicon.ico">
</head>
<body>
<!-- Visible content goes here -->
<script src="script.js"></script>
</body>
</html>
Tip: Always include lang on html, charset and viewport meta tags for accessibility and mobile support.
Semantic elements clearly describe their meaning to both the browser and developer, improving accessibility and SEO.
<header> Site header / page header </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> Footer content </footer>
<figure> Image with caption </figure>
<figcaption> Caption for figure </figcaption>
<time datetime="2026-01-01">Jan 1</time>
<address> Contact information </address>
<mark> Highlighted text </mark>
<details> Expandable content </details>
<summary> Summary for details </summary>
HTML provides a hierarchy of headings and various inline text elements for formatting and meaning.
<!-- Headings (h1 = most important) -->
<h1>Main Title</h1>
<h2>Section Title</h2>
<h3>Subsection</h3>
<!-- Paragraphs -->
<p>A paragraph of text.</p>
<br> <!-- line break -->
<hr> <!-- horizontal rule -->
<!-- Inline text formatting -->
<strong>Bold (important)</strong>
<em>Italic (emphasis)</em>
<u>Underline</u>
<s>Strikethrough</s>
<small>Smaller text</small>
<sup>Superscript</sup>
<sub>Subscript</sub>
<code>Inline code</code>
<pre>Preformatted text</pre>
<blockquote>Long quote</blockquote>
<abbr title="HyperText">HTML</abbr>
The <a> tag creates hyperlinks. The <img> tag embeds images. Always include alt text for accessibility.
<!-- Links -->
<a href="https://example.com">External link</a>
<a href="/about">Internal link</a>
<a href="#section">Anchor link</a>
<a href="mailto:hi@example.com">Email</a>
<a href="tel:+1234567890">Phone</a>
<a href="file.pdf" download>Download</a>
<a href="..." target="_blank" rel="noopener">New tab</a>
<!-- Images -->
<img src="photo.jpg" alt="Description" width="300" height="200">
<img src="logo.svg" alt="Company Logo" loading="lazy">
<!-- Responsive image -->
<picture>
<source media="(min-width:768px)" srcset="large.jpg">
<source media="(min-width:480px)" srcset="medium.jpg">
<img src="small.jpg" alt="Responsive image">
</picture>
HTML has three types of lists: unordered (bullets), ordered (numbers), and description lists.
<!-- Unordered list -->
<ul>
<li>Item one</li>
<li>Item two</li>
<li>Nested:
<ul><li>Sub-item</li></ul>
</li>
</ul>
<!-- Ordered list -->
<ol type="1"> <!-- 1, A, a, I, i -->
<li>First step</li>
<li>Second step</li>
<li value="10">Jump to 10</li>
</ol>
<!-- Description list -->
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets</dd>
</dl>
HTML tables display tabular data. Use <thead>, <tbody>, <tfoot> for structure and accessibility.
<table>
<caption>Student Grades</caption>
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Grade</th>
<th scope="col">Score</th>
</tr>
</thead>
<tbody>
<tr>
<td>Alice</td>
<td>A</td>
<td>95</td>
</tr>
<tr>
<td colspan="2">Merged cell</td>
<td rowspan="2">Tall cell</td>
</tr>
</tbody>
<tfoot>
<tr><td colspan="3">Average: 90</td></tr>
</tfoot>
</table>
HTML forms collect user input. The action attribute specifies where to send data; method specifies GET or POST.
<form action="/submit" method="POST">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required placeholder="Your name">
<input type="email" name="email" required>
<input type="password" name="pass" minlength="8">
<input type="number" min="0" max="100" step="5">
<input type="checkbox" id="agree" name="agree">
<label for="agree">I agree</label>
<input type="radio" name="color" value="red"> Red
<input type="radio" name="color" value="blue"> Blue
<select name="country">
<option value="">Select...</option>
<option value="us">USA</option>
</select>
<textarea name="msg" rows="4"></textarea>
<button type="submit">Submit</button>
</form>
HTML5 introduced native audio and video elements, eliminating the need for Flash plugins.
<!-- Video -->
<video width="640" height="360" controls autoplay muted loop>
<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 YouTube -->
<iframe
width="560" height="315"
src="https://www.youtube.com/embed/VIDEO_ID"
allowfullscreen>
</iframe>
<!-- Canvas (for drawing) -->
<canvas id="myCanvas" width="400" height="300"></canvas>
Meta tags provide metadata about the HTML document. They are crucial for SEO, social sharing, and browser behavior.
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Page Title (50-60 chars)</title>
<meta name="description" content="Page description (150-160 chars)">
<meta name="keywords" content="html, css, javascript">
<meta name="author" content="Your Name">
<meta name="robots" content="index, follow">
<!-- Open Graph (social sharing) -->
<meta property="og:title" content="Page Title">
<meta property="og:description" content="Description">
<meta property="og:image" content="image.jpg">
<meta property="og:url" content="https://example.com">
<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Page Title">
<link rel="icon" type="image/png" href="favicon.png">
</head>
Accessible HTML ensures your site works for everyone, including users with disabilities. Use ARIA attributes and semantic elements.
<!-- Alt text for images -->
<img src="chart.png" alt="Bar chart showing sales growth">
<img src="decorative.png" alt=""> <!-- empty for decorative -->
<!-- Labels for form inputs -->
<label for="email">Email Address</label>
<input type="email" id="email" name="email">
<!-- ARIA roles and attributes -->
<nav aria-label="Main navigation">...</nav>
<button aria-expanded="false" aria-controls="menu">Menu</button>
<div role="alert" aria-live="polite">Form submitted!</div>
<span aria-hidden="true">★</span>
<!-- Skip navigation link -->
<a href="#main" class="skip-link">Skip to main content</a>
<!-- Tab order -->
<button tabindex="0">Focusable</button>
<div tabindex="-1">Programmatically focusable</div>