9 simple HTML tags to avoid complex libraries

Useful HTML Tags

There are 142 HTML tags according to Mozilla Developer Network(MDN) and usually we are using few of them only, few of them we might not heard about. We are mostly rely on libraries to achieve different functionality which will increase our bundle size. so there are lot of functionality can be achieved using these HTML Tags which we are not aware of.

Here are few tags and there use cases -

Accordion

Sometimes we might want to hide some content and allow users to reveal it manually, we can a achieve the described functionality with pure HTML.

Thanks to HTML5, HTML5 introduced the details and summary tags that can be used to create a pure HTML accordion

<details>
    <summary>What is Accordion?</summary>
    <p>The accordion is a UI paradigm that consists of several stacked blocks. Each block consists of a label and a content section, clicking on a label either expands or collapses the section.</p>
</details>

<details>
    <summary>What is Accordion?</summary>
    <p>The accordion is a UI paradigm that consists of several stacked blocks. Each block consists of a label and a content section, clicking on a label either expands or collapses the section.</p>
</details>

details { border: 2px solid #0035ff; } summary { border: 1px solid #0035ff; color: #0035ff; }

details { border: 2px solid #0035ff; } summary { border: 1px solid #0035ff; color: #0035ff; }

Blockqoute

The blockquote tag specifies a section that is quoted from another source.

It is useful when we want to highlight some part of our articles.

<blockquote>“Any fool can write code that a computer can understand. Good programmers write code that humans can understand.” – Martin Fowler</blockquote>

<blockquote>“Any fool can write code that a computer can understand. Good programmers write code that humans can understand.” – Martin Fowler</blockquote>

blockquote {
            background: #f9f9f9;
            border-left: 10px solid #0035ff;
            margin: 1.5em 10px;
            padding: 0.5em 10px;
          }
          blockquote:before {
            color: #ccc;
            content: open-quote;
            font-size: 4em;
            line-height: 0.1em;
            margin-right: 0.25em;
            vertical-align: -0.4em;
          }

blockquote {
            background: #f9f9f9;
            border-left: 10px solid #0035ff;
            margin: 1.5em 10px;
            padding: 0.5em 10px;
          }
          blockquote:before {
            color: #ccc;
            content: open-quote;
            font-size: 4em;
            line-height: 0.1em;
            margin-right: 0.25em;
            vertical-align: -0.4em;
          }

Date Picker

HTML provides a input type="date" tag, that provides a nice UI with the option to select the dates by clicking on it.

<label for="start">Select date:</label>
<input type="date" id="start" name="start" value="2022-07-22" min="2022-01-01" max="2022-12-31">

<label for="start">Select date:</label>
<input type="date" id="start" name="start" value="2022-07-22" min="2022-01-01" max="2022-12-31">

label {
    display: block;
    font: 1rem 'Fira Sans', sans-serif;
}

input,
label {
margin: 0.4rem 0;
}

label {
    display: block;
    font: 1rem 'Fira Sans', sans-serif;
}

input,
label {
margin: 0.4rem 0;
}

Slider

A slider is a common component to collect user input in a specific numeric range.

You can use input type="range" to get a fully functional slider, where you can set the min, max, and current values

<div class=slider>
<input type="range" min="0" max="200" value="100" oninput="rangeValue.innerText = this.value">
<p id="rangeValue">100</p>
</div>

<div class=slider>
<input type="range" min="0" max="200" value="100" oninput="rangeValue.innerText = this.value">
<p id="rangeValue">100</p>
</div>

body {
background: linear-gradient(to right, red, yellow);
}
.slider {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 200px;
height: 60px;
padding: 30px;
padding-left: 40px;
background: #fcfcfc;
border-radius: 20px;
display: flex;
align-items: center;
box-shadow: 0px 15px 40px #7E6D5766;
}
.slider p {
font-size: 26px;
font-weight: 600;
font-family: Open Sans;
padding-left: 30px;
color: black;
}
.slider input[type="range"] {
-webkit-appearance:none !important;
width: 90%;
margin: auto;
height: 2px;
background: black;
border: none;
outline: none;
}
.slider input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none !important;
width: 30px;
height:30px;
background: black;
border: 2px solid black;
border-radius: 50%;
cursor: pointer;
}
.slider input[type="range"]::-webkit-slider-thumb:hover {
background: black;
}

body {
background: linear-gradient(to right, red, yellow);
}
.slider {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 200px;
height: 60px;
padding: 30px;
padding-left: 40px;
background: #fcfcfc;
border-radius: 20px;
display: flex;
align-items: center;
box-shadow: 0px 15px 40px #7E6D5766;
}
.slider p {
font-size: 26px;
font-weight: 600;
font-family: Open Sans;
padding-left: 30px;
color: black;
}
.slider input[type="range"] {
-webkit-appearance:none !important;
width: 90%;
margin: auto;
height: 2px;
background: black;
border: none;
outline: none;
}
.slider input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none !important;
width: 30px;
height:30px;
background: black;
border: 2px solid black;
border-radius: 50%;
cursor: pointer;
}
.slider input[type="range"]::-webkit-slider-thumb:hover {
background: black;
}

