01 / Why Structure Matters

Imagine designing a poster with a title, subtitle, main image, supporting information, and a footer. Each part has a purpose. A website works in a similar way, except that HTML gives each part a structure that a browser can interpret.

In our earlier lessons, you used headings, paragraphs, lists, links, and images. This week, we will look at how those elements fit into a larger page structure.

02 / What Is Semantic HTML?

Semantic HTML means choosing elements that describe the meaning or purpose of the content they contain. Instead of using a generic container for everything, you choose elements that explain what each part of the page does.

<div>
  <h2>About the Artist</h2>
  <p>Biography goes here.</p>
</div>

<section>
  <h2>About the Artist</h2>
  <p>Biography goes here.</p>
</section>

Both examples can display the same content. The difference is that the semantic version communicates more about the role of the content within the document.

03 / Meet the Main Semantic Elements

These elements are commonly used to organize a webpage. You do not need to memorize every HTML element. Focus on understanding what these elements are for and when they make sense.

04 / See How a Page Fits Together

Here is a simplified structure for an artist portfolio. Notice how the elements are nested to show the relationships between the page, its navigation, and its content.

<header>
  <h1>Jordan Lee — Artist</h1>
  <p>Photography, drawing, and mixed media.</p>
</header>

<nav>
  <a href="#about">About</a>
  <a href="#work">Work</a>
  <a href="#contact">Contact</a>
</nav>

<main>
  <section id="about">
    <h2>About</h2>
    <p>A short artist biography.</p>
  </section>

  <section id="work">
    <h2>Selected Work</h2>
    <figure>
      <img src="artwork.jpg"
           alt="Abstract artwork in blue and orange">
      <figcaption>Artwork title, 2026.</figcaption>
    </figure>
  </section>

  <section id="contact">
    <h2>Contact</h2>
    <p>Get in touch to learn more.</p>
  </section>
</main>

<footer>
  <p>© 2026 Jordan Lee</p>
</footer>

Notice that the navigation links use href=”#about”, href=”#work”, and href=”#contact”. Each one matches the corresponding section’s id.

05 / The Difference Between Section and Article

Two elements that beginners sometimes confuse are <section> and <article>. They can both group content, but they serve different purposes.

<section>
  <h2>Exhibition Information</h2>
  <p>Dates, location, and details.</p>
</section>

<article>
  <h2>Artist Interview</h2>
  <p>An independent interview story.</p>
</article>

There is no need to force every element into your page. Choose the element that best describes the content you actually have.

06 / Headings Create a Content Hierarchy

Headings do more than change the size of text. They organize information into levels, helping visitors understand how ideas relate to one another.

<h1>A Guide to Street Photography</h1>

<section>
  <h2>Getting Started</h2>
  <p>Introduction to the subject.</p>

  <h3>Choosing a Camera</h3>
  <p>Information about camera choices.</p>
</section>

<section>
  <h2>Ethics and Respect</h2>
  <p>Information about photographing people.</p>
</section>

07 / Basic CSS Still Does the Styling

Semantic elements work with the CSS skills you already know. You can select an element by its name and style it just as you have done with headings, paragraphs, and other HTML elements.

body {
  margin: 0;
  font-family: Arial, sans-serif;
  line-height: 1.6;
  color: #202638;
}

header {
  padding: 40px 24px;
  background-color: #111b35;
  color: white;
}

nav {
  padding: 16px 24px;
  background-color: #d7ff64;
}

nav a {
  margin-right: 16px;
}

main {
  max-width: 900px;
  margin: 0 auto;
  padding: 24px;
}

section {
  margin-bottom: 32px;
}

footer {
  padding: 24px;
  background-color: #f3f5fa;
}

This is a basic example. You can use your own colors, type choices, and spacing. The important point is that HTML defines the content structure while CSS gives that structure its visual identity.

08 / Accessibility Starts with Structure

Semantic HTML can make a page easier to navigate and understand, including for people who use screen readers or other assistive technologies. Good structure also helps people who scan a page quickly.

• Use headings in a meaningful order.
• Use <nav> for important navigation groups.
• Place the primary page content inside <main>.
• Write descriptive link text that explains where a link goes.
• Give meaningful images appropriate alt text.
• Use an empty alt attribute, alt=””, for purely decorative images that do not convey information.
• Choose semantic elements for their purpose rather than their default appearance.

09 / In-Class Assignment: Rebuild the Structure

For this exercise, you will create a simple webpage for a fictional creative studio. Focus on meaningful HTML structure first. Keep the visual design simple; we will work with more advanced layout techniques in upcoming weeks.

Your page must include:

• A header containing a studio name and short introduction.
• A navigation area with three in-page links.
• A main content area with at least three sections.
• An article describing one featured project.
• An image with descriptive alt text and a caption.
• An aside containing a short related note or studio fact.
• A footer with a credit or contact detail.

Starter code

Paste this into the HTML panel in CodePen. Replace the sample text and add your own content. Then write CSS to style the page.

<header>
  <h1>Northstar Creative Studio</h1>
  <p>Ideas made visible.</p>
</header>

<nav>
  <a href="#studio">Studio</a>
  <a href="#project">Featured Project</a>
  <a href="#contact">Contact</a>
</nav>

<main>
  <section id="studio">
    <h2>About the Studio</h2>
    <p>Describe your creative studio.</p>
  </section>

  <section id="project">
    <h2>Featured Project</h2>

    <article>
      <h3>Project Title</h3>
      <p>Explain the project here.</p>

      <figure>
        <img
          src="project.jpg"
          alt="Describe your project image">
        <figcaption>Project image caption.</figcaption>
      </figure>
    </article>

    <aside>
      <h3>Studio Note</h3>
      <p>Add an interesting related fact.</p>
    </aside>
  </section>

  <section id="contact">
    <h2>Contact</h2>
    <p>Add contact information here.</p>
  </section>
</main>

<footer>
  <p>© 2026 Northstar Creative Studio</p>
</footer>

10 / Independent Practice

After completing the starter exercise, review your Week 8 midterm website. You do not need to redesign the entire page. Instead, improve its underlying HTML structure.

1. Review your existing code.
   Identify generic containers and determine whether any would be better represented by semantic elements.
2. Organize your page.
   Where appropriate, group the page using header, nav, main, section, article, aside, and footer elements.
3. Review your headings.
   Make sure your main title and section headings create a logical hierarchy.
4. Check your images and links.
   Verify that your alt text is useful, your captions are meaningful, and your link text explains its destination.
5. Preview the result.
   Check that your changes have not broken your CSS or navigation. Semantic elements can be styled, but changing the HTML may affect selectors in your existing CSS.

11 / What to Submit

Submit the following through the designated D2L assignment area:

• A link to your completed in-class CodePen project.
• A screenshot showing the finished webpage.
• A short reflection of approximately 100–150 words explaining how semantic HTML improved the organization of your page.

Reflection questions

• Which semantic elements did you use, and what purpose did they serve?
• What is the difference between a generic <div> and a semantic element such as <section>?
• How can meaningful HTML structure help visitors understand and navigate a website?

12 / Final Checklist

• My page has a clear header, navigation, main content, and footer.
• My content is organized into meaningful sections.
• I used article and aside only where they make sense.
• My headings follow a logical hierarchy.
• My in-page navigation links work.
• My images have appropriate alt text and captions where needed.
• My CSS still works after I updated the HTML.
• I submitted my CodePen link, screenshot, and reflection.