Lesson 04 / HTML

HTML Structure and Elements

Time: 55 min
Type: Reading + Practice
Level: Beginner
Use: Core

Learn the fundamental building blocks of an HTML document and the elements used to create simple web pages.

Course Role

Core

Part of the main course path. Prioritize this before moving to optional polish or deeper references.

See course roadmap Minimum viable paths

Mark lesson complete

Teacher Notes / In-Class Use

Demo Live

Model the core workflow from the lesson using a small class example.
Connect the example back to the first goal: Write the basic structure of an HTML document

Try In Class

Build a complete `index.html` page with `DOCTYPE`, `html`, `head`, and `body`.
Have students make one visible change, save, refresh, and explain what changed.

Submit Or Check

Ask students to show the work in the browser, not only in the editor.
Have students commit their progress with a clear message when the checkpoint is stable.

Watch For

Students copying code without checking file paths, spelling, or capitalization.
Visual changes that work locally but break when the project is published.

Learning Goals

Write the basic structure of an HTML document
Understand tags, content, elements, attributes, nesting, and void elements
Use headings, paragraphs, images, lists, links, and common page elements

Introduction

This lesson teaches the required structure of every HTML page and the common elements used inside the visible page content.

By the end, you should be able to create a complete HTML document with a clear head, a visible body, readable content, links, images, and lists.

Full HTML Page Anatomy

A complete HTML page has a document type, one root html element, a head for page information, and a body for visible content.

<!DOCTYPE html> tells the browser to use modern HTML.
<html lang="en"> wraps the entire page and identifies the page language.
<head> contains information about the page, including metadata, title, and CSS links.
<body> contains the content people see and interact with.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Website</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <h1>Welcome to My Website</h1>
    <p>This is the visible page content.</p>
    <script src="script.js"></script>
  </body>
</html>

The DOCTYPE Declaration

Every HTML document should begin with a DOCTYPE declaration. This tells the browser to render the page using modern HTML rules.

<!DOCTYPE html>

The html Element

Every HTML document has one html element. It acts as the root container for everything else on the page.

The lang attribute tells browsers, search engines, and assistive technologies what language the page uses.

<!DOCTYPE html>
<html lang="en">
  <head>
  </head>
  <body>
  </body>
</html>

The head Element

The head element contains information about the HTML document. This information is not displayed directly as page content.

title: Sets the title that appears in the browser tab.
meta: Provides metadata about the page, such as character set, viewport, and description.
link: Links to external files, most often stylesheets.
script: Links to JavaScript files when needed.

Stylesheet links usually belong in the head. JavaScript links usually live near the bottom of the body so the HTML can load before the script runs.

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="A brief description of my website.">
  <title>My Website</title>
  <link rel="stylesheet" href="styles.css">
</head>

Script Links at the Bottom of the Body

A common beginner-friendly pattern is to place the script element right before the closing </body> tag.

<body>
  <h1>Welcome</h1>
  <script src="script.js"></script>
</body>

The body Element

The body contains the visible content of the page. This includes elements like headings, paragraphs, images, lists, links, navigation, and page sections.

HTML Syntax: Elements and Attributes

HTML is built from elements. Most elements have an opening tag, content, and a closing tag.

<p> is the opening tag.
class="intro" is an attribute.
This is a paragraph. is the content.
</p> is the closing tag.

<p class="intro">This is a paragraph.</p>

Content

The content between the opening and closing tags defines the element's purpose and what's displayed on the page. Text, images, lists, and other elements all have content.

Elements

Elements are the building blocks of HTML documents. They represent content or functionality and can be nested within other elements to create complex structures.

For example, the h1 element would be <h1>Page Title</h1>.

Attributes

Attributes provide additional information about an element. They're specified within the opening tag and consist of a name-value pair separated by an equal sign.

For example, the img element has a src attribute that specifies the image source.

<img src="images/logo.png" alt="My Website Logo">

Nesting

Elements can contain other elements, forming a hierarchical structure.

The inner element, or child, must be opened and closed inside of the outer element, or parent. If the order of nested tags is wrong, the browser will try to fix the issue. This can lead to unexpected results.

Good vs. Broken Nesting

When one element is inside another element, close the inner element before closing the outer element.

Pattern	Example	Why
Correct	`<p><strong>Important text</strong></p>`	The `strong` element opens and closes inside the `p` element.
Broken	`<p><strong>Important text</p></strong>`	The `p` element closes before its child element closes.

Void Elements

Some HTML elements, like img and br, don't have a separate closing tag. They represent standalone content and are often referred to as void elements.

<img src="image.png" alt="">
<br>

Common Page Structure Elements

Semantic HTML elements describe the role of different parts of a page. They make pages easier to read, style, navigate, and maintain.

header usually contains introductory content or site navigation.
nav contains important navigation links.
main contains the primary content of the page.
section groups related content.
footer usually contains closing information, credits, or secondary links.

<header>
  <nav>
    <a href="index.html">Home</a>
    <a href="about.html">About</a>
  </nav>
</header>
<main>
  <section>
    <h1>Page Title</h1>
    <p>Main page content goes here.</p>
  </section>
</main>
<footer>
  <p>&copy; 2026 My Website</p>
</footer>

Headings

Headings, from h1 to h6, structure your content and define its importance. They're not just for displaying large text; they indicate hierarchy, like a book's title, chapters, and subheadings.

Most beginner pages should start with one clear h1, then use h2 and h3 for subsections.

<h1>Welcome to My Website</h1>
<h2>About Us</h2>
<h3>Our Mission</h3>

