Words are important. They have meaning, and putting certain words side-by-side allows us to convey information to others. The same is true of punctuation. A sentence that is well-punctuated is much easier to understand than one without punctuation.
I’ve become interested in grammar and punctuation — what might loosely be termed “semantics.” As a frontend developer, I’ve been as interested in the punctuation of the web — namely, using the correct tags to mark up pages — as I have been of the display of information.
Our web pages are documents. They contain one main title, represented by an h1 element. If they have sections within them, each will have an h2 element, and if any of these sections has a further subsection, these subsections will each be titled by an h3 element.
If we are looking at the main navigation of the website, we expect a ul to be placed inside a nav element. A sidebar will probably be inside an aside element (though not everyone agrees this is currently the best element to use).
We all know these general web semantics. However, there are many HTML elements available to us to mark up our web pages, and it will do us all a great service to know about them. You can find a complete list of HTML elements on the Mozilla MDN Web Docs.
Why should you know about these tags? If you care about accessibility (you do!), you will want your page to be as understandable as possible to as many users as possible. If you care about SEO, you’ll want to make sure bots can understand, index, and return your content in search engine results, but also in social media posts (such as Twitter cards).
Basically, having a “semantic web[site]” means a website where, as Tim Berner Lees says, “information is given well-defined meaning, better enabling computers and people to work in cooperation.”
Let’s have a look at some of the lesser-used elements, which will help us to make a more semantic web.
<address> HTML tagYou could be forgiven for thinking the <address> element is only used for adding an address to a website. It can used for this purpose, but more specifically it’s used to provide “contact information” for the nearest parent <article> or nearest parent body element. (I often think it should have been called the <contact> element.) Let’s see some examples:
Providing contact information for the author of a blog post. Make sure you place this inside your <article> element.
<address> Mark Conroy can be contacted at <a href="https://mark.ie/contact">his personal website</a>.<br> On social media you can contact him via <a href="https://twitter.com/markconroy">Twitter</a> and <a href="https://www.linkedin.com/in/conroymark/">LinkedIn</a>. </address>
You can include your businesses contact info in the footer of your website:
<body>
<header>
Logo, Menu, Search, etc.
<header>
<main>
The main body
</main>
<footer>
<div>
Probably some newsletter signup form,
and links to cookies and privacy policies
</div>
<address>
Our Great Company<br>
123 Main Street<br>
New York.
</address>
</footer>
</body>
The <address> element can be great for helping people find your location, phone number, etc., on search engine results pages. Ignore it at your peril.
<time> for durationThe <time> element is used to denote a specific time or duration. An example of when it might be used is the date of a blog posting, like so:
<div>Published: <time>June 23, 2021 </time></div>
That’s a basic example of using the time element. It is usually used with a datatime attribute, which will be easily read by machines. You can use any machine-readable format for this attribute, such as a Unix timestamp.
<time datetime="1625572800">June 23, 2021 </time>
You can also use the time element to describe duration, such as how long it might take to read the blog post.
<time datetime="PT7M">7m</time><span>Reading time</span>
You can then use the time element in several ways to make it clear to machines what you mean. Let’s pretend there is a frontend conference coming up:
<p>LogRocketBlogConf will take place on <time datetime="2018-08-01">August 1</time> all fully online.</p> <p>Talks will start at <time datetime="09:00">09:00</time> and every hour thereafter until <time datetime="17:00">17:30</time> giving you <time datetime="PT8H30M">8h 30m</time> of pure frontend bliss.</p>
Learn more →<abbr> for abbreviationsThe <abbr> element helps let machines know that the item you are talking about is an abbreviation for something else, but even more so for an audience that may not be fully familiar with the acronyms of your industry.
If the abbreviation is well-known, e.g., NASA or USA, then you don’t need to put it in an <abbr> tag. But if it’s not, this tag is your best friend. What’s even better is that it also has an optional title attribute, which you can use to give the full rendering of your phrase.
<p>I'm tired arguing about whether <abbr title="Hypertext Markup Language">HTML</abbr> and <abbr title="Cascading Style Sheets">CSS</abbr> are programming languages. Let's move on from that.</p>
It’s also perfectly fine to place the full text inline. In this case, you can leave off the title attribute, like so:
<p>JavaScript (<abbr>JS</abbr>) is the programming language of the web.</p>
<data> HTML tagThe <data> element creates a machine-readable relationship (or “translation,” as it is called on MDN) for a specific piece of content. For example, if you own a t-shirt store and you sell a t-shirt in three colors and three sizes, that’s nine variations.
Each of these variations will have an individual SKU or product ID. You can represent unique identifiers with the data element (not data attribute), like so:
<ul> <li><data value="lr-gr-sm">Log Rocket T-shirt: Green, Small</data></li> <li><data value="lr-gr-med">Log Rocket T-shirt: Green, Medium</data></li> <li><data value="lr-gr-lrg">Log Rocket T-shirt: Green, Large</data></li> <li><data value="lr-bl-sm">Log Rocket T-shirt: Blue, Small</data></li> <li><data value="lr-bl-med">Log Rocket T-shirt: Blue, Medium</data></li> <li><data value="lr-bl-lrg">Log Rocket T-shirt: Blue, Large</data></li> <li><data value="lr-rd-sm">Log Rocket T-shirt: Red, Small</data></li> <li><data value="lr-rd-med">Log Rocket T-shirt: Red, Medium</data></li> <li><data value="lr-rd-lrg">Log Rocket T-shirt: Red, Large</data></li> </ul>
<mark> for highlightingThe <mark> tag is used to highlight text. It’s different from using italics or bold in that the text that’s marked by this tag is not done so by the original author. You can think of it as using a highlighter to highlight text in a book you are reading.
The original author of the book does not do this. Instead, you do so because there is something about that text that you specifically want to highlight for yourself.
I find it helpful when creating web pages and need to remember to add something to a page, so I don’t forget later (it’s not exactly how it is intended, since I am the author, but it’s very handy). Often when writing a blog post, I might have something like this:
See the Pen
Log Rocket Blog Sample – mark element by Mark Conroy (@markconroy)
on CodePen.
An example of using the <mark> tag can often be seen in search results pages where the phrase that you searched for is highlighted by the search engine, not the original author. The highlighted text in this case is important only in this search context.
See the Pen
Log Rocket Blog Sample – mark element 2 by Mark Conroy (@markconroy)
on CodePen.
<bdo> and <bdi> for bi-directional textUse the <bdo> tag when you want to have bi-directional text in your document. This is handy if you are writing in a left-to-right language, but you need to quote from another language that is a right-to-left language (such as Arabic).
See the Pen
Log Rocket Blog Sample – bdo by Mark Conroy (@markconroy)
on CodePen.
There is a corresponding tag to the <bdo> tag called <bdi>. This tag is for bi-directional content that should be considered in isolation from the text surrounding it. Use <bdi> if you are dynamically injecting text into your document but do not know what language the text being injected in will be.
<wbr> for word breaksHave you ever had a long string of text that causes horizontal scroll, such as a long URL that won’t fit on one line? Well, the <wbr> tag is your friend here. This tag suggests an appropriate place to have a word break.
So, if you have a URL like https://example.com/this/is/a/long/url that’s not going to fit on one line (on a phone, for example), you can suggest to the browser to split the word at certain points.
You can do this like so: https://example.com/<wbr>this/is/a/long/url. Now, if you resize your page, that string of text will break after https://example.com/.
<i> as idiomatic textI have a feeling you might be using the <i> element. But I also have a feeling you are using it for icons like this: <i class="fa fa-facebook"></i> rather than as a manner to make text italic. You use this in situations such as when you want to give the name of a book you have read.
<p>I enjoy <i>One Hundred Years of Solitude</i> by Gabriel Garcia Marquez.</p>, which will render like this: I enjoy reading One Hundred Years of Solitude by Gabriel Garcia Marquez. Let’s try to use this element correctly, so screen readers can understand us, rather than allowing people to hijack our semantics for their own uses.
That’s a quick roundup of some HTML elements that I think could be much more widely used, and would make for a more semantic web, better accessibility, and improve SEO. I’d highly encourage you to have a look at all the available elements on the MDN docs website to become more familiar with what is available.
Install LogRocket via npm or script tag. LogRocket.init() must be called client-side, not
server-side
$ npm i --save logrocket
// Code:
import LogRocket from 'logrocket';
LogRocket.init('app/id');
// Add to your HTML:
<script src="https://cdn.lr-ingest.com/LogRocket.min.js"></script>
<script>window.LogRocket && window.LogRocket.init('app/id');</script>
Hey there, want to help make our blog better?
Join LogRocket’s Content Advisory Board. You’ll help inform the type of content we create and get access to exclusive meetups, social accreditation, and swag.
Sign up now
Build scalable admin dashboards with Filament and Laravel using Form Builder, Notifications, and Actions for clean, interactive panels.
Break down the parts of a URL and explore APIs for working with them in JavaScript, parsing them, building query strings, checking their validity, etc.
In this guide, explore lazy loading and error loading as two techniques for fetching data in React apps.
Deno is a popular JavaScript runtime, and it recently launched version 2.0 with several new features, bug fixes, and improvements […]
