Lesser-known HTML tags #1

Bulle Ouvrard — Tue, 18 Jun 2024 21:50:41 +0000

Let's dive into HTML lands

HTML is vast, and it's easy to overlook most of its tags, even the cool ones. That's why I decided to dive into HTML and share my findings. Here’s a first selection of HTML tags you might not know but would want to test for your next projects.

`<details>` & `<summary>`

For the collapsible content

You know those accordion sections often seen in Q&A sections on websites? Well, with plain HTML, you can wrap your question in <summary> and the question-answer block in <details>.

Introduced with HTML5, <summary> allows toggling the content in <details>.

<details>
  <summary>How to pronounce Wingardium Leviosa ?</summary>
  <p>
    It's Le-VIO-sa. Not Levio-SAAAA !
  </p>
</details>

Below an example :

Using common HTML attributes (like open), you can add animations or a fancier layout with CSS, so you actually don't need JavaScript or an external library for these fun accordions 😉.

Here's an example of how to animate <details> and <summary> with CSS:

/* Replacing the arrow with a custom icon displayed at the end of <summary> */
summary::after {
  content: '';
  width: 18px;
  height: 18px;
  background: url('https://cdn-icons-png.flaticon.com/512/32/32339.png');
  background-size: cover;
  margin-left: .75em;
  transition: 0.2s;
  }

/* Then we animate this icon on click on details */
  details[open] > summary::after {
    transform: rotate(45deg);
  }

And here's the result :

`<ins>` & `<del>`

For the text edits annotations

Have you seen Git commits where added code is highlighted in green and deleted code in red? Need to mark up text changes ? Introduced with HTML4, <ins> and <del> serve this purpose, allowing version control within a document, and displaying the range of text that has been inserted/removed.

There are two ways of using <ins> and <del>

Case 1 - inner text edit

<p>“It's Le-<ins>viooooo</ins>-sa<del>aaaa</del>!”</p>

Case 2 - Like those good old commits

 <p>“Wingardium Leviosa”</p>

 <ins cite="../howtobeawizard.html" datetime="2024-05">
        <p>“It’s Wing-<b>GAR</b>-dium Levi-<b>O</b>-sa”</p>
</ins>
<del>
  <p>“Not Levio-<b>SAAAAAAA</b>”</p>
</del>

As shown in the example above, <ins> and <del> come with the attributes cite and datetime, so you can provide the date and source as additional information.

`<address>`

For your contact informations

<address> is designed to define the contact information for a person or an organization, typically the author of the site or a specific post.

Therefore, the <address> tag can include an email address, URL, physical address, phone number, or social media handle, and it is displayed in italics by default. The most appropriate places to use this tag are within the footer, of an <article> or of the <body> in a web page.

Here’s an example of how to use the <address> tag:

<p>Contact information</p>
<address>
  <a href="mailto:just@curious.com">just@curious.com</a><br />
  <a href="tel:+33666666666">06 66 66 66 66</a>
</address>

And below a playground with this tag:

And that's it for this first exploration ^^.

Many other cool but sadly ignored HTML tags are waiting to be discovered 👀. I’ll share more of them later.

See you soon 👋!

DEV Community: Bulle Ouvrard