8 HTML Elements You’re Not Using (and Should Be)
In today’s web, the word semantic gets thrown around a lot. But what does semantic mean? Why is it important?
Semantic HTML expresses the meaning of the document. It’s less about how the text looks and more about what it is. Good semantic markup helps both people and machines understand the content and its context.
Semantic markup is much more accessible and easier for screen readers to interpret. It’s SEO friendly. It works better with modern browsers. It reduces the amount of code needed to express the content and increases the clarity of the code for other people that have to read it.
Okay, so semantic content is great, but how do you use it? One of the best ways to start writing better markup is to replace generic tags with more expressive elements. Let’s take a look at eight that you can use to step up your game.
<q>
Like it’s blockier cousin <blockquote>, the <q> tag is used for quoted text.
Why not just use quotation marks? Quotation marks don’t always imply a quote. Sometimes they’re used for emphasis, irony, or to identify the name of something. In those cases, using quotation marks directly in the content is perfectly valid. However, if you’re quoting someone, <q> explicitly shows your meaning.
<i> and <b>
Back in the good old days, <i> and <b> were used to identify italic and bold text. When the idea of separating semantic content from presentation started to gain traction, using <i> and <b> became frowned upon because they represented how the text was displayed, instead of what it meant. They were replaced by <em> and <strong>, which indicates emphasized and strongly emphasized text.
With HTML5, <i> and <b> now have shiny new semantic meanings. The <i> tag is used for text that is in a separate tone or mood. This is useful for things like thoughts and technical terms. The <b> tag identifies text that is stylistically different than normal text, but doesn’t have any semantically different meaning. How is this different than using <span>? The key is that <b> communicates a lack of semantic meaning.
<abbr>
<abbr>‘s are used for abbreviations! This can be really handy in documents with several short abbreviations. <abbr>‘s have an optional title attribute that contains the unabbreviated version of the text.
<abbr title="laugh out loud">lol</abbr>
<abbr title="I don't know">idk</abbr>
<abbr title="got to go">g2g</abbr>
<abbr title="talk to you later">ttyl</abbr><time>
Let’s take a look at a classic localization problem: dates. In the United States, October 5th, 2013 is represented by 10/05/13. In the United Kingdom, it’s 05/10/13. In the Netherlands, October 5th would be written 05-10-13; in South Africa it would be 2013/10/05 and in Russia it’s 05.10.13. With all of these possibilities, it’s difficult for a machine to correctly read dates in all of these locales.
The <time> tag allows you to represent time and dates in a machine-readable format. The above example could be written as <time datetime="2013-10-05">10/05/13</time>. A HTML parser can use this to determine the exact time we meant, regardless of how it is formatted. The <time> tag also allows an optional 24-hour formatted time to be appended to the date: <time datetime="2013-10-05 22:00">10/05/13 at 10 PM</time>;
<mark>
Ever do something like this?
<p>
Three hundred pages of boring, useless text. <span class="highlight">The one thing you need to know and will never be able to find again if you don't highlight it.</span> More boring stuff…
</p>Well, now you don’t need to. HTML5 introduced the <mark> element, which represents highlighted text that is, text that’s marked for referential purposes due to its relevance in another context.
<input>
Yes, <input>. You’ve probably used <input type="text">, <input type="submit"> and maybe even <input type="hidden"> at some point, but have you used any of the other types? With HTML5, <input>‘s can now be used with a range of types, including:
emailtelnumberrangedatetimesearchcolor
These are great, but make sure they meet your browser requirements before you use them. Some types still aren’t supported by all major browsers.
<menu>
Have you ever marked up a menu with an unordered list?
<ul class="menu-toolbar">
<li class="new">New</li>
<li class="open">Open</li>
<li class="save">Save</li>
<li class="quit">Quit</li>
</ul>Well stop! menu is designed for this purpose. The <menu> element represents an unordered list of commands. It has a type attribute, which can be set to popup or toolbar.
<menu type="toolbar">
<li class="new">New</li>
<li class="open">Open</li>
<li class="save">Save</li>
<li class="quit">Quit</li>
</menu>Bonus
Most front end developers have used when writing HTML, but many don’t know the real meaning of the character. A non-breaking space will not break on a new line. This means that if you have two words separated by a non-breaking space, then both words will stick together at the end of a sentence. This is handy when breaking the words might be disruptive. Some great examples are:
- Units: 12 m/s
- Time: 8 PM
- Proper nouns: Dairy Queen
Also, be sure to check out the non-breaking hyphen (‑), which lets you use a hyphen character that won’t break.
Wrapping up
HTML is growing more semantic by the day. Using these elements is a great start to writing cleaner, more accessible markup. For a more complete look at all of the available options, check out the Periodic Table of the Elements, the Mozilla Developer Network documentation or, if you’re feeling bold, the W3C’s HTML specification. Have fun!
