Basics of HTML5

Elements in HTML5

HTML5 comes with  several elements which breaks a single document into multiple small contents that may be either related or independent.
These elements add semantic richness to our markup, and make it easier to re-purpose our documents across media and devices.


How to define HTML5 page structure

The Doctyp

First, we have the Document Type Declaration, or doctype. This tells our browser  or any other Parser what type of document it’s dealing with. It also detects the specific version of the HTML page.The doctype should be declared before any other writing of HTML in File. As the HTML5 now in use, it is easy to remember it’s declaration type, because it consists no special characters or version numbers like it’s predecessors.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www➥”>
And for HTML4 Transitional:
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http➥://”>

The new tags of HTML5

<article> An article  self-contained set of content within a page. Technically  an article could be distributed or reused by itself.  Fore Example a single Article in a very large Magazine or Journal  page can be reprinted and reused at will at any time, so the article element is very useful when it comes to reusable contents in a Web page or Print Media.


The element is used to indicate  a block section of content, and is rendered as a block element in the document flow (like a div or heading element). The closing tag is required.

Example using the HTML5 article Element.

The Above HTML5 page will appear just like the following image


  •    <aside> An aside is a way of indicating a sidebar: a set of content that is independent of, and tangential to, the content that surrounds it. Examples include pull quotes, sidebars, or even advertising sections within larger documents.
  •  <nav> A nav section is the section with the major navigation links to other articles, or to other documents. It is not generally meant for collections of minor links, such as the links that are often relegated to a footer (in that specific case, the <footer> tag is considered semantically sufficient).
  • <footer> This well-named tag represents the footer of the containing section element (<body>, <article>, etc.). Footers typically contain information about the containing section element like copyright information, contact information, and links to supporting documents and site maps.
  • <header> The <header> tag groups together a set of introductory tags for the current containing section element (<body>, <article>, etc.). Headers can contain navigation, search forms, or even the document’s table of contents and internal links.
  • <section> The <section> tag is used to group thematically similar content together, often with a heading of some sort.HTML5 defines several new elements for marking up sections of content within a larger document. These sections are typically self-contained or distinct groups of content. Some sections are repeatable within a single document. Section elements help provide an overall structure to the document.