WHAT IS HTML & HOW TO READ IT

HTML is a structure language. Think of it as nested boxes: a page contains sections, sections contain headings and paragraphs, and each part is wrapped in tags.

Nested Tag Syntax

<main>
  <section>
    <h1>Title</h1>
    <p>This paragraph is inside the section.</p>
  </section>
</main>

Self-Closing / Void Elements

Some elements do not wrap content, so they do not need a closing pair. Common examples are <img>, <br>, <hr>, and <meta>.

<img src="poster.jpg" alt="Film poster">
<br>
<hr>

Where CSS Can Live

Inline style: quick one-off styling on one element only
<style> block: CSS inside the page, usually in the <head>
External stylesheet: linked file like styles.css (best for real projects)

<!-- inline -->
<p style="color: blue;">Inline style example</p>

<!-- in <head> -->
<style>
  p { color: blue; }
</style>

<!-- external -->
<link rel="stylesheet" href="styles.css">

CORE STRUCTURE

Document Setup

Every HTML document begins with a DOCTYPE and basic structure. This tells the browser what kind of document to expect.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Page Title</title>
</head>
<body>
  <!-- Content goes here -->
</body>
</html>

Key Meta Tags

charset="UTF-8" - Character encoding for text
viewport - Responsive design for mobile devices
title - Browser tab and search engine display

SEMANTIC HTML5 ELEMENTS

Structural Elements

Use semantic elements to give meaning to your document structure, with a live preview for each:

Explanation

Code Snippet

Visual Result

<header>
Page or section heading area.

<header> Site title + intro </header>

Site title + intro

<nav>
Navigation links that help users move around.

<main>
The primary content of the page.

<main> Main content area </main>

Main content area

<section>
A thematic grouping of related content.

<section> <h2>Section title</h2> <p>Related content...</p> </section>

Section title

TEXT ELEMENTS

Headings

<h1>Main Heading</h1>
<h2>Subheading</h2>
<h3>Smaller Heading</h3>
<!-- h4, h5, h6 available -->

Explanation

Code Snippet

Visual Result

Heading hierarchy
Use H1 for page title, then H2/H3 for nested structure.

<h1>Main Heading</h1> <h2>Subheading</h2> <h3>Smaller Heading</h3>

Main Heading

Subheading

Smaller Heading

Paragraphs & Emphasis

<p>Regular paragraph text.</p>
<strong>Bold important text</strong>
<em>Italic emphasized text</em>
<mark>Highlighted text</mark>

Inline text tags
<strong> = importance, <em> = emphasis, <mark> = highlight.

<p>Regular paragraph</p> <strong>Important</strong> <em>Emphasis</em> <mark>Highlight</mark>

Regular paragraph. Important, Emphasis, and Highlight.

LISTS

Unordered List (Bullets)

<ul>
  <li>Item one</li>
  <li>Item two</li>
  <li>Item three</li>
</ul>

Explanation

Code Snippet

Visual Result

<ul> + <li>
Use for unordered items where order does not matter.

<ul> <li>Item one</li> <li>Item two</li> <li>Item three</li> </ul>

Item one
Item two
Item three

Ordered List (Numbered)

<ol>
  <li>First step</li>
  <li>Second step</li>
  <li>Third step</li>
</ol>

<ol> + <li>
Use for ordered steps, instructions, or ranked items.

<ol> <li>First step</li> <li>Second step</li> <li>Third step</li> </ol>

First step
Second step
Third step

LINKS & MEDIA

Hyperlinks

<a href="https://example.com">Click here</a>
<a href="page.html">Internal link</a>
<a href="#section-id">Jump to section</a>

Explanation

Code Snippet

Visual Result

<a>
Links can go to websites, local pages, or in-page anchors.

<a href="https://example.com">External</a> <a href="page.html">Internal</a> <a href="#section">Jump</a>

External · Internal · Jump

Images

<img src="image.jpg" alt="Description">
<img src="image.webp" alt="Description" width="300" height="200">

<img>
Always include alt text for accessibility.

Embedded Media

<!-- Video -->
<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
</video>

<!-- Audio -->
<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
</audio>

<video> and <audio>
Use controls so users can play/pause and scrub media.

FORMS & INPUT

Basic Form Structure

<form action="/submit" method="POST">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name">
  
  <label for="email">Email:</label>
  <input type="email" id="email" name="email">
  
  <button type="submit">Submit</button>
</form>

Explanation

Code Snippet

Visual Result

<form>, <label>, <input>, <button>
Labels improve usability and accessibility for each input.

<form> <label>Name</label> <input type="text"> <button>Submit</button> </form>

Input Types

text, password, email, number, range, color, date, time

checkbox, radio, file, hidden, submit, reset

INTERACTIVE CONTENT

Canvas for Drawing

<canvas id="myCanvas" width="400" height="300"></canvas>

<script>
  const canvas = document.getElementById('myCanvas');
  const ctx = canvas.getContext('2d');
  ctx.fillRect(10, 10, 100, 100);
</script>

Explanation

Code Snippet

Visual Result

<canvas>
Raster drawing surface controlled via JavaScript.

<canvas id="myCanvas" width="220" height="100"> </canvas> const ctx = canvas.getContext('2d'); ctx.fillRect(10,10,100,50);

SVG for Vector Graphics

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" fill="blue"></circle>
  <rect x="10" y="10" width="50" height="50" fill="red"></rect>
</svg>

<svg>
Vector graphics that stay sharp at all sizes.

ACCESSIBILITY BASICS

Alt text for images: alt="Descriptive text"
Semantic HTML: Use proper heading hierarchy (h1→h2→h3)
Labels for inputs: <label for="id">
ARIA attributes: aria-label, role
Skip links: Allow keyboard navigation to main content