The Complete HTML Guide

Every HTML topic in one page — from your first tag to HTML5 APIs. Bookmark this as your permanent reference. Each section links to a deeper lesson where available.

01 Document Structure 02 Text & Headings 03 Links 04 Images 05 Lists 06 Tables 07 Forms — Complete 08 Semantic HTML 09 Audio & Video 10 Iframes & Embedding 11 Block vs Inline 12 Entities & Symbols 13 Data Attributes 14 Canvas & SVG 15 Meta & SEO 16 Accessibility 17 HTML5 APIs 18 Best Practices

01Document Structure

Every HTML page has the same skeleton. Browsers are forgiving, but writing it correctly matters for SEO and rendering mode.

html

<!DOCTYPE html>                  <!-- HTML5 mode — always first line -->
<html lang="en">                 <!-- lang helps screen readers & SEO -->
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Page Title</title>      <!-- shown in the browser tab -->
</head>
<body>
  <!-- everything visible goes here -->
</body>
</html>

<!DOCTYPE html> — without it, browsers fall into "quirks mode" and render inconsistently.
<head> — invisible setup: metadata, CSS, title. <body> — everything the user sees.
Comments:  — never shown, useful for notes.

Deeper lesson: Your First HTML Page

02Text & Headings

html

<h1>Main title — one per page</h1>
<h2>Section heading</h2>         <!-- h1 → h6, never skip levels -->
<p>A paragraph of text.</p>
<strong>Important</strong> and <em>emphasized</em> text.
<mark>Highlighted</mark>, <del>deleted</del>, <ins>inserted</ins>,
<sub>subscript</sub>, <sup>superscript</sup>, <small>fine print</small>
<br>  <!-- line break -->   <hr>  <!-- horizontal rule -->
<blockquote cite="src">A long quotation.</blockquote>
<pre><code>preformatted   code</code></pre>
<abbr title="HyperText Markup Language">HTML</abbr>

Interview favourite: <strong>/<em> carry meaning (semantics) for screen readers; <b>/<i> are purely visual. Prefer the semantic pair.

Deeper lessons: Headings · Paragraphs & Text

03Links

html

<a href="https://example.com">External link</a>
<a href="/about.php">Internal link</a>
<a href="#section-id">Jump to a section on this page</a>
<a href="mailto:hi@site.com">Email</a>
<a href="tel:+919876543210">Call</a>
<a href="file.pdf" download>Download file</a>
<a href="https://example.com" target="_blank" rel="noopener noreferrer">
  New tab (always add rel for security)
</a>

Deeper lesson: Links in depth

04Images

html

<img src="photo.jpg" alt="Description for accessibility & SEO"
     width="600" height="400" loading="lazy">

<!-- Responsive images — browser picks the best size -->
<picture>
  <source media="(max-width: 600px)" srcset="small.webp">
  <source srcset="large.webp" type="image/webp">
  <img src="fallback.jpg" alt="...">
</picture>

<figure>
  <img src="chart.png" alt="Sales chart">
  <figcaption>Fig 1 — Quarterly sales</figcaption>
</figure>

alt is mandatory — screen readers read it, Google indexes it, and it shows if the image fails.
loading="lazy" defers off-screen images — free performance.
Set width/height to prevent layout shift (Core Web Vitals).
Formats: WebP/AVIF for photos (smaller), SVG for icons/logos, PNG for transparency.

Deeper lesson: Images

05Lists

html

<ul><li>Unordered — bullets</li></ul>
<ol start="5" reversed type="A"><li>Ordered — numbered</li></ol>
<dl>                              <!-- description list -->
  <dt>HTML</dt><dd>Structure</dd>
  <dt>CSS</dt><dd>Styling</dd>
</dl>

Lists nest — a <ul> inside an <li> makes sub-menus. Deeper lesson: Lists

06Tables

html

<table>
  <caption>Semester Marks</caption>
  <thead>
    <tr><th scope="col">Subject</th><th scope="col">Grade</th></tr>
  </thead>
  <tbody>
    <tr><td>Data Structures</td><td>A+</td></tr>
    <tr><td colspan="2">spans two columns</td></tr>
    <tr><td rowspan="2">spans two rows</td><td>…</td></tr>
  </tbody>
  <tfoot><tr><td>GPA</td><td>9.1</td></tr></tfoot>
</table>

