New HTML5 Semantic Markup
Semantic elements describe their meaning or purpose to the browser and to the developer. HTML5 has new semantically rich elements that can convey the purpose of the element to both developers and browsers.
Earlier, developers used IDs and classes with <div> tags. Though, this conveyed meaning to the developers, but it didn't helped browsers to understand the purpose of that markup. For example
<div id="footer">The <div> tag defines a division or a section in an HTML document. This division is for footer section of the web page. But for the browser, footer is just a name of the id. It does not have any semantic structure.
Six Commonly Used HTML5 Semantic Elements
- header
- nav
- section
- article
- aside
- footer
1. header
The <header> element is a a group of introductory or navigational aids. A header element can be used to include introductory content or navigational aids that are specific to any single section of a page, or that apply to the entire page, or both. For example, you can include the logo and title of the article here. You can also add a nav element for the site navigation.
2. nav
The <nav> element defines a menu bar or a group of navigation links. The nav element should be reserved for navigation that is of primary importance.
3. section
The <section> element represents a generic section of a document or application. A section is a thematic grouping of content, typically with a heading. It can be used together with h1-h6 to indicate the document structure.
For example, a company’s About page might include sections on the company's history, its mission statement, and its team. Another example of an online news site where articles could be grouped into sections covering sports, world affairs, and economic news.
4. article
The <article> element specifies independent, self-contained content. For example, blog post or news article. Whereas a section can contain any content that can be grouped thematically, an article must be a single piece of content that can stand on its own. Just like section elements, article elements can be nested inside other article elements. You can also nest a section inside an article, and vice versa.
5. aside
The <aside> element defines some content aside from the content that is generally placed in a sidebar. Some possible uses for aside include a sidebar, a secondary lists of links, or a block of advertising.
6. footer
The <footer> element may contain copyright information, lists of related links, author information, and similar content that you normally think of as coming at the end of a block of content.
More HTML5 Semantic Elements
The HTML5 takes the categorization of content a step further. The specification defines a set of more granular content models. These are broad definitions about the kind of content that should be found inside a given element.
- figure, figcaption
- main
- mark
- details, summary
- time
- progress, meter
7. figure, figcaption
The figure and figcaption elements are pair of new HTML5 elements that contribute to the improved semantics in HTML5. The figcaption element is simply a way to mark up a caption for a piece of content that appears inside of a figure.
8. mark
The mark element indicates a part of the document that has been highlighted due to its likely relevance to the user’s current activity. The most common use is in the context of a search, where the keywords that were searched for are highlighted in the results.
9. progress, meter
Two new elements added in HTML5 allow for marking up of data that is being measured or gauged in some way. The progress is used to describe the current status of a changing process that’s headed for completion, regardless of whether the completion state is defined. The traditional download progress bar is a perfect example of progress.
The progress element can have a max attribute to indicate the point at which the task will be complete, and a value attribute to indicate the task’s status. Both of these attributes are optional.
The meter element represents an element whose range is known, meaning it has definite minimum and maximum values. For example, disk usage, or a fraction of a voting population - both of which have a definite maximum value. Therefore, it is likely you wouldn’t use meter to indicate an age, height, or weight, all of which normally have unknown maximum values.
The meter element has six associated attributes. In addition to max and value, it also allows use of min, high, low, and optimum. The min and max attributes reference the lower and upper boundaries of the range, while value indicates the current specified measurement. The high and low attributes indicate thresholds for what is considered "high" or "low" in the context. For example, your grade on a test can range from 0% to 100% (max), but anything below 60% is considered low and anything above 85% is considered high. optimum refers to the ideal value. In the case of a test score, the value of optimum would be 100.
10. time
The time element has been specifically designed to deal with the problem of humans reading dates and times differently from machines. The time element also allows you to express dates and times in whichever format you like while retaining an unambiguous representation of the date and time behind the scenes, in the datetime attribute.
In addition to the datetime attribute, the time element allows use of the pubdate attribute. This is a Boolean attribute, and its existence indicates that the content within the closest ancestor article element was published on the specified date. If there’s no article element, the pubdate attribute would apply to the entire document.
11. details, summary
This new element helps mark up a section of the document that’s hidden, but can be expanded to reveal additional information. The aim of the element is to provide native support for a feature common on the Web - a collapsible box that has a title, and more info or functionality hidden away.
Normally this kind of widget is created using a combination of markup and scripting. The inclusion of it in HTML5 intends to remove the scripting requirements and simplify its implementation.
The contents of the summary element under the details element appear to the user, with the rest of the content hidden. Upon clicking summary, the hidden content appears. If you want the hidden content to be visible by default, you can use the Boolean open attribute. The summary element can only be used as a child of details, and it must be the first child, if used.
Bold Text
There are essentially two ways to make text bold: using the b element, or using the strong element. In HTML5, the b element has been redefined to represent a section of text that is stylistically offset from the normal prose without conveying any extra importance.
The strong element conveys more or less the same meaning. In HTML5, it represents strong importance for its contents.
Small Text
Previously, small was intended to describe text in a small font. In HTML5, it represents side comments such as small print. Some examples where small might be used include information in footer text, fine print, and terms and conditions. The small element should only be used for short runs of text.
The text inside small tags will more than likely still appear in a smaller font than the rest of the document.