Chapter 2: HTML - Structure of Web Pages

HTML (HyperText Markup Language) is the foundation of every web page. Learn how to structure content, create forms, build tables, and use semantic elements.

What you'll learn:
  • HTML document structure and syntax
  • Block vs inline elements
  • Text, links, lists, images, tables, and forms
  • Semantic HTML5 elements for accessibility
  • Attributes and best practices

2.1 What is HTML?

HTML (HyperText Markup Language) is the standard language for creating web pages. It describes the content and structure of a web page using elements represented by tags. HTML is NOT a programming language - it's a markup language that tells browsers how to structure content.

Key Concepts

  • Content vs. Presentation: HTML describes WHAT content is (a heading, a paragraph, a list), NOT how it looks. Appearance is controlled by CSS.
  • Tags vs. Elements: A tag is the markup (like <p>), an element is the complete unit including content (<p>content</p>)
  • Nesting: Elements can contain other elements, creating a tree structure
  • Whitespace: Most whitespace in HTML is collapsed into a single space

Basic Tag Syntax

<!-- Opening tag, content, closing tag -->
<element>content</element>

<!-- Example: -->
<p>This is a paragraph</p>

Complete HTML Document Structure

<!DOCTYPE html>  <!-- Declares HTML5 -->
<html lang="en">
  <head>
    <!-- Metadata about the page -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Page Title</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <!-- Visible page content -->
    <h1>Hello, World!</h1>
    <p>Welcome to my website.</p>
  </body>
</html>

HTML Document Parts Explained

<!DOCTYPE html> - Document Type Declaration
  • Purpose: Tells the browser which version of HTML
  • Required: Must be the FIRST line of every HTML document
  • Not a tag: It's a declaration, not an HTML element
  • Without it: Browser enters "quirks mode"
<html> - Root Element
  • Purpose: Contains ALL other elements
  • lang attribute: Specify document language for accessibility
  • Contains: Only <head> and <body> as children
<head> - Document Metadata Container

Contains information ABOUT the page, NOT visible content:

  • <meta charset="UTF-8"> - Character encoding
  • <meta name="viewport"> - Mobile responsiveness
  • <title> - Browser tab title (REQUIRED)
  • <link> - External CSS, favicon
<body> - Document Body

Everything the user sees goes inside the body element:

  • ALL visible content - text, images, links, videos, forms
  • Should be organized with semantic elements

2.2 Block vs Inline Elements

Understanding the difference between block and inline elements is crucial for layout:

Block Elements

  • Take up the full width available
  • Always start on a new line
  • Stack vertically
  • Examples: <div>, <p>, <h1>-<h6>, <ul>, <ol>, <li>, <section>, <article>

Inline Elements

  • Take up only as much width as necessary
  • Do NOT start on a new line
  • Flow horizontally with text
  • Examples: <span>, <a>, <strong>, <em>, <img>, <br>
<!-- Block elements stack vertically -->
<div>This takes full width</div>
<div>This starts on a new line</div>

<!-- Inline elements flow horizontally -->
<p>This is <strong>bold</strong> and <em>italic</em> text.</p>

2.3 Text Elements: Headings and Paragraphs

HTML provides 6 levels of headings and paragraph elements. Proper use is crucial for accessibility and SEO.

Headings Hierarchy

  • <h1> - Main page title (use only ONE per page)
  • <h2> - Major sections (like chapter titles)
  • <h3> - Subsections within h2
  • <h4> to <h6> - Further subdivisions
<h1>Main Title - Largest, most important</h1>
<h2>Major Section Heading</h2>
<h3>Subsection Heading</h3>
<h4>Sub-subsection Heading</h4>
<h5>Minor Heading</h5>
<h6>Smallest Heading</h6>

<!-- Best Practice: Use only ONE h1 per page -->
<!-- Headings should follow logical order (h1 → h2 → h3) -->
Common Mistake: Don't skip heading levels! Going from <h1> directly to <h4> is bad practice. Always follow: h1 → h2 → h3 → h4

Paragraphs and Line Breaks

<p>This is a paragraph. Paragraphs are block elements
that add spacing before and after the text.</p>

<p>For a line break within a paragraph,<br>
use the br element (self-closing).</p>

<!-- Horizontal rule for visual separation -->
<hr>

2.4 Text Formatting Elements

HTML provides elements for emphasizing text. Understand the difference between semantic elements (convey meaning) and presentational elements (only affect appearance).

Semantic vs Presentational Elements

Semantic (Use These!) Presentational (Avoid) Visual Result
<strong> <b> Bold text
<em> <i> Italic text

