Web developers these days are often expected to know and work in multiple languages. As a result, it's tricky to learn everything a language has to offer and easy to find yourself not utilizing the full potential of some more specialized but very useful tags.
Unfortunately, we haven't been tapping into the full potential of these more obscure HTML tags and attributes as of late. But it's never too late to get back into the game and start writing code that taps into the power of some rarely common HTML tags.
Here are some rare and very special HTML tags. While they might be less familiar, they're still quite useful in certain situations.
1. <cite>
All of us will be familiar with the <blockquote> tag, but did you know about <blockquote>'s little brother <cite>? <cite> allows you to define the text inside the element as a reference. Typically, the browser will render the text inside the <cite> tag in italics, but this can be changed with a touch of CSS.
The <cite> tag is really useful for citing bibliographic and other site references. Here's an example of how to use the cite tag in a paragraph:
1 |
<p>David Allen's breakthrough organization book <cite>Getting Things Done</cite> has taken the web by storm.</p> |
2. <optgroup>
The <optgroup> tag is a great way to add a little definition between groups of options inside a select box. This allows the select list to visually separate the items.
If you needed to group movie listings by time, for example, then it would look like this:
3. <acronym>
The <acronym> is one of those cool HTML tags you can use to define or further explain a group of words. When you hover over text that has the <acronym> tag used, a box appears below with the text from the title tag. For example:
1 |
The microblogging site <acronym title="Founded in 2006"> Twitter</acronym> has recently struggled with downtimes. |
4. <address>
The <address> tag is quite a little tag, but that doesn't mean it isn't useful! As the name implies, <address> allows you to semantically mark up addresses in HTML. The nifty little tag will also italicize all of the data within the brackets, though the style can easily be changed through simple CSS.
1 |
<address>Glen Stansberry
|
2 |
1234 Web Dev Lane |
3 |
Anywhere, USA |
4 |
</address>
|
5. <ins> and <del>
If you want to display editing revisions with markup, <ins> and <del> are just the ticket. As the name implies, <ins> highlights what's been added to the document with an underline, and <del> shows what's been taken out with a strikethrough.
1 |
John <del>likes</del> <ins>LOVES</ins> his new iPod. |
6. <label>
Form elements seem the easiest to forget when marking up a document. Of the form elements, one of the most forgotten is the <label> tag. Not only is it a quick way to note the label's text, but the <label> tag can also pass a "for" attribute to specify which element is to be given the label. These <label> tags are great for styling, and they also allow you to make the caption clickable for the associated element.
1 |
<label for="username">Username</label> |
2 |
<input id="username" type="text" /> |
7. <fieldset>
Fieldset is a nifty little attribute that you can add to your forms to logically group form elements. Once applied, the <fieldset> tag draws a box around the elements within the fieldset. Bonus points for adding a <label> tag within the fieldset to define the title of the group.
8. <abbr>
The <abbr> tag is much akin to the <acronym> tag, except the <abbr> tag is only used to define abbreviated words. Just like <acronym>, you define a title within the tag. When a visitor hovers over the abbreviated text, the full definition appears below. The <abbr> tag is rarely used, but the benefits are many for screen readers, spellcheckers, and search engines.
1 |
<abbr title="Sergeant">Sgt.</abbr> Pepper's Lonely Hearts Club is my favorite album. |
9. <wbr>
This not one of those common HTML tags we are all used to. The <wbr> tag is an incredibly obscure tag. To be honest, I doubt many of you have come into contact with the tag, as it's hardly ever used. (Truthfully, I hadn't seen the tag before I started researching this article.) Essentially, the tag allows you to specify a place where you think a line break might be useful, but only if needed. This tag is unique as it relies on the discretion of the browser to insert the line break, if needed. It's perfect for creating layouts that you want to avoid having horizontal scrollbars.
10. <details>
The details tag is used to provide or hide more information about the content on a website. It is used to create an interactive widget that the user can open or close. The content of the details tag is visible when opening the set attributes.
The details element is combined with the <summary> tag to create a headline that can be clicked to open or close the information you wish to learn more about. Go ahead and try this type of special tags in HTML.
11. <mark>
Do you want more HTML special tags? The <mark> tag is used to highlight a text or a piece of information that is very important and needs attention.
1 |
<p>The <mark>mark</mark> tag is used to highlight a text or a piece of information that is very important needs attention</p> |
12. <meter>
This is probably one of those cool HTML tags you'll start using soon. The <meter> tag is used to define a scale for measuring in a specific range and can also handle fractional values. A gauge is another name for it. The interpretation of the <meter> tag can be determined using six different attributes.
-
value: specifies the current measurement value -
min: specifies the lower bound of the range -
max: specifies the upper bound of the range -
low: specifies the range that is a low value -
high: specifies the range that is a high value -
optimum: specifies the best or optimal numeric range
Here's an example of the <meter> tag usage:
13. <progress>
The HTML < progress> tag is used to show how far work has progressed. It makes it simple for web developers to add a progress bar to their website. It could also be used to represent the competence level of a developer's skill on their portfolio website or the progress of a file uploading with the <progress> tag. This may belong to the common HTML tags most people know about, but it deserves a spot on this list.
The max attribute specifies the range of the progress bar.
14. <meta>
The <meta> descriptions and author tags are common HTML tags that are often overlooked by developers when coding. These special tags in HTML are used to specify the description or keywords of the HTML document which helps users find your website or content easily.
1 |
<meta name="keywords" content="managing, Javascript, state "> |
2 |
|
3 |
<meta name="description" content="All about how to manage the state of your application with Javascript"> |
The author <meta> tag is used to specify the author of the document.
1 |
<meta name="author" content="Ezekiel Lawson"> |
15. <q>
One of our last HTML special tags is the <q> element is one of the most used HTML tags to identify quoted text on a web page. This tag gives variety to your website content and is primarily used to indicate brief quotations. That's why we consider it as part of the cool HTML tags you should use on your site.
1 |
<q>Tests are stories we tell the next generation of programmers on a project.</q> |
The <cite> attribute specifies the source of the quotation.
1 |
<p><cite>Roy Osherove</cite> said, <q>Tests are stories we tell the next generation of programmers on a project.</q>.</p> |
16. <base>
For relative links, the HTML base element is used to provide a base URL. You can, for instance, specify the base URL at the top of your page, and then other relative links on the page will use the same URL.
1 |
<base href="https://code.tutsplus.com/" target="_blank"> |
Please note that the <base> tag must be placed between the document's <head> tags, and each document can only have one <base> element. For example:
1 |
<html>
|
2 |
|
3 |
<head>
|
4 |
<title>Base Tag Example</title> |
5 |
<base href="https://code.tutsplus.com/" target="_blank"> |
6 |
|
7 |
</head>
|
8 |
|
9 |
<body>
|
10 |
<p>Understand <a href="articles/data-structures-with-javascript-stack-and-queue--cms-23348">Data Structures</a>.</p> |
11 |
</body>
|
12 |
|
13 |
</html>
|
That's it! Now You Know More HTML Tags and Attributes
That's just a few of the lesser-known and special HTML tags that you might not have known. Maybe you found one that will be useful on your next web project?
This post has been updated with contributions from Ezekiel Lawson and Gonzalo Angulo. Ezekiel is a front-end developer who focuses on writing clean, maintainable code with web technologies like JavaScript, Vue.js, HTML, and CSS. Gonzalo is a staff writer with Envato Tuts+.
