As the HTML specification gets updated year after year, new tags get added and old tags get deprecated. And it's hard to keep up sometimes with the latest changes.
We're all familiar with <div>'s, <p>'s and <img>'a for the most part. And as of late, most of us are probably familiar with the more semantic <main>'s, <section>'s and <footer>'s. But there's more. Alot more.
To help add some more color to your current markup, here are 9 HTML tags that you probably aren't using, but that just maybe, you should start.
9. <small>
The <small> tag allows you to render small-print text onto the page, similar to what you would find in disclosures or legal text.
Here is an example of it's output:
This is normal text
and this is small legal text
And the markup would be the following:
This is normal text
<small>and this is small legal text</small>
It's a bit subtle, but essentially the browser will size the content down by 1 based on the current browser defaults.
It's more semantic and I would imagine that search engines will eventually (if not now) begin to treat this data as less overall relevant to its surrounding context.
8. <datalist>
The <datalist> element is essentially a collection of <option> tags, similar to a <select>, that represents recommended items in another element, such as an input. You can think of it like a dropdown menu with the option to enter free form text.
The way that it works, is that you will essentially link the <datalist> to an <input> textbox for example, in which case the <option> elements would act as a dropdown to the input.
Here's a running example to paint a better picture. Type anything into the following input box and notice the recommended dropdown options.
Taking a look at the markup.
<label for="choice">Choose a programming language:</label>
<input list="languages" id="choice" name="choice" />
<datalist id="languages">
<option value="Chocolate">
<option value="Coconut">
<option value="Mint">
<option value="Strawberry">
<option value="Vanilla">
</datalist>
You can add the list attribute to an input element pointing it to the id of the desired datalist.
In the past, this typically required a heavy amount of JavaScript to implement, so its nice to see the standard finally taking on this task and doing the heavy lifting for us.
7. <mark>
The <mark> tag is used to highlight text on a page. You might see this implemented in search engines, in which the term that is queried is sometimes highlighted within the search results page.
The <mark> tag will typically highlight the inline element that it is surrounding with a highlight text of yellow by default.
Here is a quick example:
Search results for "JavaScript":
JavaScript is a lightweight object oriented scripting language
The phrase vanilla JavaScript is used to refer to writing JavaScript code without the use of external 3rd party libraries or frameworks.
Usage of <mark> is relatively straightforward and is very equivalent to using <strong> or <i>.
The phrase vanilla <mark>JavaScript</mark> is used to refer to writing JavaScript code without the use of external 3rd party libraries or frameworks.
Last note, do not confuse the <mark> tag with the <strong> tag. The <mark> tag denotes that the highlighted area is relevant to the current user. While the <strong> tag represents that the selected text is more important than its surrounding text.
6. <meter>
The <meter> element represents essentially the scalar numeric value in some given range.
You can think of it like a measure of importance almost, as the higher the selected value, the larger the meter bar will become. But also, depending on how close the value is to the "optimum" attribute, it will either be green or red, depicting the level of urgency.
Here is a quick visual representation of a <meter> element on this page with various degrees.
at 50/100
at 50/100
at 50/100
at 50/100
at 50/100
The nifty part here is that the browser will change the color of the meter accordingly depending on the current value that is set. Also note that each browser will have a different graphical representation of this element.
Here is the markup to the first meter shown above.
<meter id="fuel" min="0" max="100" low="33" high="66" optimum="80" value="10">
at 50/100
</meter>
And here is the breakdown of the shown attributes.
min - The minimum allowable value for the meter. If not specified, it is defaulted to 0.
max - The maximum allowable value for the meter. If not specified, it is defaulted to 1.
low - The upper numeric value to be considered on the 'low' end.
high - The lower numeric bound to be considered on the 'high' end.
optimum - The preferred optimal value for this particular meter.
value - The current value set for the meter. Must be between the given min and max attribute set.
Probably not the most commonly used element that you will find. But definitely good to add to your toolkit in case you ever find yourself needing a meter.
5. <picture>
The <picture> element is essentially a more robust and responsive version of the <img> tag that we all know and use.
But it's a bit more involved than the <img> tag which is probably why you don't see it used too often.
Here is a look at the markup for a typical <picture> element.
<picture>
<source srcset='helloworld_a.png' type='image/png' media='(min-width: 600px)'></source>
<source srcset='helloworld_b.jpg' type='image/jpg' media='(min-width: 1200px)'></source>
<img src='helloworld.png' alt='' />
</picture>
Because it's a bit more involved, you can check out the following article to get a more thorough breakdown of the picture tag.
4. <progress>
The <progress> element is essentially what it sounds like. It represents a progress bar with the default browser styling.
Here is what that would look like in your current browser.
And here is a look at the markup needed to make it work.
<label for="file>File progress:</label>
<progress id="file" max="100" value="70"> 70% </progress>
This one is relatively straightforward and does not involve any other attributes to make it function. You essentially set a maximum value range, and then give it a current value.
3. <q>
The <q> tag is simply just a way to denote an inline quote in an element. Most people tend to use the <i> tag in order to style inline text as a quote.
The <q> element however will also include the quotation marks around the quoted string.
Here is a quote for example:
And then they said hello world
And the markup would be the following:
And then they said <q>hello world</q>
The quotation marks included in a <q> tag are not editable and are a graphical element rendered by the browser.
2. <details>
The <details> tag creates a widget that can be toggled on or off in order to show more information to the user.
Click on the following element to expand it.
Details
Something small enough to escape casual notice.
And here is the markup used to generate it.
<details>
<summary>Details</summary>
Something small enough to escape casual notice.
</details>
Note that if the first child element inside of the <details> tag is a <summary> element, that this summary will become the label for the whole element.
I consider this to be one of the more useful elements, as content toggling is a very common UI feature seen throughout most websites.
1. <samp>
The <samp> element, or sample element, is used to style inline content as the output of a computer program.
Here is a representation of what that will look like.
The computer says: Hello World
And the markup for that would be the following:
The computer says: <samp>Hello World</samp>
The browser will render this content with the default monospace font (such as Courier).
While most people wouldn't find this element too useful, I find it to be the most useful as I write these blog articles and attempt to show code and output elements clearly.
And there you have it. 9 elements to add to your toolkit. While some of these aren't the most relevant or potentially useful, it's nice to know that the browser is ready to handle them if the need arises.