Lesson 2: Semantic HTML and Information Structure

HTML is the structural language of the web. It tells the browser what each part of a page represents. Good HTML is not written merely to "make things appear." It is written to express meaning.

Compare these two approaches:

• Using generic containers everywhere: div, div, div
• Using meaningful tags: header, nav, main, section, article, footer

The second approach is called semantic HTML. It improves:

• readability for developers,
• accessibility for assistive technologies,
• search engine understanding,
• and maintainability of the codebase.

For example, a student dashboard page may have:

• a header for branding,
• a nav for links,
• a main area for content,
• and a footer for contact information.

Semantic tags do not replace good layout design, but they give the page a stronger structure. This is especially useful when projects grow beyond one screen or one developer.

A simple HTML skeleton looks like this:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Student Portal</title>
</head>
<body>
  <header>
    <h1>Student Portal</h1>
  </header>
  <main>
    <section>
      <h2>Announcements</h2>
      <p>Enrollment starts next week.</p>
    </section>
  </main>
</body>
</html>

Most web pages rely on a set of recurring HTML structures. You should know how to build these correctly:

• headings and paragraphs,
• lists,
• links,
• images,
• tables,
• forms.

A few rules matter a lot in exams and practical tasks:

• Headings should follow a logical order like h1, h2, h3
• Links should be meaningful, not just "click here"
• Images should include alt text when they carry content
• Tables should be used for tabular data, not for page layout

Example of a simple navigation list:

<nav>
  <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="modules.html">Modules</a></li>
    <li><a href="contact.html">Contact</a></li>
  </ul>
</nav>

Example of an image with useful alternative text:

<img src="mayon.jpg" alt="Mayon Volcano viewed from Legazpi City">

If the image fails to load, the alt text still communicates its meaning. More importantly, screen readers rely on this text.