HTML5 New Features
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.
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.
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
<!--[if lt IE 9]>
If we don't include the above code, then IE versions prior to IE9 won't be able to identify these elements.
Comparing HTML5 Page with Older HTML Page