Learn

Lesson 04 / HTML

Basic HTML Structure and Elements

Time
55 min
Type
Reading + Practice
Level
Beginner

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

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 simple page with headings, paragraphs, images, lists, and links.
  • 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

In the previous lesson, we learned how to link external resources like CSS and JavaScript to our HTML pages. Now, let's delve into the fundamental building blocks of an HTML document itself.

The DOCTYPE Declaration

Every HTML document should begin with a DOCTYPE declaration. This declaration specifies the document type and helps browsers correctly render the content. Here's the basic syntax:

<!DOCTYPE html>

The html Element

Every HTML document starts with the html element, which acts as the root container for all other elements on the page. It has two main sections: head and body.

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
  </body>
</html>

The head Element

The head element contains meta-information about the HTML document, which is not displayed directly on the page.

  • title: Sets the title that appears in the browser tab.
  • meta: Provides metadata about the page, such as character set and description.
  • link: Links to external stylesheets.
  • script: Links to external scripts.

While it's best to put stylesheet links in the head, script links should usually live at the bottom of the body.

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

Script Links at the Bottom of the Body

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

The body Element

The body contains the visible content of the page, what users will see when they open the document. This includes elements like headings, paragraphs, images, lists, and links.

HTML Syntax: The Building Blocks

HTML is built from tags, content, elements, attributes, nesting, and void elements.

Tags

HTML elements are defined by opening and closing tags. Opening tags typically start with < and end with >, while closing tags start with </ and end with >.

For example, <h1> is an opening tag for a heading element, and </h1> is its closing tag.

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.

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.

Void Elements

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

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

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.

<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 decorative images, use an empty alt attribute, such as alt="".

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

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 of the linked resource.
  • 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: Create links to specific sections within the same webpage.
  • Telephone Links: Initiate a phone call when clicked.
  • Email Links: Create a clickable email address.

Link Examples

External links can use target="_blank" to open the link in a new browser tab or window.

<a href="about.html">About Us</a>
<a href="https://www.example.com" target="_blank">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>

Other Elements

<table><tr><td>Cell</td></tr></table>
<form><input type="text"></form>

Key Points

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

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

By combining these elements, you can start creating simple web pages with text, images, and links.

Exercise: Simple Page

<!DOCTYPE html>
<html>
  <head>
    <title>My First Page</title>
  </head>
  <body>
    <h1>Welcome!</h1>
    <p>This is my first HTML page.</p>
  </body>
</html>

Exercise: About Me Page

<!DOCTYPE html>
<html>
  <head>
    <title>About Me</title>
  </head>
  <body>
    <h2>John Doe</h2>
    <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

<!DOCTYPE html>
<html>
  <head>
    <title>Contact</title>
  </head>
  <body>
    <h1>Contact Information</h1>
    <p>
      <a href="mailto:john.doe@example.com">Email: john.doe@example.com</a>
      <a href="tel:555-123-4567">555-123-4567</a>
    </p>
  </body>
</html>

Next Steps

  • Use your browser's Developer Tools, also called Inspect.
  • Run your code through an accessibility checker like WAVE.
  • Check for color contrast using a contrast checker. Use 4.5:1 minimum for normal text.

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 simple page with headings, paragraphs, images, lists, and links.
  • Build an About Me page.
  • Build a Contact page with email and telephone links.