Press "Enter" to skip to content

HTML5: Learn to Code with Semantic Elements

In this tutorial, you’ll learn how to code HTML5 semantic elements for structuring a page.

HTML5 Semantic Elements

ElementDescription
hgroupTwo or more headings that form a composite heading.
timeA date or date and time that can be parsed by a browser.
figureAn illustration, diagram, photo, code listing or the like that is referred to from the main content of the document.
figcaptionThe caption that identifies a figure.

Attributes of the Time Element

AttributeDescription
datetimeA date and time in a standard format that can be parsed by a browser.
pubdateA 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.

See also: