HTML5 Semantic Structure

Structuring the Web

In C, your program has a clear entry point and structure. You have #include directives for libraries, a main() function where execution begins, and various other functions that organize your logic. A web page has a similar, though distinct, structural logic. Instead of a compiler turning your code into an executable, a web browser parses your HTML file to construct a live, interactive document.

The browser reads your HTML from top to bottom and builds a tree-like structure in memory called the (DOM). This isn't a compilation step; it's a live representation of your page. Every element, attribute, and piece of text becomes a 'node' in this tree. This DOM is what allows languages like JavaScript to interact with and modify the page's content, structure, and style.

Unlike a C compiler that fails on a syntax error, a browser is incredibly forgiving. If you write invalid HTML, the browser will make its best guess at what you meant and render something anyway. This is both a blessing and a curse.

From Generic to Semantic

In the early days of the web, pages were often built using a sea of generic <div> tags. A developer might write <div id="header"> or <div class="main-content">. While this works, it tells the browser nothing about the meaning of the content inside. It's just a box.

HTML5 introduced semantic elements to solve this problem. These tags describe their own meaning to both the browser and the developer. Using them creates a document that is more readable, maintainable, and better for both and .

Here are the most common structural elements:

Tag	Purpose
`<header>`	Introductory content for a page or section. Can contain logos, navigation, and headings.
`<nav>`	Contains navigation links, usually the main menu for the site.
`<main>`	The main, unique content of the page. There should only be one per page.
`<article>`	A self-contained piece of content, like a blog post, news story, or forum post.
`<section>`	A thematic grouping of content, typically with a heading.
`<aside>`	Content that is tangentially related to the main content, like a sidebar or pull quote.
`<footer>`	The footer for a page or section. Often contains copyright info, contact details, and links.

Putting them together gives your document a clear, logical skeleton.

<!DOCTYPE html>
<html>
  <head>
    <!-- Metadata goes here -->
  </head>
  <body>

    <header>
      <h1>My Awesome Website</h1>
      <nav>
        <!-- Navigation links -->
      </nav>
    </header>

    <main>
      <article>
        <h2>Blog Post Title</h2>
        <p>Content of the blog post...</p>
      </article>
    </main>

    <aside>
      <h3>Related Links</h3>
      <!-- Links go here -->
    </aside>

    <footer>
      <p>&copy; 2024 My Website</p>
    </footer>

  </body>
</html>

The Document's Brain

The <head> section is the control centre of your HTML document. It contains metadata: data about the page itself. This information is not displayed on the page but is crucial for the browser, search engines, and other web services.

Common <head> elements include:

<title>: Sets the title of the browser tab or window.

<meta>: Provides metadata like character set (charset), page description, keywords, and author.

<link>: Used to link to external resources, most commonly CSS stylesheets.

<script>: Used to embed or reference executable code, typically JavaScript.

Think of the <head> as being similar to the header files you include in a C program. They set up the environment and link to necessary resources before the main content (<body>) is processed.

Connecting the Pieces

A website isn't just one page. You connect pages using hyperlinks, created with the anchor <a> tag. The href attribute specifies the destination.

href

noun

Short for "hypertext reference," this attribute specifies the URL of the page the link goes to.

Paths can be absolute or relative.

Absolute paths are full URLs, including the protocol (https://...). You use them to link to external sites. <a href="https://www.example.com/about">About Example Inc.</a>

Relative paths point to files within your own site. Their path is relative to the current page's location. This is how you build a multi-page site. <a href="../contact.html">Contact Us</a>

This ../ syntax should feel familiar; it works just like navigating directories in a command-line terminal.

Finally, beyond page structure, HTML provides tags for structuring content itself. You can create unordered (bulleted) lists with <ul>, ordered (numbered) lists with <ol>, and tables for tabular data with <table>. Forms, which collect user input, are built with the <form> tag and contain elements like <input>, <label>, and <button>.

These elements give your content a clear, machine-readable structure, which is the entire goal of semantic HTML.

Quiz Questions 1/6

When a web browser reads an HTML document from top to bottom, what tree-like structure does it build in memory to represent the page?

Quiz Questions 2/6

What is the primary advantage of using semantic HTML elements like <article> and <footer> over generic <div> tags?

Mastering Modern Website Construction