HTML Structure & Semantics
You'll learn how to organize web pages with proper HTML structure and why using meaningful tags matters.
What is HTML Structure?
HTML (HyperText Markup Language) is the skeleton of every webpage. Think of it like building a house: you need a foundation, walls, rooms, and a roof in the right order. HTML gives your webpage that same logical structure.
Every HTML document follows a basic pattern:
<!DOCTYPE html>
<html>
<head>
<title>My Page Title</title>
</head>
<body>
<h1>Welcome to My Page</h1>
<p>This is a paragraph of text.</p>
</body>
</html>
The <head> contains information about the page (like its title), while the <body> contains what users actually see.
What are Semantics?
Semantics means using HTML tags that describe what the content is, not just how it looks. Instead of using generic <div> tags for everything, you use meaningful tags:
<header>for the top section of your page<nav>for navigation menus<main>for your primary content<article>for standalone content like blog posts<footer>for bottom information
Why does this matter? Semantic HTML helps search engines understand your content, makes your site accessible to people using screen readers, and makes your code easier for other developers (and future you!) to understand. It's like labeling boxes when moving—you could write "stuff" on everything, but "kitchen dishes" and "winter clothes" are much more helpful.
Key Takeaway: Proper HTML structure organizes your page logically, while semantic tags give meaning to your content, making websites more accessible, searchable, and maintainable.