Little-known HTML Elements (and What They're Used For)

One of the reasons why I love writing articles for this blog is that I’m continually discovering and learning new things through that process. It just goes to show that no matter how long you’ve been in a certain field or line of work, there’s always the opportunity to expand your depth of knowledge in that field.

Some of these HTML elements listed below I haven’t even heard of before recently, so they are “little-known” to at least me. Other elements in this article I rarely use, but would like to start incorporating more into my everyday writing and coding activities.

Note: some of the following HTML elements might not be totally ADA compliant or compatible with screen readers. Consequently, they should be used sparingly and/or have extra code added to aid in supporting accessibility measures.

<abbr>

First up on this list is one of the elements from HTML 4 that I have heard of but don’t recall ever using. However, I can see how using <abbr> could really come in handy. Use abbr along with it’s partner html attribute title, to indicate the longer (spelled-out) definition of an abbreviation or acronym. When hovered over, any text inside the two abbr tags will display a little informational popup window. This helps your writing to flow better and not get bogged down by constantly having to write out names or definitions in their full form.

The abbr element is also sometimes partnered with the dfn element.

Here is how these tags appear in code form:
A common acronym in the web development world (and elsewhere) is “<abbr title=”What You See Is What You Get”>WYSIWYG</abbr>,” which is often used to refer to a type of HTML Editor.

This is the browser output:
A common acronym in the web development world (and elsewhere) is “WYSIWYG,” which is often used to refer to a type of HTML Editor.

<acronym>

<acronym> is one of those old and rusty HTML 4 elements that isn’t actually supposed to be used any longer. Use the above <abbr> element instead (even though “abbr” is also from HTML 4, but is still in use, unlike the poor old acronym element.)

Here is how these tags appear in code form (basically the same setup as “abbr”):
A common acronym in the web development world (and elsewhere) is “<acronym title=”What You See Is What You Get”>WYSIWYG</acronym>,” which is often used to refer to a type of HTML Editor.

This is the browser output (may not render in certain browsers):
A common acronym in the web development world (and elsewhere) is “WYSIWYG,” which is often used to refer to a type of HTML Editor.

<bdi>

Speaking of acronyms, the acronym (and html tag) “bdi” stands for bi-directional isolation. BDI has to do with the direction that the viewer will be reading text, and how the browser interprets that and knows what to do. The browser will know to do something a bit different with text that has <bdi> tags wrapped around it.

It’s a little confusing and difficult to explain (and I hurt my brain just a little bit trying to wrap my head around it). Therefore, I’ll let the MDN explain it a lot better than I can in this article. (see what I did there with the “abbr” tag?!)

<bdo>

This element is very similar to the bdi element. Essentially, using the <bdo> element tells the browser to turn some text around and start heading it the other way.

<big>

The <big> element is another one of those old and outdated ones from HTML 4. Back in the ancient times when the internet and HTML was new, people used big for making their text a larger size. Nowadays developers and web designers need to use CSS to style their text.

<cite>

This element is often used to display and give reference to (or “cite”) the title of a book, movie, image, poem, or some other form of creative output. To use this element in the “proper” way, wrap an opening and closing cite tag around the title of the work only and not the author or other information. Whatever is written between the two “cite” tags will appear italicized in most modern browsers.

Here is how these tags appear in code form:
<cite>The “Create With Code Dragon” mascot; illustration by Shannon Bronson.</cite>

In the below example I used it to cite the artist who created an illustration (one of my kids!).

This is the browser output:

The “Create With Code Dragon” mascot; illustration by Shannon Bronson.

<del>

<del> is more of a proofreading-type of element and is used for showing where you deleted text on a webpage. It can (but doesn’t necessarily have to) be paired with the <ins> element. Adding “ins” next to what you’re deleting makes sense, so I would advise using these two elements together. That being said, there certainly might be instances where you’d want to indicate that a word should be deleted from your copy but it doesn’t need to be replaced by a different word.

Here is how the tags appear in code form:
Working with HTML is <del>cool.</del> <ins>awesome!</ins>

This is the browser output:
Working with HTML is ~~cool.~~ awesome!.

<dfn>

Often paired up with the abbr element, <dfn> is used to declare a term or definition that you then go on to define within the content of your webpage. This element is also often used along with the title html attribute. To be honest I don’t see the point of using dfn… but I might be missing something. Hence, this is one of those obscure tags I rarely use.

Here is how the tags appear in code form:
This HTML element is <dfn title=”the definition element”>dfn</dfn> and can be paired with different attributes and elements.

<dialog>

The <dialog> element allows you to create a box-type of interactive element on your webpage. You should use the “open” attribute with it, otherwise the dialog box won’t show up.

Here is how the tags appear in code form:
Here is a section that I would like users of my website to interact with: <dialog open>Hi there.</dialog>

This is the browser output:
Here is a section that I would like users of my website to interact with:

Years ago when I first learned HTML (in the 1990’s) there weren’t as many choices floating around in terms of styling the text of an HTML document. Also, back then the HTML markup style was much more visual – as opposed the HTML code of today that puts the emphasis on semantic tags. The focus back then was much more heavily on the actual coding and presentation and layout (more concerned with the end result in the browser).

In more recent years that focus has shifted to coding websites in a way that is more meaningful to developers, search engines, screen readers, and anyone or anything else that might be scanning through the code and trying to make sense of it. Back in the day, developers and web designers (including me) used to throw <div> tags all over the place and then add CSS IDs and classes to those divs in order to style them. But what the heck does “div” really mean to a screen reader or in terms of SEO? Not a whole lot.

In other words, developers used to use tags such as  and , which have been replaced by the more semantic  and . For a more detailed explanation on this topic, this article by the W3C explains this matter rather well.

<ins>

See the above “del” section for more details on what the <ins> element does. This HTML element indicates to the browser (and viewer) that some text has been inserted into a page. This element could feasibly be used on its own without <del> but I’m not sure when that would be appropriate.

Some browsers render the output of wrapping ins tags around text as underlined text, while other browsers display your text with a yellow highlight (some display it both ways).

Here is how the tags appear in code form:
This HTML element could really come in handy when trying to display <ins>proofreading</ins> edits in a browser.

This is the browser output:
This HTML element could really come in handy when trying to display proofreading edits in a browser.

Newly introduced to us with the HTML 5 release, the  element is intended for highlighting or marking text. Browsers usually render the output of using  tags as a yellow highlighter effect, with black text. It looks like a proofreading effect to me and is mostly used to bring special attention to an something of importence or urgency. In Chrome (on a PC) it looks a lot like the ins element, except the yellow and black colors are brighter and the text is not underlined.

Here is how the tags appear in code form:
Hey! Take a look at this earth-shakingly important thing I have to say here!

This is the browser output:
Hey! Take a look at this earth-shakingly important thing I have to say here!

<pre>

The “pre” in this next item means “preformatted.” The <pre> element is probably one of the more ‘famous’ HTML elements on this list (so whether it’s actually little-known is quite subjective). However, I’m including it here because it’s a very useful coding tool when it comes down to it!
I don’t use pre tags in my code very often but actually should try to incorporate these handy little guys more into my writing (and coding).

<pre> is so useful because it allows you to render code or poetry or anything else in the browser exactly as you write it in your website code. Wrapping these tags around your text will keep everything as you type it – spaces, paragraph breaks, line breaks, tabs, etc.

Here is how the tags appear in code form:
<pre>How do I love thee?

let me count the ways.

— a beautiful poem by
Elizabeth Barrett Browning</pre>

This is the browser output:

How do I love thee?

        let   me   count   the   ways.

   -- a beautiful poem by
 Elizabeth Barrett Browning

<q>

I can’t believe I never heard of this HTML element before (especially since it’s been around since HTML 4). All you’d need to do to use this element is to wrap two <q> tags around a short quotation, and that should (hopefully) make quotation marks magically appear around it. I literally have no idea why we can’t just type the quote marks themselves, but I’ve given up trying to figure stuff like this out!

Here is how the tags appear in code form:
<q>As soon as you trust yourself, you will know how to live.</q>
— Goethe

This is the browser output:
As soon as you trust yourself, you will know how to live.
— Goethe

As an aside – we have an article full of motivational quotes that is geared especially for freelancers and small business owners!

<s>

Here is yet another HTML 4 element that lends itself to the act of proofreading (and displaying the proofreading markup on a webpage). It is deprecated though, so it’s best to skip this element and use the slightly newer <del> element instead. The <s> element is pretty self-explanatory in that the “s” stands for “strikethrough”, so your text will appear in the browser with a line through it (if it appears to do anything at all – since it is deprecated and not supported very well).

Here is how the tags appear in code form:
Ahhh, New England has such a wonderful Spring season that <s>seems to last only about two weeks of the year</s> is a welcome relief after the long winters we usually have up here.

This is the browser output:
Ahhh, New England has such a wonderful Spring season that ~~seems to last only about two weeks of the year~~ is a welcome relief after the long winters we usually have up here.

<samp>

This element is used to display code in the browser and have it actually look like code. Optionally, you could use <code> tags instead, as they do just about the same thing. Depending upon your device and particular browser, the <samp> element might appear in a code-like monospace font or it might not appear to do anything.

Here is how the tags appear in code form:
The “samp” element in HTML is used to <samp>indicate a sample of computer code</samp> within the webpage.

This is the browser output:
The “samp” element in HTML is used to indicate a sample of computer code within the webpage.

<strike>

This next element on the list, <strike> is also from HTML 4 and is VERY deprecated, in that it is now obsolete in the new version of HTML. If you must use these tags, don’t – instead use the above mentioned <del> tags, as they do just about the same thing. Depending upon your device and particular browser, using <strike> tags might cause a line to appear through your text or it might not appear to do anything.

Here is how the tags appear in code form:
Try using a different tag instead, to indicate where text should be removed from your copy, such as the <strike>wonderful “s” tag</strike> “del” tag.

This is the browser output:
Try using a different tag instead, to indicate where text should be removed from your copy, such as the ~~wonderful “s” tag~~ “del” tag.

This is another one of those non-semantic elements that was used ALL over the place during the early days of the internet as part of HTML 4. The  element was originally used for underlining text (surprise!) Then people got a bit more wise and realized that underlining text should be reserved strictly for hyperlinks, so as not to confuse the viewer/reader/person who is using their website.

Then the u element became deprecated for a while, until it was given new purpose within the HTML 5 specifications. Nowadays the “u” stands for “unarticulated annotation.” In other words it’s now often used to indicate (or annotate) text that is misspelled, or otherwise call special attention to some textual content, but not in a visual way.

Originally it was used to underline text to display it differently, indicate a title or heading, etc. – to really emphasize what you were trying to say that was especially important (kinda like bolding and/or italicizing text). My personal feeling is that this is like splitting hairs, and they should have just done away with this element altogether since it can still be used to literally just underline text. 😉

Here is how the tags appear in code form:
The “u” element in HTML was originally used to underline important words.

This is the browser output:
The “u” element in HTML was originally used to underline important words.

 is another one of those HTML elements I barely even heard of and have never used. However, that might be because it is a relatively “new” element that was introduced with HTML 5… plus I don’t really see much use for it.

What this element does is add a break into a bunch of text or a link, so that it jumps to another line when the viewing area (browser) is shrunken down. Using the wbr tag tells the browser exactly where to break the text string – where to add a word break. Only one tag is needed, much like the likewise standalone   tag (no closing tag needed).

It can be particularly useful in cases where you need to display a long url/path/filename.

Here is how the tags appear in code form:
Hey, check out my Pug Mia in this article: https://codedragontech.com/createwithcodedragon/how-to-turn-a-photo-into-an-illustration-using-photoshop/

This is the browser output:
Hey, check out my Pug Mia in this article: https://codedragontech.com/createwithcodedragon/how-to-turn-a-photo-into-an-illustration-using-photoshop/

Well that’s it for now folks! This is just my take on some coding elements that I personally haven’t used much, but what do you think? Let everybody know in the comments if you have any elements to add and/or if any of those listed here are new to you. 🙂

For a list of the different HTML elements, and to see whether they are block or inline, check out this article on HTML Block Elements vs HTML Inline Elements.

Tags: deprecated html tags html 4 tags not supported html elements that are deprecated in html5