Tables are for tabular data only — never for page layout (that's CSS Grid's job). Deeper lesson: Tables

07Forms — The Complete Set

html

<form action="/submit" method="post">
  <label for="name">Name</label>
  <input type="text" id="name" name="name" placeholder="Your name"
         required minlength="3" maxlength="40">

  <input type="email" name="email" required>
  <input type="password" name="pw" minlength="8">
  <input type="number" min="0" max="100" step="5">
  <input type="date">  <input type="time">  <input type="color">
  <input type="range" min="0" max="10">
  <input type="file" accept=".pdf,image/*" multiple>
  <input type="search">  <input type="tel">  <input type="url">
  <input type="hidden" name="token" value="abc">

  <input type="checkbox" id="agree" name="agree">
  <input type="radio" name="gender" value="m"> <input type="radio" name="gender" value="f">

  <select name="dept">
    <optgroup label="Engineering">
      <option value="cse" selected>CSE</option>
      <option value="it">IT</option>
    </optgroup>
  </select>

  <textarea name="msg" rows="4" placeholder="Message"></textarea>

  <input list="cities" name="city">      <!-- autocomplete -->
  <datalist id="cities">
    <option value="Chennai"><option value="Coimbatore">
  </datalist>

  <fieldset><legend>Group label</legend> …inputs… </fieldset>

  <button type="submit">Send</button>
  <button type="reset">Clear</button>
</form>

Built-in validation attributes

