HTML can do this? Part 1
Tags: html, webdev, frontend, beginners
Published: 2023-12-16 15:01:00

Welcome to my HTML can do this series, part 1.

In keeping with my [GitHub-Can-Do-This](https://dev.to/yuridevat/reference-a-new-issue-3g5h) 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](#chapter-1)
2. [Link to email or telephone number](#chapter-2)
3. [List with autocomplete](#chapter-3)
4. [Text modifications](#chapter-4)


---

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.

```html
<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 😯.

```html
<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](https://datatracker.ietf.org/doc/html/rfc6068).

### Linking to telephone number

You can also link to telephone numbers when adding it to the `href` after `tel:`.

```html
<a href="tel:+18005551239">(800) 555 1239</a>
```

Link behavior can vary depending on the device ([MDN official docs on linking to telephone number](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#linking_to_telephone_numbers)):

- 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](https://datatracker.ietf.org/doc/html/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!