General Assembly logo

HTML Fundamentals and Document Structure

Session Time: 120 minutes

Table of Contents

  1. Semantic HTML: Meaning Behind the Tags
  2. Document Hierarchy and Accessibility
  3. AI-Assisted Code Validation
  4. Lab: Building Your First Web Page
  5. Wrap-Up and Reflection

Learning Objectives

Upon completion of this session, participants will be able to:

  • Design multi-section HTML documents with semantic accuracy.
  • Evaluate HTML hierarchy and tag structure for readability and accessibility.
  • Use AI tools to verify and refine document structure.

Session Breakdown

Segment Topic Duration (minutes)
Concept I Semantic HTML & Document Structure 50
Concept II Hierarchy, Accessibility & AI Verification 20
Practical Lab Lab: Building Your First Web Page 50
Total 120 minutes

1. Understanding HTML & Element syntax

We'll talk more about the HTML boilerplate you created soon; for now add everything between the <body> and </body>. Content here will show up in the browser!

HTML documents are made up of elements.

At their simplest, elements are a pair of tags with content between them.

Element Syntax

  1. The opening tag. The tag itself starts with a < and ends with a >. Tags must also include the element name, like h1 above. This indicates the start of an element.
  2. The content of an element, HTML Content! here.
  3. The closing tag. The tag starts with a </ (note the addition of the slash) and ends with a >. The closing tag also includes the element name between. It matches the element name of the opening tag.

These things combined create an element.

Most elements have a semantic meaning, and some default styling implemented by the browser. For example, an <h1> element indicates the main topic of a webpage. Along with this, its text content is bold, and its default font size is larger than any other text element.

Element names are always lowercase.

There are many different types of elements. MDN maintains a full reference here.

2. Element Attributes

Elements have attributes that contain details about the element.

The available attributes will vary from element to element. However, many attributes work across every element, like the id attribute. The id attribute is used to uniquely identify an HTML element when necessary. It can also be used to help style elements. Here's the syntax to apply an id to our existing <h1> element.

Element Attributes

  1. A space between the element name and the attribute name.
  2. The attribute name.
  3. An equal sign.
  4. An attribute value wrapped in opening and closing quotes.

A few additional notes about attributes:

  • Working with attributes will only ever alter the first tag or the only tag in the case of a void element.
  • Attribute names are always written in lower-kebab-case. In this convention, each word is written in lowercase and separated by a dash -.
  • Multiple attributes can be used on a single element. A space should separate attributes.
  • By convention, spaces aren't used to separate the equal sign from the attribute name or value, even though it would still be valid. The convention exists because spaces are the only thing separating different attributes. Adding extra spaces can make your HTML less readable.
  • Double quotes are often used around the attribute value in HTML, but single quotes are also valid.

Attributes add a layer of powerful complexity to our HTML. MDN maintains a list of attributes here.

Element and attribute indentation

At times, attribute values could be lengthy, or you may have many of them. To make your code easier to read, you should split the opening tag as in the examples below. You don't need to write this code or pay attention to these attributes. Just observe how indentation and line breaks are handled:

<div
  class="my-class"
  id="my-id"
  draggable="false"
  hidden="false"
>
  My Content
</div>
<img 
  src="https://super-bucket-extreme.s3.us-east-2.amazonaws.com/liam.jpg" 
  alt="Liam, a schnauzer, resting on a bed among his multi-color ducks."
>

Nesting elements

Elements can also be placed inside one another, like how we placed the <h1> element inside the <body> element above. This is called nesting.

<body>
  <h1 id="title">HTML Content!</h1>
</body>

We can continue nesting elements inside of one another.

<body>
  <h1 id="title">HTML Content!</h1>
  <div>
    <h2>The big idea</h2>
    <p>HTML lets us structure content!</p>
  </div>
</body>

Here, we've nested a <div> inside the <body>. <div> is a generic container element used to group content together. Inside of the <div>, there is an <h2> and a <p> element. The <p> element represents a paragraph of text.

