There are over a hundred elements in HTML, all of which can be applied to pieces of text to give them special meaning in a document. Most of us only know a few, like the <p>
, <div>
, and <body>
elementsβ¦
But there are actually a bunch more hidden in the dark realms of the W3C reference. Thatβs why, in this article, I took the liberty of diving deep into the HTML documentation, to come out with a handy bag of elements that will improve your website in not one, but two very important ways: accessibility and SEO.
Press Ctrl
+D
to bookmark this article and easily come back to it when you need it. And with that said, letβs begin!
π <abbr>
β Abbreviation
This elements represents both abbreviations (like Corporation β Corp.) and acronyms (like Cascading Style Sheets β CSS). Additionally, you can use its title
attribute to write the full form of the word so that screen readers can read it and users can hover over it to read it.
π <ins>
and <del>
β Insert and Delete
The <ins>
and <del>
elements represent a range of text that has been added or deleted to a document. You may have already seen these elements in the Github Pull Requests.
π <dfn>
, <var>
, <kbd>
, <samp>
, and <output>
β Technical Elements
These are elements that represent special technically-oriented parts in a document, like definitions, variables, keystrokes, etcβ¦
π <bdo>
β Text Directionality
This element changes the directionality of text to make it render backwards. You can control its behavior using the dir
attribute.
Although not its intended use, but it can reverse text using nothing but HTML!
π <mark>
β Highlighting Text
The purpose of this element is to highlight text like you would with a marker.
π <area>
β Clickable Image Areas
You can use this element to make certain areas of your image behave like links!
π <dl>
, <dd>
, and <dt>
β Description Lists
You can use these elements to create a semantically-accurate description list where you define multiple terms in one block of text.
π <sup>
and <sub>
β Superscripts and Subscripts
With these two elements, you can add superscripts (like xΒ²) and subscripts (like xβ) to your document.
π <figure>
and <figcaption>
β Labeled Images
You can use <figure>
to contain any element that you want, like an image for example. And then, you add <figcaption>
as its last child, where you can add a block of text that describes whatβs above it.
π <progress>
and <meter>
β Marking Progress
This one allows you to create semantically-right progress-bar elements where you show how far an action is from being finished.
π <details>
β Expandable Menus
You can use this element to create a native menu that has a title and can expand using a button. No JavaScript needed.
π <dialog>
β Pop-up Dialogs
Itβs possible to create semantically-accurate dialogs using this element. It doesnβt do much by itself, so you have to use CSS and JavaScript to add more functionality.
π <datalist>
β Text Input Suggestions
This element lets you manually add text-input suggestions. You can add anything you want!
π <fieldset>
β Grouping Form Elements
Keep your forms tidy and more user-friendly by using the <fieldset>
element.
π <object>
β Embedding External Objects
With this amazing element, you can embed almost any file you want to your website! The most commonly supported files are PDFs, Youtube videos, etcβ¦
π <noscript>
β If JavaScript Is Disabled
This element can be used to show some content when JavaScript is disabled by the browser. Itβs very commonly used by websites that heavily depend on JavaScript, like Single Page Applications (SPAs).
If you found this guide useful, please donβt forget to bookmark it for future reference.
I make posts like this everyday, so please follow me to stay informed. β€οΈ
Aloha, web developers! π
If you struggle with memorizing the whopping amount of selectors out there, know that you'r not alone.
I have a cure for this problem. It's literally free. Print it. Make it your desktop background. Or even print it on a t-shirt. It's yours forever.18:14 PM - 18 May 2022
Oldest comments (45)
Woah this is cool, especially progress and dialog
I didn't know a lot of these existed. Amazing article!!
FYI, you can use
abbr
within DEV/Forem.Actually, several of these are valid β Like β.
We wouldn't expect everyone to reach for these all the time, but they're there if you really want to make your post highly usable!
Β
Β
Β
can centre things without CSS π
Β
Β
Β
Β
using tab and space πright?
I am not skilled enough to do it that way, plus I think they are ignored in markdown at the beginning of lines or get turned into code snippets. The answer is even more evil than spaces and tabs I am afraid! π€£
Let me guess.. Are you using the
<center>
tag?Yup, good old deprecated HTML to the rescue π€£ told you ity was more evil than just tabs and spaces!
Haha that's amazing! π―
This is really cool! Thanks for bringing these to my attention! I'll definitely want to try some of these out in my later projects!
I totally forgot about this tag
<abbr>
Lol, I have to confess that I use
<b>
and<i>
quite a lot, probably just laziness, so much easier than using<span>
with a class :)Thank you for this list, in comparison to other lists it is very well done!
Great article β€β€β€
A long time ago I made an interactive building map using hard work! Would do it in JavaScript if I had too
Glad to see that the dialog element was included. Although just as a small aside, the dialog element itself isn't completely accessible. So try not to use it if the website is going out to the greater public.
References:
developer.mozilla.org/en-US/docs/W...
scottohara.me/blog/2019/03/05/open...
Because you said, "small aside". Get it? Haha... πππ
This is an awesome article. I'm glad you covered these elements to help us better understand them. Thanks for the info! π
Nice article! We always need to be reminded of the power of HTML. Also worth mentioning the <meter> element which acts like the progress, but with more control.
Amazing π
i folloed u but i didnt get a free cookie π€ππ€¦ββοΈ
Thank you guys for the amazing feedback!
I'll be adding more elements soon β₯οΈ