Structuring the Main Content in an HTML Page
Organizing the main content on an HTML page is crucial for creating a well-structured and easily navigable website. The HTML <main> element is the primary container for the main content of a web page, and it plays a vital role in establishing the page's semantic structure.
The <main> Element
The <main> element is used to represent the central, unique content of a document. It should not include any content that is repeated across multiple pages, such as site navigation, copyright information, or the header and footer. The <main> element should be used only once per page and should be placed as a direct child of the <body> element.
Here's an example of how the <main> element can be used:
<body>
<header>
<!-- Site header content -->
</header>
<nav>
<!-- Site navigation content -->
</nav>
<main>
<!-- Main content of the page -->
</main>
<footer>
<!-- Site footer content -->
</footer>
</body>Structuring the <main> Content
Within the <main> element, you can use various HTML elements to structure the content. Some common elements used for this purpose include:
-
Headings: Use
<h1>to<h6>elements to create a hierarchical structure for the content. The<h1>element should be used for the main heading of the page, and subsequent headings should be used to create subheadings. -
Paragraphs: Use the
<p>element to create paragraphs of text. -
Lists: Use
<ul>(unordered list),<ol>(ordered list), and<dl>(definition list) elements to create lists of items. -
Sections: Use the
<section>element to group related content together. This can help to further organize the content and make it more semantically meaningful. -
Articles: Use the
<article>element to represent a self-contained piece of content, such as a blog post or a news article. -
Asides: Use the
<aside>element to represent content that is tangentially related to the main content, such as a sidebar or a pull quote.
Here's an example of how the main content of a page could be structured using these elements:
<main>
<h1>Welcome to Our Website</h1>
<p>This is the main content of the page.</p>
<section>
<h2>About Us</h2>
<p>Learn more about our company and our mission.</p>
</section>
<section>
<h2>Our Services</h2>
<ul>
<li>Service 1</li>
<li>Service 2</li>
<li>Service 3</li>
</ul>
</section>
<article>
<h2>Featured Blog Post</h2>
<p>Read our latest blog post on a relevant topic.</p>
</article>
<aside>
<h3>Sidebar Content</h3>
<p>This is some additional content that is related to the main content.</p>
</aside>
</main>By using the appropriate HTML elements to structure the main content, you can create a well-organized and semantically meaningful web page that is easy for both users and search engines to navigate and understand.
The Mermaid diagram above illustrates the structure of an HTML page, with the <main> element containing various sub-elements to organize the content.
