HTML Page Structure & Semantics

#html #beginners #webdev #tutorial

Hey coders

We come across different website designs every day and almost every one of them has a different structure which is defined by positioning HTML's grouping elements in different ways.

HTML Page Structure

You can see The most basic structure that we come across on the web in this image.

The elements in the given picture are the thematic grouping elements or we can say semantic elements that we use to structure our page. Let's go through these one by one -

header - This element is used for the introductory purpose we usually contain our logo, nav menu, etc. inside this element.
main - The main element is used to hold all the meaningful content of the page that we want our visitors to go through i.e, all the section, article, aside tags come inside it. NOTE: There should only be one main element in an HTML document.
section - Section is used to group associated content such as different articles, information cards, etc.
article - We use an article when there's a piece of content on our page that is independent of other content on our web page. for example, a blog post or a news story, etc. The article tag is contained in the section tag.
aside - aside is the element used to contain the sidebars on our page.
footer - Footer is used for containing content like copyright information, site links, newsletter forms, etc.

One thing to note here is that the footer and header can be kept inside the main element also but one could argue that these should be outside the main as they usually don't hold content that is directly related to the central topic of our document. So we should try to use them only as a descendent of section, article or any other element while using them inside the main element. Whereas, the header and footer of the whole website should be kept outside the main element.

HTML Semantics

Now, you must be thinking we can use a <div> rather than using any of these elements to make any possible style,and it's correct too but this is also where the necessity of using semantics and semantic elements come into play.

What is semantics?

Semantics in terms of HTML simply means describing the meaning of our given content to the browser and ourselves(the developers). The generic elements we discussed above do just that. For example, using a <table> tag to define a table for our page instead of a <div>, <article> or <section> provides better semantics as it clearly defines that there's a table here.

Why not use <div> instead

So we know the meaning of semantics now and how they provide meaning to our content let's come back to the question of why can't we use <div>, <span>, etc. for these purposes. The answer is simple the sole purpose of a <div> is for grouping and styling our content but not to provide semantic meaning to our page. <div> does not provide any meaningful information regarding the type of content to the browser or the developer himself.
So, <div> has its use case and that is the grouping and then styling the content.

Benefits of using Semantic tags

These are some key benefits of semantic tags that you should know in case you are about to avoid using them

Clear indication of the role played by our content
Better readability of code
Offer SEO benefits
Better consistency with the new HTML5 specifications

Semantic tags are for containing the content so that it provides some meaningful information about itself and you should try to avoid using them for styling purposes whereas, <div> is for styling the content that we have inside our semantic elements.

Thanks for reading the article ✌️.