Structuring a Web Page with HTML
Properly structuring a web page is essential for creating well-organized and accessible content. This guide provides an overview of how to structure a web page using HTML elements.
Basic Structure of an HTML Document
An HTML document typically consists of the following elements:
<!DOCTYPE html>
<html>
<head>
<title>Web Page Title</title>
</head>
<body>
<!-- Content goes here -->
</body>
</html>Common HTML Elements for Structuring Content
<header>
The <header> element is used to define the header section of a web page or a section.
<header>
<h1>Website Title</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
</ul>
</nav>
</header><nav>
The <nav> element is used to define a navigation section.
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
</ul>
</nav><main>
The <main> element is used to define the main content of a web page.
<main>
<h2>Main Content</h2>
<p>This is the main content of the page.</p>
</main><section>
The <section> element is used to define sections of content.
<section>
<h2>Section Title</h2>
<p>Section content...</p>
</section><footer>
The <footer> element is used to define the footer section of a web page.
<footer>
<p>© 2023 Your Website</p>
</footer>Conclusion
By using these HTML elements, you can create a well-structured and organized web page. Proper structuring improves the readability, accessibility, and maintainability of your content.