Confused about the differences between the main and body elements in Semantic Markup HTML? In this comprehensive guide, we’ll explain the roles of both elements and when to use them in your web development projects. Get a clear understanding of main vs body and start building better, more organized websites today.
Free Weekly SEO Newsletter
Hey! I’m Scott, I’ve been an SEO consultant for nearly 10 years. Get on my weekly newsletter to get..
- Weekly SEO updates, keep up with the latest and greatest.
- How we grow websites from zero to millions of visitors
- A bunch of SEO tips and Tricks you won’t find anywhere else test
what is the difference between Main and Body tags?
The main and body elements are both HTML tags that are used to structure the content of a webpage.
The body element represents the main content of the webpage, and it can contain all other elements on the page, including text, images, and multimedia. The body element is the container for all the content that will be displayed to the user when they visit the webpage.
The main element is used to represent the main content of the webpage, and it should only contain content that is directly related to the central topic of the page. The main element is used to differentiate the main content of the page from other content such as navigation links or ads.
In summary, the body element represents all the content on the webpage, while the main element represents the main content of the webpage.
Code Examples
Here is an example of the body and main elements in HTML:
<body>
<!-- content goes here -->
<main>
<!-- main content goes here -->
</main>
<!-- other content goes here -->
</body>
In this example, the main element represents the main content of the webpage, and it is nested inside the body element, which represents all the content on the webpage.
Here is an example of how you might use the body and main elements to structure a simple webpage:
<body>
<header>
<!-- header content goes here -->
</header>
<main>
<!-- main content goes here -->
</main>
<footer>
<!-- footer content goes here -->
</footer>
</body>
In this example, the header and footer elements contain additional content that is not part of the main content of the webpage, and the main element contains the central content of the webpage.
Here is a more complex example that demonstrates how you might use the body and main elements to structure a more advanced webpage:
Copy code<body>
<header>
<!-- header content goes here -->
</header>
<nav>
<!-- navigation links go here -->
</nav>
<main>
<section>
<!-- section of main content goes here -->
</section>
<section>
<!-- another section of main content goes here -->
</section>
</main>
<aside>
<!-- sidebar content goes here -->
</aside>
<footer>
<!-- footer content goes here -->
</footer>
</body>
In this example, the header, nav, aside, and footer elements contain additional content that is not part of the main content of the webpage, and the main element contains the central content of the webpage, which is divided into multiple sections using the section element.