Paragraphs

The p element represents a paragraph. Paragraphs are usually represented in visual media as blocks of text separated from adjacent blocks by blank lines or first-line indentation.

HTML paragraphs can be any structural grouping of related content, such as images or form fields.

<p>This is a paragraph of text.</p>

Images

The img element is used to embed images in your HTML document.

src: Specifies the URL or path to the image file.
alt: Provides alternative text for the image. This text is displayed if the image cannot be loaded and is crucial for accessibility.

Use descriptive alt text for meaningful images. For decorative images, use an empty alt attribute, such as alt="".

<img src="images/logo.png" alt="My Website Logo">

Meaningful vs. Decorative Image Alt Text

Image type	Example	Why
Meaningful image	`alt="Quinton Jason speaking at a design event"`	The image communicates information, so the `alt` text should describe it.
Decorative image	`alt=""`	The image is only visual decoration, so screen readers can skip it.

Lists

Unordered lists are used for items that don't have a specific order. Each item is wrapped in an li element.

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

Ordered Lists

Ordered lists are used for items with a specific order. Each item is wrapped in an li element. Browsers typically render ordered lists with numbering.

<ol>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ol>

Links

The a element creates hyperlinks that allow users to navigate to other web pages or sections within the same page.

href: Specifies the URL or path of the linked resource.
Link text: The visible text displayed for the link.

<a href="https://www.example.com">Visit Example Website</a>

Types of Links

Internal links point to another page within the same website.
External links point to a webpage on a different website.
Relative links use a path relative to the current page location.
Anchor links use an id to jump to a specific section within the same webpage.
Telephone links use tel: to start a phone call on supported devices.
Email links use mailto: to create a clickable email address.

Link Examples

External links can use target="_blank". When you do that, include rel="noopener noreferrer".

<a href="about.html">About Us</a>
<a href="https://www.example.com" target="_blank" rel="noopener noreferrer">Visit Example Website</a>
<a href="images/logo.png">View Logo</a>
<a href="#contact">Contact Us</a>
<h2 id="contact">Contact Information</h2>
<a href="tel:+15551234567">Call Us</a>
<a href="mailto:contact@example.com">Contact Us</a>

Elements Covered Later

Some HTML elements need more time because they have their own structure and accessibility patterns. We will cover these in later lessons.

table is used for tabular data.
form is used to collect user input.
input, label, textarea, and button are common form elements.

Common Mistakes

When an HTML page looks strange, check the document structure first. Most beginner bugs are small syntax or organization issues.

Mistake	Why it matters	Fix
Missing closing tag	The browser may guess where the element should end.	Close non-void elements, such as `</p>` and `</li>`.
Visible content inside `head`	Content in the `head` will not behave like normal page content.	Put visible content inside the `body`.
Image missing `alt`	The image may not be understandable to screen reader users.	Add meaningful `alt` text or use `alt=""` for decorative images.
Link missing `href`	The link cannot go anywhere.	Add an `href` with the target page, URL, or section id.
Broken nesting	The page structure can become unpredictable.	Close child elements before parent elements.
Heading levels skipped for appearance	The page outline becomes harder to understand.	Choose headings by structure first, then style them with CSS.

Key Points

The html, head, and body elements form the basic structure of every HTML document.

The head element contains information about the page. The body element contains the visible content that users will see.

By combining semantic structure and common content elements, you can start creating simple web pages with text, images, lists, and links.

Exercise: Simple Page

Create a starter page that has a title, one main heading, and one paragraph.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First Page</title>
  </head>
  <body>
    <h1>Welcome!</h1>
    <p>This is my first HTML page.</p>
  </body>
</html>

Exercise: About Me Page

Create an About Me page with a clear heading, a short paragraph, and an unordered list.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>About Me</title>
  </head>
  <body>
    <h1>John Doe</h1>
    <p>I enjoy coding, reading, and playing guitar.</p>
    <ul>
      <li>Coding</li>
      <li>Reading</li>
      <li>Playing Guitar</li>
    </ul>
  </body>
</html>

Exercise: Contact Page

Create a contact page with email and telephone links. Put each link in its own paragraph or list item so the links have clear spacing.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contact</title>
  </head>
  <body>
    <h1>Contact Information</h1>
    <ul>
      <li><a href="mailto:john.doe@example.com">john.doe@example.com</a></li>
      <li><a href="tel:+15551234567">555-123-4567</a></li>
    </ul>
  </body>
</html>

Check Your Page

Make sure the page has one DOCTYPE, one html element, one head, and one body.
Make sure visible content is inside the body.
Check that images include useful alt text.
Click every link to make sure each href works.
Use your browser's Developer Tools, also called Inspect, to look for errors.
Run your code through an accessibility checker like WAVE.

Safari Note

To enable developer tools in Safari, click Safari -> Settings -> Advanced, then check "Show features for web developers."

Checkpoint

Before moving on, make sure these feel true.

I can explain the main concept in my own words.
I can apply this lesson to my current project.
I can verify the result in the browser.
I can commit the change with a clear message.

Project Connection

This lesson supports current class projects.

Project 01 Basic Webpage Create a basic webpage using HTML to practice structure, semantic markup, headings, paragraphs, lists, links, images, and basic styling.

Practice

Build a complete index.html page with DOCTYPE, html, head, and body.
Add one header, one main, and one footer.
Add headings, paragraphs, one image, one unordered list, and one ordered list.
Add one internal link, one external link, one email link, and one telephone link.
Check the page for missing closing tags, broken nesting, missing alt text, and links without href.