HTML5 Page Structure
The way of developing the web pages in HTML4 is all well and good but semantically it could be much better.
HTML5 includes a set of markup elements (listed below) that overcome from limitations of web page design. These semantic tags include <article> , <section>, <header> ,<footer>, <aside>, <nav> and <figure> tags. These new tages have meaningful names so that just by looking at these tags you get a clear idea about their contents. These semantic tags of HTML5 are listed below:
- <header>
- <footer>
- <section>
- <article>
- <aside>
- <nav>
- <figure>
You can see that above elements are more expressive and just by looking at them, you will get an idea of their intended purpose.
Typical page layout with semantic HTML5 sectioning tags
Above image shows a structure of HTML5 document with various tags. Here important thing is that the document's tag arrangement depends on how and where you want to add them on the document. For example, the <aside> element can be placed on the left hand side of the <section> or even above or below it.
HTML5 Page Structure Example
HTML5 Doctype
HTML5 Doctype is much simplified. The Doctype declaration for an HTML page will tell the browser to render the page in standard mode no matter what type of DTD specified, it just switches to standard mode to render the page, the browser never actually download DTD and validate the HTML document, it only works for HTML editor at design time.
<!DOCTYPE html>HTML5 Simplifies Tags
In HTML5 some meta tags and the common scripting tags are simplified.
Here is a complete list of HTML5 Elements.
Header Element
The <header> element represents a group of introductory or navigational aids. A header element is intended to usually contain the section's heading, but this is not required. The header element can also be used to wrap a section's table of contents, a search form, or any relevant logos.
Nav Element
The <nav> section can contain links to the other pages from the website or to other parts of the same web page.
Section Element
The <section> element represents a generic section of a document or application.A section can also have its own <header> elements as well as a <footer> element.
Article Element
The <article> element represents an independent item section of content such as a blog post, forum post or a comment. You can use <section> and <article> together or use nested <article> elements.
Aside Element
The <aside> element is intended to house content that is related to the surrounding content but at the same time is a standalone piece of content in itself. The <aside> element can house any type of content including textual information and images.
Footer Element
The <footer> element represents the footer of the whole page or a <section> element. It is intended to contain footer information such as copyright notice.
