Unusual HTML tags worth knowing - 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.
<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.
<address>: Contact information
You can use it to provide contact information.
<cite>: Citations
Should be used when referencing cited creative work.
<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.
<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.
<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.
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.
#html #web-development
