Welcome to my HTML can do this series, part 1.
In keeping with my GitHub-Can-Do-This series, today I want to write a post about cool things that HTML can do (and that many apparently don't know about).
I am a strong believer that the more people understand HTML and use it to its full extent, the more accessible the web will automatically become.
Table of content
- Details & Summary HTML Tag
- Link to email or telephone number
- List with autocomplete
- Text modifications
As I don't know how many more parts will follow, I'll just start the series by describing awesome tags and the HTML magic behind them in alphabetical order.
1. Details & Summary
Open/Close widgets are typically created using JavaScript. For quite a while now, there is a default HTML tag, which covers exactly that behavior.
Styling can be adjust as needed. By default, the widget is closed. Giving <details> the attribute open, it shows its content from the beginning.
2. Linking to email address or telephone number
The <a> tag has an href attribute, which indicates the link's destination. It can link to web pages, files, email addresses, locations in the same page, or anything else a URL can address.
The href attribute is responsible for making the <a> focusable and activates the link when pressing the enter key.
Linking to email address
If you add mailto: and the email address of the intended recipient in the URL scheme of href, a new outgoing email message with open when clicked.
<a href="mailto:nowhere@email.org">Send email to nowhere</a>
You can also add more details inside the URL and include cc, bcc, subject and body 😯.
<a href="mailto:nowhere@email.org?cc=nobody@email.org&subject=This%20is%20the%20subject">Send email with subject to nowhere and nobody</a>
Read more about linking to email address rfc6068.
Linking to telephone number
You can also link to telephone numbers when adding it to the href after tel:.
<a href="tel:+18005551239">(800) 555 1239</a>
Link behavior can vary depending on the device (MDN official docs on linking to telephone number):
- On mobile devices, the number is dialed automatically.
- Most operating systems have programs that can make calls, like Skype or FaceTime.
- Websites can make phone calls with registerProtocolHandler, such as web.skype.com.
- Other behaviors include saving the number to contacts, or sending the number to another device.
Read more about linking to telephone numbers rfc3966.
3. List with autocomplete
Using <datalist>, a dropdown menu appears when the user starts to write in the input field and makes it possible for them to choose from the available options form the list.
4. Text modifications
Using specific tags, text can directly be modified without additional CSS. Very handy.
Thanks for reading. I really appreciate it!
Top comments (43)
👏 Very very nice post Julia.
Semantic HTML elements, in the common 'semantic' sense, no doubt, are unsung heroes of HTML. Especially when we're talking about accessibility, it's quite surprising to know how easy semantic HTML elements could make navigation for people using assistive screen reading technologies.
I'd like to add in an extra point over here regarding
<del>that is worth noting:<del>and<s>might be styled the same but they serve different purposes.<del>makes sense when we have interactive capabilities in the underlying document, whereby things could be inserted and deleted — and that's precisely what<ins>and<del>are meant for. If we just want to strike-through text, merely for display purposes,<s>is what we need (which is a replacement for the deprecated<strike>element).A while ago, when I was about to teach semantic HTML on Codeguage, I myself came across a surprisingly large number of elements in HTML that I never knew of, and now try to use routinely. The world of semantic HTML is huge and I am sure you'll have a lot to come up with even more amazing posts than this one!
Thanks for your comment and insights.
Thanks for pointing out the different purposes. A future article will be exactly about that - and even more, about the accessibility part of these tags, which I did not mention here at all (since, I consider it a bit more advanced):
It still make sense to use them though for future compatibility! There are work arounds I want to talk about more in my next artcile on HTML tags.
Looking forward to your next article. 🙂
Thanks for pointing out obliquely that the proper designation is element (and not tag).
That's a good judgement.
The
<details>and<datalist>definitely were surprising to me, didn't knew that! Thanks for sharing! 🙂Glad you learned something new :)
Cool post ✨
Thanks Thomas! Appriciate your comment.
Thanks for this Article, Julia. For the first idea, I would like to add that if you add a same 'name' attribute to each details tags, you can change the behaviour to have only one summary open at the same time ( same as with radio buttons ).
Thanks for mentioning this! A behavior, many devs want to achieve with open/close widgets.
Oh, super cool! So many tags I did not know about. Saving this for future reference. Many thanks!
Thanks Corina. Yeah, HTML has so much to give out of the box already. We have to start using it on a regular basis.
A linting rule that flags a warning every time a
divorspanis used might be a good start!Awesome article! Can't wait for the next part! Keep up the great work!
Thanks a lot.
Good post thank you.
is the most fantastic tip. Thanks for letting us know!
It is nice to know about these HTML tags. The tag is really great.
Great post :) ૮ ˶ᵔ ᵕ ᵔ˶ ა
Thank you ٩(๑❛ᴗ❛๑)۶
Some comments may only be visible to logged-in visitors. Sign in to view all comments.