Semantic HTML - Misc
Learning outcomes:
- Group of headings (
<hgroup>
) - Date, time, and duration (
<time>
) - Contact address (
<address>
)
Introduction
So in the previous chapters, we covered a great deal of information regarding some of the most common semantic elements in HTML. In particular, we started off with <header>
and <footer>
, followed by <aside>
, followed by <article>
and <section>
, and finally ending with <main>
and <nav>
.
This series of five chapters almost covered 80% of those semantic elements that HTML developers don't usually know how to use properly.
Now, in this chapter, we'll be considering some less detailed and less complex semantic elements in HTML that don't really necessitate a separate chapter individually, unlike what we've been doing thus far in the preceding chapters.
The elements discovered here couldn't be categorized under one roof, hence, we've termed the chapter as 'misc' for 'miscellaneous'. That is, we'll be going over a diverse set of three semantic elements: <hgroup>
, <time>
, and <address>
.
Group of headings via <hgroup>
Let's start with the controversy in the party — <hgroup>
.
For quite some time, <hgroup>
was discontinued from the HTML standard, but then brought again for some reason which is...well...not really known.
We're discussing <hgroup>
here purely for the sake of completion, as we want to talk about all elements in HTML that are currently listed in the HTML standard and describe the purpose behind each one so that you feel extremely confident with your HTML skills, more than anyone else.
So what exactly is <hgroup>
?
The <hgroup>
element is used to define a group of headings (i.e. the main headline, with subheadings, tag lines, etc.).
As per the current standard, an <hgroup>
element can only contain <h1>
-<h6>
and <p>
in it; nothing else.
Let's take a simple example.
In the following code, the <hgroup>
element is used to encapsulate the main <h1>
heading along with a subheading of a dummy 'Learning HTML' article:
<hgroup>
<h1>Learning HTML</h1>
<p>The core of the web</p>
</hgroup>
The core of the web
Just as a side note, if we wish to add a table of contents section here, it won't go inside the <hgroup>
element but rather outside it.
<hgroup>
can only contain <h1>
-<h6>
and <p>
.Honestly speaking, <hgroup>
is NOT a frequently used element on websites out there, so just try learning it for the sake of completion. But in case if you ever encounter a site's HTML with <hgroup>
in it, you'd already know what the element means.
Date, time, and duration via <time>
Time is money, right?And time flows like a river, right?
Well, time is also a perfect candidate for the <time>
element in HTML.
The <time>
element is used to represent any kind of temporal information in HTML. Temporal information basically refers to any reference to a date, or time, or even a duration.
As you can probably guess, <time>
has an exceptional number of applications in HTML. Almost every other website or web app needs to represent a date or a time at one point or another.
For example,
- the date a blog post was published,
- the time at which a customer support agent last messaged,
- the date a file was created,
- the approximate reading duration of an article,
- ...and so on,
all these are instances where the <time>
element fits perfectly.
The datetime
attribute of the <time>
element is really important in this regard.
Where <time>
's content is used to showcase a human-readable representation of a temporal value, its datetime
attribute is used to define the corresponding machine-readable representation, governed by international, standard formats.
Whenever we're working with <time>
, it's considered a really good practice to specify the corresponding datetime
value so that machines parsing our code can better make sense of the time.
datetime
sure is desirable on all <time>
elements, HTML parsing engines are really smart these days, for they can correctly infer a machine-readable temporal value out of an ill-formed, human-readable temporal value. But again, use datetime
whenever possible.Let's consider some examples.
In the following code, we extend our dummy 'Learning HTML' document (replacing <hgroup>
with <header>
) with a mention of approximately how long would it take for a person to complete reading the entire document:
<header>
<h1>Learning HTML</h1>
<p class="sub-heading">The core of the web</p>
<p><time>30 mins</time></p>
</header>
The core of the web
As you can see, here we've used <time>
to represent a time duration, i.e. 30 mins.
We can also specify the date at which we last updated the document, again leveraging <time>
:
<header>
<h1>Learning HTML</h1>
<p class="sub-heading">The core of the web</p>
<p><time>30 mins</time> • Last updated: <time>24 Oct, 23</time></p>
</header>
The core of the web
• Last updated:
Both these examples are fine, albeit they don't contain the recommended datetime
attribute. Let's go on and add it to both of the examples.
First to the first example:
<header>
<h1>Learning HTML</h1>
<p class="sub-heading">The core of the web</p>
<p><time datetime="PT30M">30 mins</time></p>
</header>
PT30M
means a time period, with its time segment defining 30 mins.
The core of the web
And now to the second one:
<header>
<h1>Learning HTML</h1>
<p class="sub-heading">The core of the web</p>
<p><time datetime="PT30M">30 mins</time> • Last updated: <time datetime="2023-10-24">24 Oct, 23</time></p>
</header>
The core of the web
• Last updated:
Simple, isn't this?
Contact address via <address>
Where is the office of that company located?Or maybe, where can I find the HQ building of this brand? These are questions that require postal addresses to be given in HTML, which can easily be done using <p>
.
But when we talk about an email address or any other web address to contact an entity or person, we have the provision of a dedicated element to do so — <address>
.
The <address>
HTML element is used to represent a section of contact addresses.
Note that <address>
doesn't itself mark up the email address (or other web address); instead, it's a section wherein we put the email address(es) inside another element (usually <a>
).
Typically, <address>
goes inside <footer>
. However, there's nothing that strictly mandates this.
Anyways, it's example time.
In the following code, we add some email contact information in the footer of a webpage, making the email address a link, leveraging the mailto
URI scheme:
<footer>
<address>
<p>Contact us at <a href="mailto:support@example.com">support@example.com</a>.</p>
</address>
</footer>
Contact us at support@example.com.
Whenever specifying email addresses on the web, it's a good practice to turn the email addresses into links pointing to mailto
URLs.
That's because browsers are configured to directly open the system's default email messaging app when a mailto
link is navigated to, for the user to quickly start writing his/her message to be dispatched to the given email recipient.
Keep in mind that <address>
must only contain contact information related to email addresses or web addresses, NOT anything else.
For instance, the following is an invalid usage of <address>
:
<footer>
<address>
<p>Contact us at: 111-some-phone-number.</p>
</address>
</footer>
Contact us at: 111-some-phone-number.
And with this, we successfully complete this fairly long trek of learning semantic HTML.
Spread the word
Think that the content was awesome? Share it with your friends!
Join the community
Can't understand something related to the content? Get help from the community.