loading...

Top 3 HTML elements that we forgot

melnik909 profile image Stas Melnikov ・2 min read

Recently I read the specs and understood that we use a limited set of HTML elements. So I'd to like tell about top 3 elements that we forgot but they are in each projects.

The address element

Often we need to markup a social media block or other contact info in our projects. Usually developers use the following code:

<div class="my-social">
  <ul>
    <li><a href="github.com">Fork me on Github</a></li>
    <li><a href="twitter.com">Follow me on Twitter</a></li>
    <li><a href="linkedin.com">My LinkedIn</a></li>
  </ul>
</div>
Enter fullscreen mode Exit fullscreen mode

But the WHATWG spec contains the special address element for this task.

The address element represents the contact information for its nearest article or body element ancestor. If that is the body element, then the contact information applies to the document as a whole.

So the following code is more correct:

<address class="my-social">
  <ul>
    <li><a href="github.com">Fork me on Github</a></li>
    <li><a href="twitter.com">Follow me on Twitter</a></li>
    <li><a href="linkedin.com">My LinkedIn</a></li>
  </ul>
</address>
Enter fullscreen mode Exit fullscreen mode

The ol element

We have to use lists to markup navigation elements such as breadcrumb, pagination, etc. It's required because we can help screen readers will voice the number of elements in the navigation.

<nav class="breadcrumb">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Design Patterns</a></li>
    <li><a href="#">Breadcrumb Pattern</a></li>
  </ul>
</nav>
Enter fullscreen mode Exit fullscreen mode

Usually we use the ul element. But the spec contains more appropriate element and this element is the ol element. The WHATWG spec tells:

The ol element represents a list of items, where the items have been intentionally ordered, such that changing the order would change the meaning of the document.

If we will change the order of elements in the breadcrumb navigation then we change the meaning of the website. So the following code is more correct:

<nav class="breadcrumb">
  <ol>
    <li><a href="#">Home</a></li>
    <li><a href="#">Design Patterns</a></li>
    <li><a href="#">Breadcrumb Pattern</a></li>
  </ol>
</nav>
Enter fullscreen mode Exit fullscreen mode

The time element

We use the span element to markup dates of different publications.

<span>October 5</span>
<span>two days ago</span>
<span>a Saturday</span>
Enter fullscreen mode Exit fullscreen mode

But the WHATWG spec contains the time element that we can use for it. This is what the WHATWG spec tells:

The time element represents its contents, along with a machine-readable form of those contents in the datetime attribute. The kind of content is limited to various kinds of dates, times, time-zone offsets, and durations.

So we should use the time elements to markup dates.

<time datetime="2019-10-05">October 5</time>
<time datetime="2019-01-29">two days ago</time>
<time datetime="2019-09-23">a Saturday</time>
Enter fullscreen mode Exit fullscreen mode

Web-standards

P.S: I share tips, ideas, examples of my private projects on my Patreon profile. Are you interested? Join to us! 👉 https://www.patreon.com/melnik909

Discussion

pic
Editor guide
Collapse
jonas_dw profile image
Jonas De Wever

Sorry to bother, but shouldn't your code for the <time> element be something like this?:

<time datetime="2019-10-05">October 5</time>
<time datetime="2019-01-29">two days ago</time>
<time datetime="2019-09-23">a Saturday</time>

Changed datatime to datetime

Nice post btw! Really forgot about those elements.

Collapse
melnik909 profile image
Stas Melnikov Author

Thank you! I fixed it

Collapse
np_prodsr profile image
Prod Juan

Feedback

Great article! I learned something (e.g. <time> tag) from this!

Observation

Also, a question of vernacular:
Aren't "elements" the result of applying a given (HTML) "tag" to an area of the page? So headings in this article might rather be "The address tag", "The ol tag", and "The time tag".

Background

Looking at this from a JavaScript perspective, I'd use

  • document.getElementById() to access a created element based on its id attribute, and
  • document.getElementsByTagName() to access any elements based on the tag itself

(my 2.5 cents)

Collapse
melnik909 profile image
Stas Melnikov Author

Thank you for your tip. I use words by basing on specs. So I write like this

Collapse
tatislois profile image
Lois Tatis

Great post! These small gems are always helpful