DEV Community

loading...
Cover image for Unusual HTML tags worth knowing 🧩

Unusual HTML tags worth knowing 🧩

christopherkade profile image Christopher Kade ・Updated on ・3 min read

Using the right HTML elements has more importance than many of us realise.

Known as Semantic HTML, it's all about bringing meaning to the page and not just presentation. A <p> element contains a paragraph, and everyone knows what that should look like. Not only does it help communicate what the page contains to search engines, it also helps screen readers do their job as efficiently as possible.

This article will list some lesser known tags for you to have as many tools as possible on a daily basis.

<abbr>: Abbreviations

Should contain abbreviations like the ones in the example below. You could use this to define an abbreviation that is unfamiliar to the reader using the title attribute or inline text providing a definition.

Docs

<dfn>: Definitions

You should use this element on the element being described in the context of the sentence. The ancestor <p>, <dt>/<dd>or <section> are considered to be the definition of that word.

Docs

<address>: Contact information

You can use it to provide contact information.

As shared by Lars De Richter in the comments, we should keep in mind that not all types of addresses should be displayed using this element:

Information provided by address may include the names of the document’s maintainers, links to the maintainers’ Web pages, e-mail addresses for feedback, postal addresses, phone numbers, and so on. The address element is not appropriate for all postal and e-mail addresses; it should be reserved for providing such information about the contact people for the document.

Docs

<cite>: Citations

Should be used when referencing cited creative work.

Docs

<del>: Deleted text

This tag can surround text that has been deleted from a document.

It's definitely worth noting the accessibility concerns this tag presents.

Docs

<hgroup>: Multi-level heading

This tag can regroup multiple headings in a document (<h1>-<h6>). This way, none of the secondary children in this group will create separate sections of their own.

It's worth noting that "the element has been removed from the HTML5 (W3C) specification, but it still is in the WHATWG version of HTML. It is partially implemented in most browsers, though, so is unlikely to go away." so use it with caution πŸ˜„ More information

Docs

<ins>: Inserted text

Represents a range of text that has been added to a document, pretty similar to what Github displays to show a line of code that has been replaced.

Docs

Wrapping up

There are so many HTML tags that are unknown to the vast majority of web developers. Putting content and meaning at the same level will help us build better and more inclusive web pages. All it takes is practice πŸ˜„

I hope you find some use-cases for these tags, as specific as some of them can be.

Either way, thank you so much for reading, if you enjoyed this article and learned a couple of things, following me on Twitter @christo_kade would be the best way to get informed on my latest articles & weird side-projects.

Discussion

pic
Editor guide
Collapse
sudocat profile image
Robin Neal

Over all pretty good, but you should probably avoid advising folks use the hgroup element. It looks like you've grabbed these code examples from MDN, so you should probably have spotted the usage notes on hgroup, which notes that it's been removed from the HTML spec.
For further reading on heading markup, you can check out this

Collapse
christopherkade profile image
Christopher Kade Author

Absolutely, thank you for pointing it out. I should have mentioned it as I have for other elements.

Collapse
patrick profile image
Patrick Ziegler

What about <marquee> though? πŸ˜…πŸ˜…

Collapse
menno11100 profile image
menno11100

marquee is deprecated

Collapse
254volkan profile image
it's volkan 😎

does it have a replacement?

Thread Thread
patrick profile image
Collapse
rakkarage profile image
Collapse
campbellbartlett profile image
campbellbartlett

Great article. I had no idea about any of these, I can definitely see myself using the hgroup tag in the future.

Collapse
dys profile image
Brian Dys Sahagun

In replacement of <hgroup>, MDN has some other suggestions:

w3.org/TR/html52/common-idioms-wit...

Collapse
christopherkade profile image
Christopher Kade Author

Glad you found some use out of it. I thought the exact same thing when I discovered hgroup πŸ˜„

Collapse
larsderichter profile image
Lars De Richter

Nice collection, but there is a problem with your explanation of the address-element, although it is a very common misconception (I have used it loads of times in this way). The HTML5 Doctor explains it very clearly: html5doctor.com/the-address-element/

Collapse
christopherkade profile image
Christopher Kade Author

Thank you so much for pointing it out, that's valuable information, i'll add it to the article as soon as I can πŸ˜„

Collapse
saigkill profile image
Sascha Manns

Thank you very much for sharing that information. Some of the mentioned, i haven't known so far.

Collapse
christopherkade profile image
Christopher Kade Author

Glad you've learned something out of it ! Thank you for reading πŸ™‚

Collapse
hayrettinsalgin profile image
hayrettin

Thanks so much

Collapse
papaponmx profile image
Jaime Rios

Neat, thanks for sharing!

Collapse
mahdipourlotfi profile image
Mahdi pourlotfi

thanks, for this handy article

Collapse
steelvoltage profile image
Brian Barbour

I love Semantic HTML. Good article!

Collapse
arj profile image
arj

Thanks, especially grouping the headers is something worth knowing.

Collapse
capsule profile image
Thibaut Allender

Except it’s not :-)

Collapse
isalemshami profile image
Salem Shami | ァルム

Thanks for the great article and some of them look really interesting to use,

My question is are those really help in SEO when using them ?

Collapse
moranmono profile image
moranmono

Thanks for the info, it was very interesting

Collapse
robrwo profile image
Robert Rothenberg

You're better off using RDFa or Microdata for semantic markup. Search engines understand it (at least partially), and the vocabulary is much more general.

Collapse
aleon1220 profile image
Andres Leon

Thank you. I liked it

Collapse
ut4utc profile image
ut4utc

Hi Bro, what about this tags:
< q >, < mark >, < time >, and & #8209;

Collapse
christopherkade profile image
Christopher Kade Author

It's a non exhaustive list :)

Collapse
vuild profile image
Vuild

Good tips Christopher.

πŸ‘

Collapse
adam_cyclones profile image
Adam Crockett

How about the deprecated ones not worth knowing unless at some sort of developer pub quiz (I wish that was a thing)
menu element
frameset element

Collapse
scrabill profile image
Shannon Crabill

Ah, I had forgotten about these tags