Structure a webpage using HTML and Semantic HTML
Basic Structure of an HTML Webpage
Every webpage starts with a basic skeleton. Here’s what it looks like:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″ />
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″ />
<title>My Webpage</title>
</head>
<body>
<!– Content goes here –>
</body>
</html>
Explanation of Each Part
- <!DOCTYPE html>: Declares the document as HTML5.
- <html>: The root element that wraps everything.
- <head>: Contains metadata like the page title, character encoding, and mobile settings.
- <title>: Sets the name shown in the browser tab.
- <body>: Holds all the visible content of the page.
Essential HTML Tags You Should Know
These tags help organize content inside the <body>:
| Tag | Purpose | Example Usage |
| <h1>–<h6> | Headings from largest to smallest | <h1>Welcome</h1> |
| <p> | Paragraph | <p>This is a paragraph.</p> |
| <a> | Link | <a href=”page.html”>Click me</a> |
| <img> | Image | <img src=”pic.jpg” alt=”Pic”> |
| <ul> / <ol> | Unordered / Ordered list | <ul><li>Item</li></ul> |
| <div> | Generic container | <div class=”box”>Content</div> |
Semantic HTML: Making Your Code Meaningful
Instead of using <div> for everything, semantic HTML uses tags that describe their purpose.
This improves accessibility, SEO, and code clarity.
Common Semantic Tags
| Tag | Meaning / Use Case |
| <header> | Top section of a page or article |
| <nav> | Navigation links |
| <main> | Main content of the page |
| <section> | A thematic grouping of content |
| <article> | Independent content like blog posts |
| <aside> | Side content like ads or related links |
| <footer> | Bottom section with contact or copyright |
Why Use Semantic HTML?
- Accessibility: Screen readers understand page structure better.
- SEO: Search engines rank pages more accurately.
- Maintainability: Easier to read and update code.
Example: Semantic HTML Page
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″ />
<title>My Blog</title>
</head>
<body>
<header>
<h1>My Blog</h1>
<nav>
<a href=”#home”>Home</a>
<a href=”#about”>About</a>
</nav>
</header>
<main>
<article>
<h2>First Post</h2>
<p>This is my first blog post.</p>
</article>
<aside>
<p>Related links or ads go here.</p>
</aside>
</main>
<footer>
<p>© 2025 My Blog</p>
</footer>
</body>
</html>