Color Picker

can use input type="color", which would otherwise be a time-consuming task to write from scratch.

<p>Select color:</p>
<div>
    <input type="color" id="color-picker" name="color-picker"
           value="#0035ff">
</div>

<p>Select color:</p>
<div>
    <input type="color" id="color-picker" name="color-picker"
           value="#0035ff">
</div>

input {
    margin: 0.4rem;
  border-radius:50%;
    height:3rem;
  border: none;
}
p{ font-weight: bold}

input {
    margin: 0.4rem;
  border-radius:50%;
    height:3rem;
  border: none;
}
p{ font-weight: bold}

Edit Content

The contenteditable attribute specifies whether the content of an element is editable or not.

<element contenteditable="true|false">

<p contenteditable="true">This is editable. Try to change this text.</p>
<p contenteditable="false">This is not editable.</p>
<div contenteditable="true">This div content is editable.</p>

<p contenteditable="true">This is editable. Try to change this text.</p>
<p contenteditable="false">This is not editable.</p>
<div contenteditable="true">This div content is editable.</p>

body { font-size: 1.2rem; }

body { font-size: 1.2rem; }

Progress Bar

To show progress bar you can use The progress tag.

Here is an example to do that -

<progress max="100" value="80"></progress>

<progress max="100" value="80"></progress>

progress[value] {
  width: 350px;
  height: 60px;
}

progress[value] {
  width: 350px;
  height: 60px;
}

To create dropdown we can use select tag and datalist html tag.

The difference between these two is when we use select we have to list all the options using option tag while if we do using datalist then we have to use input where we can enter our own input as well.

<div>
    <label for="select">Select Browser:</label><br/>
    <select id="select" name="browser">
<option value="firefox">Firefox</option>
<option value="ie">IE</option>
<option value="chrome">Chrome</option>
<option value="opera">Opera</option>
<option value="safari">Safari</option>
</select></div>
<br/>
<div>
<label for="datalist">Select or Enter Browser :</label><br/>
<input id="datalist" placeholder="Select or Enter Browser" type="text" list="browsers">
<datalist id="browsers">
  <option value="Firefox">
  <option value="IE">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist></div>

<div>
    <label for="select">Select Browser:</label><br/>
    <select id="select" name="browser">
<option value="firefox">Firefox</option>
<option value="ie">IE</option>
<option value="chrome">Chrome</option>
<option value="opera">Opera</option>
<option value="safari">Safari</option>
</select></div>
<br/>
<div>
<label for="datalist">Select or Enter Browser :</label><br/>
<input id="datalist" placeholder="Select or Enter Browser" type="text" list="browsers">
<datalist id="browsers">
  <option value="Firefox">
  <option value="IE">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist></div>

Tooltip is used to show extra or detailed information about any element.

We can use HTML built-in title attribute for that.

<button type="button" title="Tooltip is used to show extra or detailed information about any element">What is tooltip?</button>

<button type="button" title="Tooltip is used to show extra or detailed information about any element">What is tooltip?</button>

button {
  padding: 10px;
  background: #ffffff;
}

button {
  padding: 10px;
  background: #ffffff;
}

9 simple HTML tags to avoid complex libraries