In this tutorial, you'll learn how to code HTML5 semantic elements for structuring a page.
HTML5 Semantic Elements
Element | Description |
---|---|
hgroup | Two or more headings that form a composite heading. |
time | A date or date and time that can be parsed by a browser. |
figure | An illustration, diagram, photo, code listing or the like that is referred to from the main content of the document. |
figcaption | The caption that identifies a figure. |
Attributes of the Time Element
Attribute | Description |
---|---|
datetime | A date and time in a standard format that can be parsed by a browser. |
pubdate | A Boolean attribute that indicates that the date is the publication date for the article that contains the time element. |
Notes on HTML5 Semantic Elements
- Use the HTML5 semantic elements to indicate the structure of your pages.
- Although there are other HTML5 semantic elements, these are the most useful ones that are currently supported by modern browsers.
Example
<html lang="en"> <head> <style> body { background-color: #fff200; } </style> </head> <body> <h1>HTML Semantic Elements</h1> <h4>hgroup Example</h4> <hgroup> <h2>This is a heading 2.</h2> <h3>This is a heading 3.</h3> </hgroup> <h4>time Example</h4> <p>Next year the meeting will be on <time datetime="2020-09-23">Sep 23rd</time>.</p> <h4>figure and figcaption Example</h4> <figure> <code> var today = new Date();<br> document.writeln( today.getFullYear() ); <br><br> </code> <figcaption> JavaScript code for getting the year. </figcaption> </figure> </body> </html>
Output
The output would be as shown in the featured image of this article.