DEV Community

Cover image for How do you define the main sections of a web page using HTML?
Matheus Chaves
Matheus Chaves

Posted on • Updated on

How do you define the main sections of a web page using HTML?

Understanding the Main Sections of a Web Page with HTML

In modern web development, structuring your web page correctly is crucial. Not only does it impact SEO, but it also ensures that your site is accessible. In this article, we'll delve into the main sections of a web page and how to define them using HTML5.

Header

The header typically sits at the top of your web page. It contains branding, navigation, and other vital information.

<header>
  <h1>Website Title</h1>
  <nav>
    <!-- Navigation links go here -->
  </nav>
</header>
Enter fullscreen mode Exit fullscreen mode

Navigation

This section is integral for site navigation. It can be a part of the header or stand alone.

<nav>
  <a href="#home">Home</a>
  <a href="#about">About</a>
  <!-- Other links -->
</nav>
Enter fullscreen mode Exit fullscreen mode

Main Content

This is where you put the primary content of your web page.

<main>
  <article>
    <!-- Article content -->
  </article>
  <aside>
    <!-- Sidebar or related information -->
  </aside>
</main>
Enter fullscreen mode Exit fullscreen mode

Articles

Use the article element to mark individual content pieces as stand-alone articles.

<article>
  <h2>Article Title</h2>
  <p>Article content...</p>
</article>
Enter fullscreen mode Exit fullscreen mode

Sidebar

A section that often contains related info or links.

<aside>
  <h3>Related Links</h3>
  <!-- Links or other content -->
</aside>
Enter fullscreen mode Exit fullscreen mode

Footer

Located at the bottom, this section can contain copyright notices, links to privacy policies, or contact info.

<footer>
  <p>Copyright &copy; 2023. All rights reserved.</p>
</footer>
Enter fullscreen mode Exit fullscreen mode

Addition according to user diomed's comment follows the missing tag

Section

The element represents a standalone section of content that can be thematically grouped together. It's useful for breaking up different parts of a web page that can be logically separated but don't fit into the other specific semantic elements like , , or . Each should be identified, typically with a heading.

For instance, if your web page has different topics or chapters, you can use the element to wrap each topic.

<section>
  <h2>Topic 1</h2>
  <p>Content for topic 1...</p>
</section>

<section>
  <h2>Topic 2</h2>
  <p>Content for topic 2...</p>
</section>
Enter fullscreen mode Exit fullscreen mode

In the context of the main sections of a web page, you can use the element within the element to group related content. For example, if you have multiple topics or chapters in the main content of your web page, each can be wrapped in a .

To conclude, the element is essential in creating a structured layout for your web page. It allows you to divide your content into meaningful parts, enhancing the user experience and aiding search engines in understanding the structure and importance of your content.

Conclusion

By using these semantic elements, you can create a structured and meaningful layout for your web page. This practice not only enhances the user experience but also aids search engines in understanding your page structure.

Happy coding!

Top comments (4)

Collapse
 
diomed profile image
May Kittens Devour Your Soul • Edited

where do you see <section> in all that?

did you forget about it or?

Collapse
 
brads profile image
Bradley Oliver

Good question because in this sense (as far as traditional placement or recommended ways of utilizing these HTML5 tags) I never quite understood exactly what was meant for, or ideal for, I just utilized it in ways I personally chose too. Maybe that's a good topic for another write up / blog / post all together

Collapse
 
matheushchaves profile image
Matheus Chaves • Edited

The section element in HTML is indeed a crucial semantic element, and it seems I missed mentioning it in the initial overview. My apologies for that oversight.

Collapse
 
tailcall profile image
Maria Zaitseva

Semantic elements like main, arcticle, and footer are very neat, I wish more people used them!