Why does this matter? Screen readers emphasize <strong> and <em> content, but ignore <b> and <i>.

<!-- Semantic emphasis (preferred) -->
<strong>Important text (bold)</strong>
<em>Emphasized text (italic)</em>
<mark>Highlighted text</mark>

<!-- Subscript and Superscript -->
H<sub>2</sub>O  <!-- Water formula -->
x<sup>2</sup>   <!-- x squared -->

<!-- Code and preformatted text -->
<code>let x = 5;</code>  <!-- Inline code -->
<pre>Preformatted text
    preserves whitespace</pre>

Quotations and Citations

<!-- Block quotation -->
<blockquote cite="https://source.com">
  <p>A long quotation goes here...</p>
  <footer>— <cite>Author Name</cite></footer>
</blockquote>

<!-- Inline quotation -->
<p>She said <q>Hello world</q> to the audience.</p>

<!-- Abbreviation with tooltip -->
<abbr title="HyperText Markup Language">HTML</abbr>

2.6 Lists

HTML supports three types of lists for organizing content:

When to Use Each List Type

  • Unordered List (<ul>) - When order doesn't matter
  • Ordered List (<ol>) - When sequence matters
  • Description List (<dl>) - For term-definition pairs
<!-- Unordered List (bullets) -->
<ul>
  <li>Apple</li>
  <li>Banana</li>
  <li>Orange</li>
</ul>

<!-- Ordered List (numbered) -->
<ol>
  <li>First step</li>
  <li>Second step</li>
  <li>Third step</li>
</ol>

<!-- Description List (definitions) -->
<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language</dd>
  <dt>CSS</dt>
  <dd>Cascading Style Sheets</dd>
</dl>

<!-- Nested Lists -->
<ul>
  <li>Fruits
    <ul>
      <li>Apple</li>
      <li>Banana</li>
    </ul>
  </li>
  <li>Vegetables</li>
</ul>

2.7 Images and Media

The <img> element embeds images. It's a self-closing element.

Required Attributes

  • src - Path to the image file (required)
  • alt - Description of the image (required for accessibility)
Why alt text is crucial:
  • Screen readers read it aloud for visually impaired users
  • Displays when image fails to load
  • Helps search engines understand image content (SEO)
  • Leave alt="" empty for purely decorative images
<!-- Basic image (self-closing element) -->
<img src="photo.jpg" alt="Description of image">

<!-- With dimensions (helps prevent layout shift) -->
<img src="logo.png" alt="Company Logo" width="200" height="100">

<!-- Image as a link -->
<a href="products.html">
  <img src="product.jpg" alt="View Product Details">
</a>

<!-- Figure with caption (semantic) -->
<figure>
  <img src="chart.png" alt="Bar chart showing Q4 sales">
  <figcaption>Q4 Sales Data by Region</figcaption>
</figure>

Common Image Formats

  • .jpg/.jpeg - Best for photographs
  • .png - Best for graphics with transparency
  • .gif - Simple animations, limited colors
  • .svg - Vector graphics, scales perfectly
  • .webp - Modern format, smaller file sizes

Video and Audio

<!-- Video with controls -->
<video src="video.mp4" controls width="640">
  Your browser doesn't support video.
</video>

<!-- Audio -->
<audio src="song.mp3" controls></audio>

2.8 Tables

Tables display tabular data (data in rows and columns). Tables should NOT be used for page layout - use CSS for that!

Table Structure Elements

  • <table> - Container for the entire table
  • <thead> - Groups header rows
  • <tbody> - Groups body content rows
  • <tfoot> - Groups footer rows (totals)
  • <tr> - Table Row
  • <th> - Table Header cell (bold, centered)
  • <td> - Table Data cell
<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>City</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Alice</td>
      <td>25</td>
      <td>New York</td>
    </tr>
    <tr>
      <td>Bob</td>
      <td>30</td>
      <td>London</td>
    </tr>
  </tbody>
</table>

2.9 Forms and User Input

Forms are essential for user interaction - login, search, contact forms, etc.

Form Attributes

  • action - URL where form data is sent
  • method - GET (data in URL) or POST (data in body)
  • enctype - Use multipart/form-data for file uploads

Common Input Types

  • text, password, email, tel, url
  • number, range (slider)
  • date, time, datetime-local
  • checkbox, radio
  • file, hidden, submit