Attribute	Does
`required`	Field must be filled
`min / max / step`	Numeric and date limits
`minlength / maxlength`	Text length limits
`pattern="[0-9]{6}"`	Regex the value must match (e.g., pincode)
`disabled / readonly`	Not editable (disabled isn't submitted, readonly is)
`autocomplete="off"`	Disable browser autofill

Interview question: GET vs POST — GET puts data in the URL (bookmarkable, ~2KB limit, never for passwords); POST sends it in the request body (secure-ish, no size limit, use for anything that changes data).

Deeper lesson: Forms

08Semantic HTML

Semantic tags describe meaning, not appearance. Google and screen readers rely on them — pages built from a hundred <div>s rank worse.

html

<header>   site or section header — logo, nav
<nav>      primary navigation links
<main>     the unique content — exactly ONE per page
<section>  thematic grouping with a heading
<article>  self-contained content (blog post, card, comment)
<aside>    tangential content — sidebar, related links
<footer>   footer of page or section
<figure> + <figcaption>   image/diagram with caption
<time datetime="2026-07-02">July 2, 2026</time>
<details> + <summary>      native accordion, no JS needed
<dialog>   native modal (open with JS: dialog.showModal())

Deeper lesson: Semantic HTML

09Audio & Video

html

<video controls width="640" poster="thumb.jpg" preload="metadata">
  <source src="movie.webm" type="video/webm">
  <source src="movie.mp4" type="video/mp4">
  <track src="subs.vtt" kind="subtitles" srclang="en" label="English">
  Fallback text for old browsers.
</video>

<audio controls loop>
  <source src="song.mp3" type="audio/mpeg">
</audio>

<!-- autoplay only works when muted (browser policy) -->
<video autoplay muted loop playsinline>…</video>

Deeper lesson: Audio & Video

10Iframes & Embedding

html

<!-- YouTube -->
<iframe width="560" height="315"
  src="https://www.youtube.com/embed/VIDEO_ID"
  title="YouTube video" allowfullscreen loading="lazy"></iframe>

<!-- Google Maps -->
<iframe src="https://www.google.com/maps/embed?pb=…"
  width="600" height="450" loading="lazy"
  referrerpolicy="no-referrer-when-downgrade"></iframe>

<!-- Sandboxed iframe — restricts what embedded content can do -->
<iframe src="page.html" sandbox="allow-scripts allow-forms"></iframe>

sandbox blocks scripts, forms, popups unless explicitly allowed — our own Playground uses this for safety.
Never iframe untrusted sites; use loading="lazy" for embeds below the fold.

11Block vs Inline Elements

	Block	Inline
New line?	Starts on a new line, full width	Flows within text
width/height	Respected	Ignored (use inline-block)
Examples	`div p h1 ul table form section`	`span a img strong em code input`

<div> is the generic block container; <span> is the generic inline one. Use them only when no semantic tag fits.

12Entities & Symbols

Reserved characters must be escaped, otherwise browsers parse them as code:

To show	Write	To show	Write
<	`<`	©	`©`
>	`>`	₹	`₹`
&	`&`	→	`→`
"	`"`	non-breaking space	` `

13Data Attributes

Store custom data on any element — the official way to pass values from HTML to JavaScript and CSS:

html

<button data-product-id="42" data-price="199">Add to cart</button>

<script>
  const btn = document.querySelector('button');
  console.log(btn.dataset.productId);  // "42"  (camelCase!)
  console.log(btn.dataset.price);      // "199"
</script>

<style>
  /* target from CSS too */
  [data-price="199"] { border: 1px solid gold; }
</style>

14Canvas & SVG

Canvas — pixel drawing with JavaScript

html

<canvas id="c" width="300" height="150"></canvas>
<script>
  const ctx = document.getElementById('c').getContext('2d');
  ctx.fillStyle = '#6d6ffb';
  ctx.fillRect(20, 20, 100, 60);            // rectangle
  ctx.beginPath();
  ctx.arc(200, 60, 40, 0, Math.PI * 2);     // circle
  ctx.stroke();
</script>

SVG — scalable vector shapes in markup

html

<svg width="200" height="100" viewBox="0 0 200 100">
  <rect x="10" y="10" width="80" height="50" rx="8" fill="#6d6ffb"/>
  <circle cx="150" cy="35" r="25" fill="none" stroke="#f97316" stroke-width="3"/>
  <text x="20" y="90" font-size="14">SVG text</text>
</svg>

When to use which: SVG for icons, logos, charts (crisp at any zoom, stylable with CSS). Canvas for games, image processing, thousands of drawn objects.

15Meta Tags & SEO

html

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Shown in Google results — ~155 chars">
<link rel="canonical" href="https://site.com/page">
<link rel="icon" href="/favicon.ico">

<!-- Open Graph — controls WhatsApp/social share preview -->
<meta property="og:title" content="Page title">
<meta property="og:description" content="Share description">
<meta property="og:image" content="https://site.com/preview.png">
<meta name="robots" content="index, follow">

Deeper lesson: Meta & SEO

Accessible sites are also better-ranked and demonstrate senior-level care in interviews:

Every <img> gets alt; decorative images get alt="".
Every input gets a <label for> — placeholder text is not a label.
Use real <button>, not clickable divs — buttons get keyboard focus for free.
Heading order matters: h1 → h2 → h3. Screen reader users navigate by headings.
ARIA when HTML isn't enough: aria-label="Close" on icon buttons, role="alert" for dynamic messages, aria-expanded on toggles.
Color contrast: text should hit WCAG AA (4.5:1). Test with Chrome DevTools → Lighthouse.

17HTML5 APIs (Quick Tour)

API	What it does	One-liner
localStorage	Persistent key-value storage (~5MB)	`localStorage.setItem('k','v')`
sessionStorage	Same, cleared when tab closes	`sessionStorage.getItem('k')`
Geolocation	User's location (with permission)	`navigator.geolocation.getCurrentPosition(cb)`
Drag & Drop	Native dragging	`<div draggable="true">`
Web Workers	Run JS off the main thread	`new Worker('w.js')` — powers our DSA judge
contenteditable	Make any element editable	`<div contenteditable>`

18Best Practices Checklist

✅ Valid structure — one <h1>, one <main>, lang attribute, charset first in head
✅ Semantic tags over divs; buttons for actions, links for navigation
✅ alt on images, labels on inputs, keyboard-testable UI
✅ loading="lazy" on below-fold images/iframes; width+height set
✅ Lowercase tags and attributes, quoted values, consistent indentation
✅ Validate at validator.w3.org

Practice everything above in the live Code Playground, then test yourself with the 50 HTML interview questions.

← HTML Course Home Complete CSS Guide →

The Complete HTML Guide

01Document Structure

02Text & Headings

03Links

04Images

05Lists

06Tables

07Forms — The Complete Set

Built-in validation attributes

08Semantic HTML

09Audio & Video

10Iframes & Embedding

11Block vs Inline Elements

12Entities & Symbols

13Data Attributes

14Canvas & SVG

Canvas — pixel drawing with JavaScript

SVG — scalable vector shapes in markup

15Meta Tags & SEO

16Accessibility (a11y)

17HTML5 APIs (Quick Tour)

18Best Practices Checklist