You must indent nested elements. Properly indenting elements makes the markup far more readable and less prone to errors.

Some elements, like the list item <li> element, must be nested inside another element, like the unordered list <ul> element. For example:

<body>
  <h1 id="title">HTML Content!</h1>
  <div>
    <h2>The big idea</h2>
    <p>HTML lets us structure content!</p>
    <p>Elements can:</p>
    <ul>
      <li>Have attributes</li>
      <li>Be nested in other elements</li>
    </ul>
  </div>
</body>

🧠 Above, nested elements all have their own line, but this is not strictly required. Here's an example of a <p> element with text and a nested <span> element all on the same line:

<p>Have a <span>great</span> day!</p>

Nested relationships

HTML in the editor

When elements are nested, they form relationships with one another.

  • Descendant / Ancestor: An element is a descendant if it is nested anywhere within its ancestor.
  • Child / Parent: An element is a child if it is a direct descendant of its parent.
  • Siblings: Two or more elements are siblings if they have the same parent.

Visualizing this with a family tree-like view may help.

The DOM tree

Just like in real life, a child can also be a parent (the <ul> element is a child of the <div> element and simultaneously the parent of the <li> elements). Again, proper indentation of your HTML helps keep these relationships clear and organized.

This is more than an analogy - this is the ideal way to think about how elements are connected because it even applies to how they are shown to users in the browser.

HTML shown in the browser

HTML boilerplate

HTML boilerplate is the markup that exists on every web page. In other words, it's the starting point for any work.

We've already discovered how to add this boilerplate - type a ! in the index.html file and press Tab to create it. Below is the result of that. Note that our current HTML has a little more right now, but focus on these parts for now:

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

The first line, <!DOCTYPE html> indicates to a browser that this will be an HTML file.

The second line, <html lang="en">, is the root element. Like the root of a family tree, this element is the ancestor of every other element. All other elements will be descendants of this element. lang="en" indicates that most of the content on this page will be written in English.

All elements inside of the <head> element hold information about the document (metadata) or are resources related to this document.

The first <meta> element informs the browser of the type of text that will appear on the page using the charset attribute. The second <meta> element will help mobile browsers display this content appropriately using the name and content attributes. Do not alter these elements.

The <title> element holds the text that will be shown in the tab for the page.

Anything we want to appear on the page goes into the <body> element. This is where we've written everything in this document so far.

Updating the title

Update the <title>, change the text between the opening and closing <title> tags from Document to Intro to HTML as follows:

<title>Intro to HTML</title>

Inline vs. block elements

Most elements are defined as either block or inline elements.

  • Block elements display on their own line and take up the full width available to them.
  • Inline elements are normally displayed without line breaks and occupy only enough space to contain their contents.

Block elements

Examples of block elements include <div>, <h1>, and <p> elements.

The way we write code does not have any impact on how these appear in the browser. Here, on line 1, the <div> and <h1> are coded adjacent to one another. The same for the <h2> and <p> on the next line:

<div>This is a div!</div><h1>This is an h1!</h1>
<h2>This is an h2!</h2><p>This is a paragraph</p>

Because they are block elements, they will render on their own line, taking up the full width available to them in the browser, as seen below:

HTML in Browser

Inline elements

Examples of inline elements include the <span>, <td>, <img>, and <button> elements.

Notice how, on line 1, the <span> and <button> are coded adjacent to one another, just as the elements above were:

<span>I'm a span!</span><button>I'm a button!</button>

The difference is because they are inline elements, they will share the line and do not take up the full width of the browser:

HTML in Browser

💡 Block elements will not share the line they occupy; inline elements will!

Block elements can be styled to become inline elements. Conversely, inline elements can be styled to become block elements.

How we wrote the code for these doesn't matter. What matters is the built-in behavior of these different elements.

🧠 Inline elements generally cannot have their height and width set in CSS. However, using CSS like this, display: inline-block;, allows inline elements to be sized.

