Photo by Miguel Á. Padriñán from Pexels

A bit from page structure in HTML 5

Do you have a simple idea about page structure in HTML 5 ?

Today, almost all of web developers are quite familiar with the latest version of html which is html 5, and it has been with us since 2014. Previous version that the html 4 is as much as it is no longer used. HTML 5 has introduced a “page-structure” which can be applied even in our web pages we hope to create.

Unlike previous versions such as html 4, we don’t need to depend on “div” tags as the new version contains about 100 new semantic elements which define the logical structure of our web page in a definite manner.

When it comes to the overall concept of the structure of web pages, there are 6 common semantic elements that make the overall structure of the web page, and also which we need to have a basic idea about.

HTML 5 page structure

Looking at the top section of the web page.

As we already know that every web page must have a main title which tells us what the web page we are scrolling down is about, what we can apply as a tag containing our title is the <header> tag. This “header” specifies information such as brandings, logos, names of companies etc.

It is very important to remember that this header tag can contain several child-tags, for an example, if we want to place a logo next to our main title at the top of the web page, we can apply image tags within header tags as well.

We are not restricted to apply the header tag only for the top section of the web page including title, as we can use it in other coming up sections as well.

After header element, navigation element which is defined as <nav> comes. This tag typically contains a set of navigational links that each of them could link us to another web page whenever we click on any of them.

Among the content of the web page.

The content of a web page plays a significant role and being any web page without any content is impossible. Format and structure of a web page can be vary according to the purpose of each web page. In a web page, if there are any self-contained or independent contents which don’t depend on other contents, the <article> tag is there for including them.

There is another tag called <section> which specifies a particular separated-section. There can be several sections in a web page and hence we could apply as many section elements as how many sections should be there according to our requirement. Each section is identified by its heading at the top of the section.

We can nest article tags inside section tags and vice versa. There is no any explicit way of nesting between article and section tags, as it varies from page to page.

There can be some contents which are indirectly related to the main content of the html document. The <aside> element could consist such contents that are indirectly related to our main content in the page.

At the bottom of the page.

Now we have been moved to the bottom of the structure of our HTML 5 document.

When we are scrolling down a web page until we reach the end, we can see the last section where the information such as privacy and policies, conditions, copyright information , terms of service , etc. are contained.

This footer section would typically specify the authorship of the web page.

We are introduced new <footer> element by html 5 which is for the purpose of creating a footer section to include above mentioned information.

It is also possible that we can use as many footer tags as we want, but it hinges on our requirement and therefore we need to use them in our document with care.




Undergraduate of Faculty of Information Technology, University of Moratuwa in Sri Lanka.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Code the City 11

Number Systems in Digital Electronics.

How to upload and download files using cPanel File Manager

Declaratively Create an ‘Ultimate Parent’ Lookup Field with Process Builder and Flow

Drupal Development Environments: Off-the-island

Why K8s on GKE?

There’s no going back

Merge K Sorted List

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Tharindu Wijetunge

Tharindu Wijetunge

Undergraduate of Faculty of Information Technology, University of Moratuwa in Sri Lanka.

More from Medium

How to Add or Remove Input Fields Dynamically Using jQuery?

Get user location from Browser using javascript and Geolocation API -

Bootstrap for beginners — Part 2

Bootstrap 5 — Adding it to your page