<form action="/submit" method="POST">
  <!-- Text input -->
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" required>

  <!-- Email input -->
  <label for="email">Email:</label>
  <input type="email" id="email" name="email">

  <!-- Password input -->
  <input type="password" name="pass" placeholder="Password">

  <!-- Textarea for longer text -->
  <textarea name="message" rows="4"></textarea>

  <!-- Dropdown select -->
  <select name="country">
    <option value="us">United States</option>
    <option value="uk">United Kingdom</option>
  </select>

  <!-- Radio buttons (choose one) -->
  <input type="radio" name="gender" value="m"> Male
  <input type="radio" name="gender" value="f"> Female

  <!-- Checkbox -->
  <input type="checkbox" name="agree"> I agree to terms

  <!-- Submit button -->
  <button type="submit">Submit</button>
</form>

2.10 Semantic HTML5 Elements

Semantic elements clearly describe their meaning to both browsers and developers:

<header>  <!-- Page/section header -->
  <nav>  <!-- Navigation links -->
    <a href="/">Home</a>
    <a href="/about">About</a>
  </nav>
</header>

<main>  <!-- Main content (only one per page) -->
  <article>  <!-- Self-contained content -->
    <h2>Article Title</h2>
    <p>Article content...</p>
  </article>

  <section>  <!-- Thematic grouping -->
    <h2>Section Title</h2>
  </section>

  <aside>  <!-- Sidebar content -->
    Related links...
  </aside>
</main>

<footer>  <!-- Page/section footer -->
  <p>© 2024 My Website</p>
</footer>

Why Use Semantic Elements?

  • Accessibility: Screen readers navigate by landmarks
  • SEO: Search engines better understand content
  • Maintainability: Code is self-documenting
  • Styling: Meaningful hooks for CSS

Semantic Elements Reference

Element Purpose
<header> Introductory content, logo and navigation
<nav> Navigation links
<main> Main content (only ONE per page)
<article> Self-contained content (blog post, news)
<section> Thematic grouping with a heading
<aside> Sidebar, tangentially related content
<footer> Footer content, copyright, links
Don't confuse: <section> vs <div>: Use <section> when content has a heading and represents a thematic grouping. Use <div> only as a styling container with no semantic meaning.

2.11 HTML Attributes

Attributes provide additional information about elements. They are always in the opening tag and usually come in name="value" pairs.

Global Attributes (work on ANY element)

Attribute Purpose
id Unique identifier (must be unique on page)
class Reusable classifier (can have multiple)
style Inline CSS (avoid when possible)
title Tooltip text on hover
hidden Hides element from view
data-* Custom data for JavaScript 
<!-- id: Unique identifier (use once per page) -->
<div id="main-content"></div>

<!-- class: Multiple classes separated by spaces -->
<p class="highlight important text-center"></p>

<!-- title: Tooltip text -->
<abbr title="HyperText Markup Language">HTML</abbr>

<!-- data-* : Custom data for JavaScript -->
<button data-product-id="123" data-price="29.99">Add to Cart</button>

<!-- Boolean attributes (no value needed) -->
<input type="text" disabled>
<input type="checkbox" checked>
<video src="movie.mp4" autoplay muted loop></video>
Boolean Attributes: Some attributes like disabled, checked, required, autoplay don't need a value. Their presence alone activates them.

Exercise: Create Your First HTML Page

EXERCISE

Write HTML code for a simple personal profile page with:

  • A main heading with your name
  • A paragraph about yourself
  • A list of 3 hobbies
Your preview will appear here...

Quick Quizzes

Test your knowledge! Click on an answer to check if you're correct.

Quiz 1: Which tag is used to create a hyperlink?

A <link>
B <href>
C <a>

Quiz 2: What happens if you omit the <!DOCTYPE html> declaration?

A The page won't load at all
B The browser will automatically add it
C The browser enters "quirks mode" and may render incorrectly

Quiz 3: Given this HTML, what will be displayed?
<p>Hello<strong>World</p></strong>

A The page won't render - this is invalid HTML
B Browser will auto-correct it and show "HelloWorld" with "World" bold
C It will show "Hello" and "World" on separate lines

Quiz 4: Which is the correct way to create an image that links to another page?

A <a href="page.html"><img src="photo.jpg" alt="Photo"></a>
B <img src="photo.jpg" href="page.html" alt="Photo">
C <link href="page.html"><img src="photo.jpg"></link>

Quiz 5: Difference between <input type="submit"> and <button type="submit">?

A <input> submits via POST, <button> via GET
B <button> cannot submit forms
C Both submit, but <button> can contain HTML like images/icons

Quiz 6: What is the purpose of the alt attribute in <img> tags?

A To provide a tooltip when hovering
B To provide alternative text for screen readers and when image fails to load
C To specify an alternative image source

Quiz 7: Which semantic element should contain the main navigation links?

A <nav>
B <menu>
C <links>