IToverview.com - Easy To Learn Tutorials!

IToverview.com

Tutorials


HTML 4 Tags vs HTML 5 Tags

While HTML 5 is backward compatible with HTML 4, few of the older Tags are not supported or completely removed from HTML 5. Some of the notable ones are <center>, <font>, <frame>,<frameset>,<noframes>, <strike> and <u>. Apart from these other tags like <acronym>, <applet>, <basefont>, <big>, <dir>, <tt> and <xmp> are also not supported in HTML 5.

New HTML 5 Tags

HTML 5 introduces many new tags and elements. Some of them are shown below:

  • <article>: It is used to define an article.
  • <aside>: It is used to define a content aside from the main page content.
  • <audio>: It is used to define an audio content.
  • <canvas>: It is used to define some graphics.
  • <command>: It is used to define a command button.
  • <datalist>: It is used to define a dropdown list.
  • <details>: It is used to define details of an element.
  • <embed>: It is used to define container for an external application(plug ins).
  • <figcaption>: It is used to define a caption for a <figure> element.
  • <figure>: It is used to define a diagram, image, photo, illustrations etc.
  • <footer>: It is used to define a footer for a section or a document.
  • <header>: It is used to define a header for a section or a document.
  • <keygen>: It is used to define a generated key.
  • <main>: It is used to define a main content of a content.
  • <mark>: It is used to define a highlighted text.
  • <nav>: It is used to define navigation links.
  • <output>: It is used to define some output.
  • <progress>: It is used to define progress of a task.
  • <section>: It is used to define a section.
  • <source>: It is used to define a media source.
  • <summary>: It is used to define the header for a <detail> element.
  • <time>: It is used to define time/date.
  • <video>: It is used to define video.
  • <wbr>: It is used to possible line-break.

Semantic Tags

HTML 5 comes with new content-specific Semantic elements, like <section>, <article>, <footer>, <header>, <nav> <aside> etc. These new elements helps to design and build a html page with a clean layout. Semantic elements completely describe their meaning to both the browsers and the html 5 developers. For example section describes a particular section on the html page and article describes an independent, self-contained content on a particular page.

<header>: Header content for a section or a document. It groups the heading and the introductory information.You can have more than one header element in one document.
<nav>: Navigation links for the document.
<section>: may contain one or more article or section elements. Should include a header. <aside>: Some content aside from the main content and should be related to the main content.
<article>: Self independent content with a header.
<footer>: Footer Information like copy right, terms of use, author info etc. Footer content for a section or a document. You can have more than one footer element in one document.

Semantic Tags & Older Browsers

Semantic Tags like header, section, footer, aside, nav, main, article, figure are block elements. In general HTML elements are categorized into Block Level and Inline Elements. Block elements are tags that start/end with a new line in a browser as opposed to Inline Elements which doesn't start with a new line.

So these Semantic tags need to define their display property to be set as Block in the style sheet. Then only the older browsers will render these tags correctly.

header, section, footer, aside, nav, main, article, figure
{
display: block;
}

In order for the Internet Explorer 8 (IE8) and it's earlier versions to support these Semantic tags, we need to include one JavaScript workaround called HTML5Shiv (html5shiv.js) created by Sjoerd Visscher in the <HEAD> section of the html 5 page. You need to download this file from Download html5shiv.js and and this file should be uploaded to your server. Following code should be placed inside the head tag preferably just below CSS code. Here js is the folder where the file is located.

<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<![endif]-->

If we don't include the above code, then IE versions prior to IE9 won't be able to identify these elements.


Previous  Comparing HTML5 Page with Older HTML Page