Structure of HTML 5 Document

Structure of HTML 5 Document

Howdy Reader,

HTML 5 is today’s buzzword and pretty smart mark up language.

Today, we would be dealing with the structure of an HTML 5 document , as our title already conveys the message.

Prior to HTML 5, most stable version was HTML 4. However, the invention of HTML 5 has created a new era of web development. HTML 5 along with CSS 3 and JavaScript has become very powerful tool to create dynamic and responsive websites. If you are interested in reading about previous versions of HTML, refer this article.

  1. HTML 5 introduces a set of new structural  elements that makes easier to structure html pages.

  2. Using these structural elements, web pages will be more understandable.

The most commonly used structure elements are:html5

  • <nav> : Navigation region.
  • <section>: A logical region of a page.
  • <article>: A article or other complete piece of content.
  • <aside>: Secondary content, such as a sidebar.
  • <footer>: Footer region.
  • <header>: Header region.

Structural Elements:

Structure of HTML 5 Document

  • <header>: To define the header (things you usually wrap in h1, h2 ..etc..).
  • <nav>:  It is used for navigational links, either to section in the same page or to the other pages like a menu.
  • <section>:  represent  a generic document.
  • <article>: represent a independent piece of content  such as a newspaper article or a blog entry.
  • <aside>:  represent a secondary content. If the content is related slightly to the rest of the page usually a side bar.
  • <footer>: represent a footer of a section which contain the information like author , copyright  information.

That’s all regarding the structure of HTML 5 document. You can check our next article on HTML 5 here.

What do you think?

Dear Reader,
If you have any questions or suggestions please feel free to email us or put your thoughts as comments below. We would love to hear from you. If you found this post or article useful then please share along with your friends and help them to learn.

Happy Learning!