Some inline elements (for example, the <img>) are replaced inline elements and can be given width and height without changing them into inline-block elements.

2. Semantic HTML

In the early days of the web, developers used the generic <div> tag for everything. A header was <div id="header">, and a footer was <div id="footer">. While this worked visually, it provided no information to browsers or assistive technologies about what the content was.

Semantic HTML means using tags that convey the meaning of the content, not just its appearance.

Semantic HTML clarifies the developer's intentions about what they are trying to accomplish when structuring a page. It also improves accessibility for the visually impaired enabling screen readers to do their job better.

It also allows for more accurate web searches via better SEO (search engine optimization).

📚 The goals of search engine optimization are to increase the quantity and quality of traffic to a website through search engine results. It involves making changes (including using semantic HTML) to a website to make it more attractive to search engines.

Core Semantic Elements

Modern HTML5 introduces specific tags to define the structure of a page:

  • <header>: Introductory content, navigation links, or logos.
  • <nav>: A section of navigation links.
  • <main>: The dominant content of the <body>. There should be only one per page.
  • <section>: A thematic grouping of content, typically with a heading.
  • <article>: A self-contained composition (e.g., a blog post, a news story).
  • <aside>: Content indirectly related to the main content (sidebars, call-out boxes).
  • <footer>: Copyright, contact info, sitemap.

semantic HTML

Semantic vs. Non-Semantic Elements

HTML elements are classified based on whether their tag name conveys information about the content they hold.

Feature Semantic Elements Non-Semantic Elements
Definition Elements that clearly describe their meaning to both the browser and the developer. Elements that tell nothing about their content. They serve only as containers for styling or grouping.
Communication The name of the tag explains what the content is (e.g., "This is a footer," "This is a navigation bar"). The name of the tag is generic and offers no context (e.g., "This is a division," "This is a span").
Accessibility High. Screen readers use these tags to help visually impaired users navigate (e.g., jumping straight to the <main> content). Low. Screen readers generally ignore these as structural markers unless ARIA roles are added manually.
SEO Impact Positive. Search engines prioritize content inside these tags to understand the page hierarchy and importance. Neutral. Search engines treat the content as generic text without specific importance relative to the structure.
Common Examples <header>, <footer>, <article>, <section>, <nav>, <aside>, <main> <div>, <span>
Best Use Case Building the primary layout and structure of the document (headers, sidebars, articles). Grouping elements purely for styling (CSS) or layout purposes when no semantic tag fits.

Practical Example

Non-Semantic (Bad Practice):

<div class="top">
  <div class="menu">Home | About</div>
</div>
<div class="content">
  <div class="post">My Blog Post</div>
</div>

Semantic (Best Practice):

<header>
  <nav>
    <a href="#">Home</a> | <a href="#">About</a>
  </nav>
</header>
<main>
  <article>
    <h1>My Blog Post</h1>
    <p>Welcome to my semantic blog...</p>
  </article>
</main>

3. Document Hierarchy and Accessibility

Learning objective: Evaluate HTML hierarchy and tag structure for readability and accessibility.

The Heading Hierarchy (h1 - h6)

Headings are the skeletal structure of your document. They allow users (and search engines) to scan the page and understand the outline.

  • <h1>: The main topic of the page. Use only one per page.
  • <h2>: Major sub-sections.
  • <h3>: Sub-sections of the h2.

Heading

Accessibility Note: Screen reader users often navigate by jumping from heading to heading. If you skip levels (e.g., going from h1 directly to h4 just because you like the font size), you break the navigation flow for these users.

The "landmarks" Role

Semantic tags like <nav>, <main>, and <aside> automatically define ARIA Landmarks. Assistive technologies use these landmarks to jump quickly to specific regions (e.g., "Skip to Main Content").

While HTML5 semantic tags usually handle accessibility natively, explicit ARIA (Accessible Rich Internet Applications) landmark roles ensure older browsers and assistive technologies understand the page structure perfectly.

ARIA Landmarks

