Amazing HTML tags

HyperText Markup Language popularly known as HTML. It is basically used to design the template of web pages. HTML is the combination of Hypertext and Markup language. Hypertext defines the link between the web pages. A markup language is used to define the text document within tag which defines the structure of web pages. This language is used to annotate (make notes for the computer) text so that a machine can understand it and manipulate text accordingly. Most markup languages (e.g. HTML) are human-readable. The language uses tags to define what manipulation has to be done on the text.

This is article is not focused on introduction to HTML. But if you are just starting out your journey as a web developer, this article will be of help sooner or later.

As a web developer, HTML is a language we cannot do without, but funny enough, there are some features many of us don't know that has been pre-implemented in HTML, this features and tags saves us a lot of time as we have to keep up with deadline and all. I know you'd be curious to know what these features and tags are. Why not grab your cup of coffee and follow along.

Amazing HTML Tags

1. Details and Summary

A lot of times, there may be a need for you as a developer to have some kind of drop-down, maybe in an FAQ section where by the user will only see the header and we the user clicks on the header, the rest of the content will show. A lot of developers have to implement this features with JavaScript while some will use other JavaScript library or frameworks, mean while all this can be achieved using just an HTML tag know as the summary and heading. An example of this is as below

  <details>
    <summary>Heading here</summary>
    <p>The content you want to show on click will be pasted here, feel free to check this out on your 
            code editor</p>
   </details>

2. Progress Bar

This can actually function in two ways, it can be used as some kind of loader or to show users their progress just to make your web app more interactive.

The normal progress tag with no attribute can be used as loader on your website. Here is an example of this

     <progress></progress>

While the one with attributes and props can be used to show users their progress and all

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

3. Datalist

Do you have a search box somewhere on your page, and you want to give users suggestions on what to search for when user clicks on the input box, then datalist tag can save you the stress. This also have a filter effect in the sense that it reads whatever the user is typing to suggest possible value to them. Here is an example of this:

     <div>
        <input type="text" list="suggestions" placeholder="Search..." />
        <datalist id="suggestions">
            <option>CSS</option>
            <option>React</option>
            <option>Vue</option>
            <option>Angular</option>
            <option>Python</option>
            <option>Php</option>
         </datalist>
      </div>

You can make this more interesting by adding details to each of the option on the datalist

  <option value="React">Details: A JavaScript library</option>

4. Input types

I know for sure that a lot of us would have worked with different input types but might not know these input types exist.

Input type of color: imagine a scenario whereby you want your user to input maybe their favorite color and you just created and input for the user to input the color name. Oh no, with input type of color, you can of course show a color picker palette to your user to pick their favorite color and this will give your the color in return. Below is an example of this

      <input type="color" />

Input type of range: as the name implies, you want your user to select a particular range, instead of using number, why not use a more visual representation of this, and that is when this input type comes in. Here is an example

      <input type="range" />

Note: You can also add some attributes like value (To preset a value), max (For maximum value), min (For minimum value)

    <input type="range" value="2" min="1" max="100" />

Input type of date: this is also kind of self explanatory. What this does is that it brings out a date picker where a user can pick a date of their choice. This is also of different types based on your prefrence. I will list out some of the type we have, feel free to check them out and play around with them.

    // This is the normal syntax
     <input type="date" />
   // This is to get the time and date in the local time zone
     <input type="datetime-local" />
   // This is used to get only the time
     <input type="time" />
   // This is used to get week
     <input type="week" />

Feel free to check out other types that I did not mention here online

5. Meter tag

This can also used to show some kind of progress, think of a scenario whereby you want to show the progress of user on a particular task, this tag can be useful in cases like this. Here is an example of this

     <meter max="100" value="50" min="10" ></meter>

6. Optgroup

This can be used where you have a long drop down list but you want to sub divide this into important ones and the ones that are not of great importance, then all you need is optgroup. Here is an example of this

     <select>
        <optgroup label="important">
            <option value="mySQL">MYSQL</option>
            <option value="mongoDB">MONGODB</option>
        </optgroup>
        <option value="oracle">Oracle</option>
        <option value="cassandra">Cassandra</option>

7. Inputmode

A great alternative to input type is the input mode. This gives the keyboard hints at the type of data that might be entered by the user while editing the element or its content meanwhile the browser won't have to display a certain type of keyboard, it will still display the normal keyboard. Sound great right? Here is an example of this

<input type="text" inputmode="url" />
<input type="text" inputmode="email" />
<input type="text" inputmode="numeric" />

8. Pattern

Situation may arise whereby we need to write some pattern an input must conform to using regex, that would actually be another stress on it's own. Why not use the pattern attribute of an input tag. Sounds cool yea. Here is an example on how to implement this

     <input type="text" pattern="[A-Za-z0-9]+" />

9. Contenteditable

How you been thinking on how to make a certain section of your page responsive? I have a quite simple and straight forward solution for that, an the solution is here:

      <div contenteditable="true" >
           This section can be edited by the user
      </div>

10. Translate

As we know that we have different countries and of course each speak a different language, and here is where the need for a translator comes in. But there are certain part of our page that we do not want to be translated no matter what. This can be achieve by simply adding the translate attribute to your div as seen below

     <p translate="no">Incheon limited</p>

11. Loading

For as many that have worked with some JavaScript frameworks and library, we will know about the concept of loading. What this loading does is that it specifies whether a browser should load an image immediately or to defer loading of off-screen images until, for example, the user scrolls near them.

     <img src="https://getdummypictures/1" loading="lazy" />

15 Html Attribute You Might Not Have Known

HTML Tags that will save you time

Table of contents