Semantic HTML - Misc

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>.

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>

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.

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.

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.

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>

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> &bullet; Last updated: <time>24 Oct, 23</time></p>
</header>

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.

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> &bullet; Last updated: <time datetime="2023-10-24">24 Oct, 23</time></p>
</header>

Simple, isn't this?

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>

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>

And with this, we successfully complete this fairly long trek of learning semantic HTML.