Why Semantic HTML Matters
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
headerfor branding, - a
navfor links, - a
mainarea for content, - and a
footerfor 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>
Building Common Page Elements Correctly
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
alttext 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.
Forms as a Core Web Feature
ProReviewer — locked
Drills, code labs, and full solutions.
Information Architecture and Content Quality
ProReviewer — locked
Drills, code labs, and full solutions.
Practice & Exam Drills — Lesson 2
ProReviewer — locked
Drills, code labs, and full solutions.