Last updated on 27.11.2024
The importance of proper nesting
HTML is the backbone of any website or web application. And to create a well-structured and accessible webpage, it’s essential to understand the proper usage of HTML tags. In this article, we’ll delve into the correct order of HTML tags and their semantics.
The correct order of HTML tags for a webpage is as follows:
- Header
- Main
- Section
- Article
- Footer
Let’s take a closer look at each of these tags.
1 - Header
The <header> tag is used for introductory content, such as a header image or header text. It’s typically placed at the top of the page and may contain navigation links or a site logo.
Header Example:
<header>
#Logo#
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Abou</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
2 - Main
The <main> tag contains the primary content of the webpage. It can contain one or more <section> elements that group related content together.
Main Example:
<main>
<h1>Welcome to our Website!</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sit amet sapien eget dolor rhoncus rutrum ut eget mi.</p>
<section>
<h2>Services</h2>
<p>We offer a lot of services to meet your needs.</p>
<ul>
<li>Service 1</li>
<li>Service 2</li>
<li>Service 3</li>
</ul>
</section>
</main>
3 - Section
The <section> tag defines a standalone, independent, or self-contained content. It can be nested within other <section> or <main> tags and can contain one or more <article> elements.
Section Example:
<section>
<h2>Post Title</h2>
<p>Posted by Alex</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sit amet sapien eget dolor rhoncus rutrum ut eget mi.</p>
<a href="#">Read more</a>
</section>
4 - Article
The <article> tag is used to define independent, self-contained content. It represents some independent, self-standing content, such as a blog post, a news article, or a product review. It’s typically nested within a <section> tag.
Also, the <article> tag represents self-contained content, and it’s also nested within a <section> tag. You can use multiple <article> tags within the same <section> tag to group related content together.
Article Example:
<section>
<h2>News</h2>
<article>
<h3>Latest Eco News</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sit amet sapien eget dolor rhoncus rutrum ut eget mi.</p>
<a href="#">Read more</a>
</article>
<article>
<h3>Sports News</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sit amet sapien eget dolor rhoncus rutrum ut eget mi.</p>
<a href="#">Read more</a>
</article>
</section>
5 - Footer
The <footer> tag contains footer elements, such as links, copyright info, meta data, etc. It’s typically placed at the bottom of the page.
Footer Example:
<footer>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<p>Company Name. All rights reserved.</p>
</footer>
6 - Another HTML tags
While the above order of tags is the recommended structure for a webpage, there are several other HTML tags that you can use to add additional content and structure to your webpage.
Some of these tags include:
- <div>: A generic container div that can be used anywhere on the page.
- <nav>: The navigation section element
- <p>: Used for paragraphs of text.
- <h1> to <h6>: HTML headings.
- <ul>, <ol>, <dl>: Lists.
- <a>: An anchor/link.
- <aside>: A section for sidebar or related content.
The priority of 'Section' and 'Main' tags
When it comes to structuring content on a website, the <section> and <main> tags are two of the most important HTML tags to use. These tags help to organize content on a page and provide semantic meaning to the information being presented.
The <section> tag is used to define a section of data that is related to a specific theme or topic. This tag can be used to group related content together and make it easier for users to navigate a website. For example, a blog post might include multiple sections, each of which covers a different aspect of the topic being discussed.
On the other hand, the <main> tag is used to define the main content of a page. This tag should only be used once per page, and it should contain the primary information that the page is intended to convey to the user. By using the <main> tag, developers can ensure that the most important content is easily accessible and clearly identified for users.
In terms of priority, the <main> tag should always take precedence over the <section> tag, as it defines the primary content of a page. However, both tags should be used together to create a clear and logical structure for the content on a website. By using these tags effectively, developers can ensure that their websites are easy to navigate and provide a good user experience.
3 General guidelines that you can follow:
- <main> as a top-level container, with <section> nesting: This is good for a multi-section page, with <main> encompassing all sections.
- <section> as a top-level container, with <main> nesting: This indicates a group of content that is logically a “section”, with <main> containing the main/primary content of that section.
- Nested <section> elements: This creates a hierarchy of sections, with child <section> elements grouping related content.
Understanding the relationship between 'Article' and 'Section'
When it comes to structuring content on a website, it’s important to use HTML tags that provide semantic meaning to the information being presented. Two tags that are commonly used for this purpose are <article> and <section>. While these tags are similar, they have different meanings and should be used appropriately to ensure that the content on a website is well-organized.
The <section> tag is used to define a section of content that is related to a specific theme or topic. This tag can be used to group related content together and make it easier for users to navigate a website. For example, a blog post might include multiple sections, each of which covers a different aspect of the topic being discussed.
On the other hand, the <article> tag is used to define a self-contained piece of content that can be distributed or reused independently of the rest of the page. This tag is often used for blog posts, news articles, or other types of information that can stand alone as a complete piece.
While <section> and <article> tags are distinct and serve different purposes, they can be used together to create a well-structured website. For example, a blog post might include multiple <article> tags, each of which covers a specific subtopic related to the main topic of the post. Within each <article> tag, there might be multiple <section> tags that group related content together.
Example of how <article> and <section> tags might be used together in a blog post:
<article>
<header>
<h1>Tips for Improving Your Writing Skills</h1>
<p>Posted by Alex</p>
</header>
<section>
<h2>Tip #1: Read Widely</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sit amet sapien eget dolor rhoncus rutrum ut eget mi.</p>
</section>
<section>
<h2>Tip #2: Practice Every Day</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sit amet sapien eget dolor rhoncus rutrum ut eget mi.</p>
</section>
<section>
<h2>Tip #3: Join a Writing Group</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sit amet sapien eget dolor rhoncus rutrum ut eget mi.</p>
</section>
<!-- More sections for tips 4-10 -->
</article>
In this example, the <article> tag contains multiple <section> tags, each of which covers a specific tip for improving writing skills. By using both tags together, the content is well-organized and provides semantic meaning to the information being presented.
Also read about: