Julia 👩🏻‍💻 GDE

Posted on Dec 16, 2023 • Edited on Jan 28

HTML can do this? Part 1

#html #webdev #frontend #beginners

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.

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)

Codeguage • Dec 17 '23

👏 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!

Julia 👩🏻‍💻 GDE • Dec 17 '23 • Edited

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):

These tags do have semantic meaning, and always should used accordingly, BUT, these most of these formatting semantics are not recognized by screen readers, at least now.

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.

Codeguage • Dec 17 '23

Looking forward to your next article. 🙂

Russell Bateman • Dec 21 '23

Thanks for pointing out obliquely that the proper designation is element (and not tag).

Codeguage • Dec 22 '23

That's a good judgement.

Renato Teixeira • Feb 1

The <details> and <datalist> definitely were surprising to me, didn't knew that! Thanks for sharing! 🙂

Julia 👩🏻‍💻 GDE • Feb 1

Glad you learned something new :)

Thomas Bnt • Dec 16 '23

Cool post ✨

Julia 👩🏻‍💻 GDE • Dec 17 '23

Thanks Thomas! Appriciate your comment.

Matias Facio • Jan 7

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 ).