HTML5 elements

MDU119: Blog 3

Nowadays many browsers like Chrome version 60.0.3112, Internet Explorer Edge 11, Firefox version 54.0.1 and many others out there support HTML 5. But older versions of these browsers don’t support any other the new elements that HTML 5 has to offer.

In the list below are some of the new elements that HTML 5 offers:

Tag	Description
<article>	Defines an article in a document
<aside>	Defines content aside from the page content
<bdi>	Isolates a part of text that might be formatted in a different direction from other text outside it
<details>	Defines additional details that the user can view or hide
<dialog>	Defines a dialog box or window
<figcaption>	Defines a caption for a <figure> element
<figure>	Defines self-contained content
<footer>	Defines a footer for a document or section
<header>	Defines a header for a document or section
<main>	Defines the main content of a document
<mark>	Defines marked/highlighted text
<menuitem>	Defines a command/menu item that the user can invoke from a popup menu
<meter>	Defines a scalar measurement within a known range (a gauge)
<nav>	Defines navigation links
<progress>	Represents the progress of a task
<rp>	Defines what to show in browsers that do not support ruby annotations
<rt>	Defines an explanation/pronunciation of characters (for East Asian typography)
<ruby>	Defines a ruby annotation (for East Asian typography)
<section>	Defines a section in a document
<summary>	Defines a visible heading for a <details> element
<time>	Defines a date/time
<wbr>	Defines a possible line-break

 

These new elements are no different from the block elements that HTML has and doesn’t have any compatibility issues. Below is the tag <section> as an example due to this one not being compatible:

<style>
section {display: block}
</style>
<section>This is on its own line.</section>
<section>This should appear on a separate line.</section>

To solve the problem and to ensure usability is to add a CSS rule to the site, this makes related elements act like block elements.Some of these above will not work on any of the older browser versions due to being outdated by the new ones we use every day.

Internet Explorer versions 8 and under have difficulties with the new elements. Elements not in the recognised roster cannot and will not be styled by CSS. This means that it cannot operate like block elements or have any CSS formatting.

References:

• WhatIsMyBrowser. (2017, no-date). What’s the latest version of Internet Explorer?.  Retrieved 31 July 2017, from https://www.whatismybrowser.com/guides/the-latest-version/internet-explorer
• WhatIsMyBrowser. (2017, no-date). What’s the latest version of Google Chrome?.  Retrieved 31 July 2017, from https://www.whatismybrowser.com/guides/the-latest-version/chrome
• WhatIsMyBrowser. (2017, no-date). What’s the latest version of Firefox?.  Retrieved 31 July 2017, from https://www.whatismybrowser.com/guides/the-latest-version/firefox
• W3Schools. (2017, no-date). HTML5 Semantic Elements.  Retrieved 31 July 2017, from https://www.w3schools.com/html/html5_semantic_elements.asp
• W3Schools. (2017, no-date). HTML5, Older Browsers and the Shiv.  Retrieved 31 July 2017, from https://www.sitepoint.com/html5-older-browsers-and-the-shiv/

Commented On:

• https://kasukaderp.wordpress.com/2017/07/30/a-way-to-use-html5-on-most-browser/comment-page-1/#comment-10