HTML can do this? Part 1

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

1. Details & Summary HTML Tag
2. Link to email or telephone number
3. List with autocomplete
4. 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!