HTML5 – Basic Document Structure

The truth is basic document structure has not changed much but HTML5 is semantically far better than HTML4

Lots of people from the web industry are excited about HTML5 and its usage. This is also true that very few professionals are working with HTML5 really very well (in the context of basic HTML5 document structure). However, people seems to be interested in implementing HTML5 for new projects despite the fact that old browser versions do not support HTML5, new versions are compatible with HTML5 but full support is still lacking and HTML version 5 is not stable (work in progress).

html5 document structure

Semantic Web – HTML5 Document Structure Photo by David Martyn Hunt Licensed under CC BY 2.0

Developers have already presented internet with amazing websites, effects and animations, dynamic features and functions etc. But with HTML5, they are expecting more semantic structure, better web applications, flexibility, less coding-less error and more interesting websites which will be future ready to overcome technological transformations.

There are websites claiming that HTML has changed a lot with HTML5 and there are also websites calling HTML5 as unnecessary hype. The truth is basic document structure has not changed much but HTML5 is semantically far better than HTML4. This is because of new structural elements.

Basic HTML5 document structure

html5 basic document structureHTML5 document structure – Working Example »

The section element is the most useful element in HTML5 document structure

While discussion (under the shade of HTML5) is on and will continue even after the stable release of HTML5, you can start learning it right away and make yourself ready for the most awaited future of the web.

1- <!DOCTYPE html>

html doctype html5This is the first line of code of any HTML page and it should be always in first place. Start your website with this which has nothing to do with your website or webpage. It’s not even an HTML tag but a declaration which tells the browser, document type declaration.

This short code asks the browser to render your page using HTML5 markup language. There is no version number mentioned in the code which simply refers to the current version.

2- <html lang=“en”>

html lang attributeThe html element is the root of HTML document which starts with <html> and ends with </html>. The whole document resides within the paired tags. It is recommended to declare the primary language of your webpage with its lang attribute. Its value is a two letter code which represents a language.

Here, you can find the complete list of standard language codes. code_list

Alternatively, you can also put a two letter country code in the value separated by a hyphen (-). The code represents a country where the language is spoken.

<html lang=“en-US”>

Here, you can find the complete list of standard country codes. country_names_and_code_elements

3- <head>

html head html5This is the first paired tag within html element. The head element has nothing to do with the display area of your webpage but it is important for the performance of your website. It provides metadata or information about your webpage.

For example, title element is the child of head element which presents your page with a title; can be viewed in your browser’s tab area.

The head element is the only help for your webpage when it goes live in the wide wild world of internet. It works like a support division of your website which keeps telling everyone (and search engines), what is your website all about at basic level; think of it as a webpage representative.

4- <body>

html body tag html5The paired tag is responsible for the content displayed on your webpage. The body element is in fact the viewable area where you put all your content to fill up the webpage. With HTML5, new elements have been introduced for sectioning purpose, removing lots of <div> from the <body>. It makes effective and relevant use of webpage divisions based on the content type.

5- <header>

html header html5The header tag is used for header text for an HTML document or a small section, depends on which context you are using. The header information could be in any form – a company logo, a marketing slogan or simply a heading. It should wrap information that suits the header tag.

6- <nav>

html nav html5The element represents the section of the page where a group of major navigation links are displayed and offers access to the same webpage, all the pages or to jump to a new domain leaving the current website. <nav> may contain heading, text or links. <nav> should not be used for each navigation link but must be used for links, directly related to your content or website.

7- <article>

html article html5 tagThe primary information goes here. I have heard that <article> is much confusing for designers but I bet it’s not if you think of it not as a regular magazine article or blog post. Think of it as a group of related contents which are complete and self-explanatory.

An article element represents a self-contained composition which is independent and distributable (syndicated). Multiple <article> are allowed either nested within one another or independent from each other on the same page.

8- <section>

html section html5 tagThe section element is the most useful element in HTML5 document structure. It is used for grouping contents which are more likely belong to a particular section. A particular section can define a particular part of your webpage and more section elements could be nested inside the parent section. I would prefer to use it with each section on my webpage without following many rules.

One “about company” page could have three or four sections like introduction, mission, vision and future plans with their individual headings (inside <header>). All the sections would go inside an <article>. Please note that a header and footer are acceptable for a section.

9- <aside>

html aside html5 tagThis element represents content that is slightly related to the main content but not part of it. It is not necessary to position <aside> element as a sidebar or side widget.

I think of it as content that your webpage can live without but its presence somehow supports your main content. Or think of <aside> as an added advantage apart from the content around it but should not disturb the flow of primary information on a webpage.

10- <footer>

html footer html5 tagLast but not least, <footer> which I love for its logical use. The name footer does not mean that it should go necessarily at the bottom. It contains useful information about its nearest ancestor sectioning content.

Examples are contact information or copyright data (for a webpage) and author name or date published (for a blog entry).

HTML5 document structure – Working Example »

External Links » Read more on this topic

Learning basic HTML5 document structure
Introducing new elements in HTML5