What do sectioning elements mean for a web page?

Welcome back to the Clever Coding blog. The app and web development world is an exciting place and people are always on the move towards innovation. However, while new technology is exciting, the only way that it’s going to make waves is if it’s created with precision. Sometimes, if you’re new to web or app development, some of the steps that you’re supposed to take when writing code seems unnecessary, as they take up time to implement and don’t have an effect on how the site or app even looks. One of these “unnecessary” seeming things is sectioning elements. Today, we thought we’d go over some of the elements used in HTML and why they’re actually important, even though they don’t affect how the page looks!

Section

The section element is used to section off the content in a page into, well, sections. Take, for example, an instructions page that gives step-by-step examples on how to develop an app. Each paragraph has a step and a set of instructions. When writing the HTML code for this page, it would be in good practice to divide these portions up using the section element. This is beneficial for assistive technology and other people who might also be working on the code. Here is an example:

<section>

<p> This is a section about how to write a section! </p>

</section>

Nav

The nav element refers to navigation. Our web development service likes to think of this as the “table of contents” element. Usually, in the nav, you’ll have a few links that take you to specific parts on the page! While the usage of some of the elements is somewhat vague, it’s normally pretty easy to determine when you need to use the nav section. Here’s an example:

<nav>

<ul>

<li> link </li>

<li> link </li>

<li> link </li>

</ul>

</nav>

Aside

The aside element is where things begin to get a little bit tricky. Think of an aside as a section of content that relates to the main content, but could also stand alone and make sense. Something like a definition or a brief biography on something in the main content would be a good example of an aside. Here’s a visualization:

<p> Clever Coding is a web and app development company in Lehi, Utah. </p>

<aside>

<p> Lehi, Utah has a population of over 61,000 people! </p>

</aside>

The aside element is especially helpful for assistive technology in that it indicates that that section isn’t necessary for understanding the gist of the content.

Main

All of the elements mentioned above refer to content in the periphery; but what about the most important content? That’s where the main element comes in. Whatever is the most important, base part of the page should be included in the main section. Here’s what that looks like:

<main>

<h1> This is the  main content </h1>

<p> The main content is the most important to the page! </p>

</main>

Thanks for reading, we hoped this was helpful! As always, contact Clever Coding for app and web development services!