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.