Semantic HTML5 Element Properties

HTML5 introduced many semantic elements (

,

,

, etc.). But aside from helping read and structure our HTML, do they have any other unique pr

Solution 1:

The <nav>, <section>, <article>, etc., elements don’t have any special properties that are exposed to frontend JavaScript code; instead they all just use the HTMLElement interface.

However, they do have special properties in screen readers—in that they get announced to screen-reader users in a special way that a div element doesn’t.

Screen readers can announce that a certain part of a document is a section or article, and allow screen-reader users to navigate through the document section-by-section, or to more easily jump among articles.

That said, screen readers also enable users to easily navigate through a document by jumping among its h1-h6 headings—regardless of whether those headings are in section or article elements—so for screen-reader users it’s actually more important that your documents have good informative h1-h6 headings and a logical structure.

Solution 2:

Semantic elements are elements that describe the content. They provide more information to the browser without requiring any extra attributes.

Considering Microformats When you’re adding semantics into your web pages, you should consider using microformats to add even more meaning, when appropriate. Microformats use human-readable text inside the HTML (usually in the class attribute of an element) to define the contents.

Microformats add semantic information about the elements, and this information is already being used in certain situations.

Above figure shows a Google search for reviews of the movie Ender’s Game. The second and third results show “rich snippets,” including information like the star rating.

Google and Bing are both using these types of rich snippets to enhance their search results, and most of the data they are using to get it is semantically marked-up HTML using microformats. You can learn more about how to use microformats in my book Sams Teach Yourself HTML5 Mobile Application Development in 24 Hours.

By writing semantic HTML, you give more information to user agents to use to display the information correctly. For example, if a screen reader sees the element, it knows that this is the main point of the page, and it will read it aloud before reading anything in an element. Plus, as web pages get more and more sophisticated, what the user agents do with them gains sophistication. For instance, in the future, your semantically marked-up recipe could tell a web-ready refrigerator what time to alert the robot butler to start the roast.