§ — — Web Development
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:
div, div, divheader, nav, main, section, article, footerThe second approach is called semantic HTML. It improves:
For example, a student dashboard page may have:
header for branding,nav for links,main area for content,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:
A few rules matter a lot in exams and practical tasks:
h1, h2, h3alt text when they carry contentExample 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.
ProReviewer — locked
Drills, code labs, and full solutions.
ProReviewer — locked
Drills, code labs, and full solutions.
ProReviewer — locked
Drills, code labs, and full solutions.
Done with this module? Track it — your progress shows on the subject list.
Up next
Lesson 3: CSS for Layout, Design, and Responsiveness→←Previous: Lesson 1: Web Foundations and the Development Workflow