Interesting HTML tags

Featured image

I am going to show you the top 9 interesting HTML tags and attributes. In this article, you will research short examples and tricks with HTML.

I notice, developers make some components instead of using native HTML tags. Hope, this article will help to save time and resources for your project.

Native HTML tags or attributes for the:
1. Progress bar
2. Expansion panel (accordion)
3. Dialog
4. Color selection
5. Base url
6. Lazy loading
7. Calendar
8. Single range
9. Content editable

1. The example of how you can add a progress bar to your web app without using additional libraries.

<progress value="32" max="100"> 32% </progress>

The result of processing <progress />

2. The example of how you can add expansion panel (accordion) to your web app.

<details>
  <summary>Global Goals</summary>
  <p>The Global Goals are a set of 17 commitments made by 193 world leaders, to end extreme poverty, inequality, and climate change by 2030..</p>
</details>

The result of processing <details /> and <summary/>

3. The semantic way of adding a dialog to your website. But in my opinion, the native HTML element loses out to the ready-made components from UI libraries.

<dialog open>
  <p>Greetings, one and all!</p>
  
  <button>Close</button>
</dialog>

The result of processing <dialog />

4. A native HTML tag for color selection.

<input type="color">

The result of processing input:color

5. The <base> HTML tag specifies the base URL for all URLs in a document.

<base href="https://leonid-shvab.web.app/">

<a href="contacts">contacts</a>
<a href="blog/000">blog</a>

6. A native implementation of lazy loading. Just add the loading=”lazy” attribute and watch as the images load one by one in the network. This functionality has weak compatibility with browsers. But for the future, it is a great solution for lazy loading.

<img  loading="lazy" src="1.jpg" height="400px" width="400px">
<img  loading="lazy" src="2.jpg" height="400px" width="400px">
<img  loading="lazy" src="3.jpg" height="400px" width="400px">

The result of the implementation of lazy loading

7. A native HTML tag for the calendar.

<input type="date">

The result of input:date

8. A native HTML tag for the single range.

<input type="range" min="0" max="50">

The result of input:range

9. An interesting atribute, which allows edit a block of text.

<p contenteditable="true">
  You can edit this block of text.
</p>

The result of contenteditable attribute

Contacts:
1) Linkedin
2) Github
3) Landing page