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<a name="chapter-1"></a>

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.

{% codepen https://codepen.io/YuriDevAT/pen/dyaBQZm %}

2. Linking to email address or telephone number <a name="chapter-2"></a>

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:[email protected]">Send email to nowhere</a>

You can also add more details inside the URL and include cc, bcc, subject and body 😯.

<a href="mailto:[email protected][email protected]&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.

{% codepen https://codepen.io/YuriDevAT/pen/OJdZLKK %}

3. List with autocomplete<a name="chapter-3"></a>

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.

{% codepen https://codepen.io/YuriDevAT/pen/zYeVMbE %}

4. Text modifications<a name="chapter-4"></a>

Using specific tags, text can directly be modified without additional CSS. Very handy.

{% codepen https://codepen.io/YuriDevAT/pen/LYqKXwJ %}

Thanks for reading. I really appreciate it!