Write better HTML in 2021: the tips and tags you didn’t know you wanted
This is part of a series about HTML and the early web, specifically a sequel of an article about deprecated and changed tags.
All developers know HTML, even when they’re not dealing with Front-end coding. Many of those developers deal with it very frequently and some of them also know that it was initially a medium for text only (or, rather, hypertext), then for some brief period it was also put in charge of layout and even some functionality (for which it did an awful job, as it was never designed to do it) and then, finally free of those unwanted chains by the grace of CSS and JavaScript, when it was free to shine on its dear content, people simply stopped caring about it, other than a few strange people that dug deep into peculiarities of search engines.
Chances are, Front-end developers are mostly probably writing HTML code that is akin to a wave of divs and spans. HTML has so much more to offer, and by using those extra assets one can benefit in multiple ways:
- Search Engine Optimisation (SEO), of course;
- Template structures are more identifiable and therefore more readable;
- Accessibility: screen readers may benefit from it;
- Some tags and attributes may bring implemented features unknown to a developer, that may implement those same features using CSS or JavaScript.
By the way, both div and span were created to be support tags for layout, deemed necessary even though layout was taken off of HTML’s concerns at some point, which reflects a problem on the integration between HTML and CSS designs. Regardless, they have no relevant semantic meaning at all so we should go for something else if at all possible. Even if this is not possible, we can make divs and spans better, using attributes like role for example.
Situational use for many different tags
To better explore what we can achieve better with the HTML of 2021 (that is unlikely to change vastly over the years anyway) I will make a list of desired outcomes and their possible implementation within the scope of HTML.
Tags that only aggregate semantic meaning
Bear in mind that those tags, unless specified otherwise, do not offer specific style solutions other than sometimes putting text in italics, so you have to mind the styles (and functionality) on your own.
First of all, let’s take a look on a sample semantic page structure that could be used (This is just a suggestion, in fact there’s no strict way to use most of these tags below, as they’re mostly informational):
<header>...</header>
<main>
<nav>...</nav>
<h1>...</h1>
<section>
<article>...</article>
<article>...</article>
</section>
<section>
<article>...</article>
<article>...</article>
</section>
<aside>...</aside>
</main>
<footer>...</footer>Text with different importance levels emphasized
(on a scale of importance/emphasis: small → normal text → em→ strong)
It is <em>relevant</em>, but this is <strong>much more</strong>.
This is rather <small>unimportant</small>, thoughText corrected or revised:
(del is the old text, that was replaced by the new one in ins)
In the end, I was <del>wrong</del><ins>right</ins>Contact information for someone or a company:
(Many kinds of data can come here like e-mail, addresses and phones)
<address>
E-mail: <a href="mailto:me@mail.me">me@mail.me</a>
Carrot Street, 42 - 01010 My City
</address>Time or durations
(it is recommended to use the time tag with a human-readable time as its content and a machine-readable time in the datetime attribute)
Published: <time datetime="2020-12-20T20:00:00">Dec. 20th</time>Quotes or references:
(blockquote is the tag for, not surprisingly, block quotations, while q is the tag for inline quotations. The cite tag may be used to further explore the source of the quote, which the cite attribute can also be used for. Tip: the tag q usually puts automatically quotes around its inner text)
My uncle said, <q cite="https://myuncle.org/famous-quotes">That's life, kid</q><blockquote>
<p>That's life, kids. Roll with it.</p>
<cite>
<a href="https://myuncle.org/famous-quotes">Famous quotes</a>, by my uncle
</cite>
</blockquote>
Text in languages with different directions on the same place:
(one can use bdo or the dir="ltr|rtl" attribute when the direction of the text is known or bdo or dir="auto" when the direction is not known)
Text in arabic: <bdo dir="rtl">...</bdo>Keyboard input and computer outputs
(samp is a tag to show, basically, automated computer outputs)
When things seem bleak, just press <kbd>Alt</kbd> + <kbd>F4</kbd>
The computer will not say <samp>Access denied</samp> anymore, yay!Mark or highlight a piece of text for reference
This is very important and should be <mark>marked</mark>A result from a calculation inside a form
<form ...>
Enter age: <input type="range" min="0" value="27">
<output>You are good to go!</output>
</form>A list of definitions or a single definition
(dl is a definition list, dt is the definition title, dd is the description for it. When a single definition is desired, the tag dfn can mark a definition term that is explained within the parent’s context)
<dl>
<dt>Mario</dt>
<dd>An Italian plumber that wears red.</dd> <dt>Luigi</dt>
<dd>An Italian plumber that wears green.</dd>
</dl><p><dfn>Mario</dfn> is an Italian plumber that wears red</p>
Data inside a page that is not relevant to the page user
(both a data tag or data-* attributes can be used for that, but the former is preferred if there’s no semantic use in having a new tag. The tag would be very useful on JQuery days, but now it is a bit less mainstream)
<data value="user-123">Bob</data> and
<data value="user-456">Jim</data>Tags that aggregate some functionality and semantic meaning
Think about img as a tag: it has functionality, but only the one necessary for the content to be output. Those below are tags that behave similarly.
A quick expandable element
(Additionally as to being an expandable element — whose state can be detected in JS by the way — details it also is a semantic tag, destined to be used on, you guessed it, details that are not so relevant)
<details>
<summary>Working hours</summary>
Monday to Friday, 8:00 AM to 6:00 PM
</details>An image, but with caption and a wrapper
<figure>
<img src="cow.jpg" alt="A cow">
<figcaption>A cow in the pasture</figcaption>
</figure>An image, but with alternatives
(IE doesn’t support picture and source, but it will fall back to the img there. Also, you can use srcset on img tag too. See an external article for more info)
<picture>
<source srcset="cow-3x.jpg 3x, cow-2x.jpg 2x">
<source srcset="cow-print.jpg" media="print">
<img src="cow-1x.jpg" alt="A cow">
</picture>Ruby (small annotation text) for Japanese texts
(ruby is the wrapping tag, rp is a fallback for non-supporting browsers and rt is for the annotation)
<ruby>
漢 <rp>(</rp><rt>kan</rt><rp>)</rp>
字 <rp>(</rp><rt>ji</rt><rp>)</rp>
</ruby>A quick meter or a quick progress bar
(meter’s current implementation in browser automatically colours the bar given the value, red for low, green for “optimum” values and yellow for the in-betweens. For both meter and progress, especially the former, browsers’ implementations vary visually and CSS not always can control every single aspect of those elements, so one should be cautious about implementing this on an actual production environment)
<meter low="3" high="7" max="10" value="5">5</meter>
<progress max="100" value="50">50%</progress>Finally for here, I thought about including the dialog tag but its compatibility is rather poor (no Firefox nor Safari so far) so not yet.
Tags that aggregate only functionality
I know, I know, HTML is not the place for functionality. Sometimes, though, some tags can fit as either shortcuts for frequently coded features or even for new behaviour on the web.
A list of suggestions to a text input
(the datalist tag attaches to an input via the list parameter. Note that it differs from a select, as it can still be filled with any text other than the ones on the list)
<input type="text" name="shopping-item" list="common-groceries">
<datalist id="common-groceries">
<option value="Eggs">
<option value="Cucumber">
<option value="Peanuts">
<option value="Vodka">
</datalist>A “closed glass window” to another page
(Portal is just like an iframe, but without actually allowing the user to access the inner page)
<portal src="https://example.com/"></portal>So, there are a lot of things going on and those were a lot of information on something apparently so secondary as HTML. Hope you not only enjoyed it, but also that you use the info here to make your code better. There will be just one more article on this series coming ahead, this time a shorter one, with some advanced tips. Till then!