HTML Tag ARIA Role Purpose
<header> role="banner" Identifying the site-wide header.
<nav> role="navigation" A collection of navigation links.
<main> role="main" The primary content of the document.
<aside> role="complementary" Content indirectly related to the main content.
<footer> role="contentinfo" Metadata about the document (copyright, privacy).

4. Using AI to Verify and Refine Structure

Learning objective: Use AI to verify and refine document structure.

Even experienced developers miss semantic opportunities. AI tools can act as a "Code Reviewer" to catch accessibility issues before you publish.

AI Workflow for Validation

Instead of just asking AI to write code, ask it to audit code.

Example Prompt:

"I have written the following HTML code for a blog post. Analyze it for semantic accuracy and accessibility. Are there any <div> tags that should be replaced with more specific semantic tags? Is the heading hierarchy logical?"

Practical Scenario

Input Code:

<b>Welcome to my site</b>
<div class="article-title">Latest News</div>
<p>Read more below...</p>

AI Response (Expected):

  • Critique: The <b> tag is for bolding, not structure. Use <h1> for the main title.
  • Critique: <div class="article-title"> has no semantic meaning. Use <h2> or <h3>.
  • Suggestion: Wrap the news item in an <article> tag.

5. Lab: Constructing the Personal Site

Learning objective: Develop a single-page personal site emphasizing semantic HTML with focus on ARIA landmark roles.

Overview

In this lab, you will build a personal portfolio page. You will first write the HTML structure, then use AI to review and enhance its accessibility.

Lab

Part 1: The Semantic Scaffold

  1. Create a file named index.html.
  2. Set up your standard boilerplate (<!DOCTYPE html>, <html>, <head>, <body>).
  3. Action: Write the structure for a personal site including:
    • A Header with your name.
    • A Navigation bar with links to "About", "Projects", and "Contact".
    • A Main section containing:
      • An "About Me" paragraph.
      • A "Projects" section with at least two placeholder images.
      • A "Contact" form.
    • A Footer with a copyright notice.

Constraint: Do not use <div> for high-level layout. Use <header>, <nav>, <main>, <section>, and <footer>.

Part 2: Adding ARIA Roles

  1. Review your code from Part 1.
  2. Action: Explicitly add the corresponding ARIA roles to your semantic tags.
    • Example: <header role="banner">

6. AI-Assisted Accessibility Audit

Learning objective: Use AI to identify missing alt text, labels, and structural elements, then correct and document changes.

Now that you have your structure, we will use AI as an accessibility auditor.

Part 1: The Vulnerability Scan

  1. Copy your full index.html code.
  2. Open your AI assistant (ChatGPT, Gemini, Claude).
  3. Prompt the AI:

    "I am a web developer focusing on accessibility. Here is the raw HTML for my personal site. Act as an Accessibility Auditor. Please scan this code and identify:

    1. Any images missing alt text.
    2. Any form inputs missing associated <label> tags.
    3. Any suggestions to improve the document outline/heading hierarchy.
    4. Verify if my ARIA roles are correctly placed."

Part 2: Implementation and Documentation

  1. Review the AI's feedback.
  2. Action: Apply the fixes to your code.
    • Add descriptive alt text to your project images.
    • Ensure every <input> in your contact form has a <label for="...">.
  3. Challenge: Ask the AI to explain why a screen reader needs a label to be programmatically associated with an input.

Deliverable: Technical Report

Write a short report (markdown format) containing:

  • The "Before" Code snippet: A small section of your code where an accessibility error existed (e.g., an image without alt text).
  • The AI's Feedback: Summary of what the AI identified.
  • The "After" Code snippet: The corrected code.
  • Reflection: Why are ARIA landmarks important even if we use HTML5 tags?

7. Wrap-Up and Reflection

Discussion Questions:

  1. How did the AI change your perspective on what "clean code" looks like?
  2. Why is role="banner" used on the header, and how does that help a user who cannot see the screen?
  3. What happens if you have a form input without a label? How does the AI suggest fixing it?

Resources