Some less known Powerful HTML features that You must use

HTML or HyperText Markup Language is markup language that is used to display documents in Web browsers. Nowadays we grow our businesses online so that the products and the services we provide spread around the world.

There are millions of websites on the cloud at this time and more than 50% of websites designs are Built in HTML. HTML is not a programming language as this does not provide anything in the sense of that a programming language does like JavaScript.

But, Today i am going to share some less known powerful features of HTML that we can use in our code.

Abbreviation Tag

Abbreviation is an abbreviation or acronym in html. if you want your text to be abbreviated that looks different then you can include this HTML feature in your code.

this is a powerful and less known feature of HTML that can be used to present documentation in a great way.

<h1>Please hover over the <abbr title="Hi i am an Abbreviation effect">Abbreviation</abbr> text to see the effect</h1>

Output here:

Abbreviation tag can be used to show full version of text while hovering over it can be better way for your documentation, like you can show the short form of a text and when the user hover over the short text then tooltip is rendered with the full form of that text.

<h1> <abbr title="HyperText Markup Language">HTML</abbr>is an awesome language that is used to create UI
    </h1>

Output here:

Drag and Drop HTML

Here we have one of most powerful feature of HTML that is drag and drop API, we often use a third party API to implement Drag and Drop like in Angular, React etc. We can handle HTML drag and drop attributes with JavaScript or with any frontend based framework.it is less know powerful HTML feature.

Drag and Drop is a powerful feature of HTML that does not need any third party API and can be implemented only with HTML and JavaScript.

Let's have a look at the code to clear things more.

    <div class="container">
        <div class="row mt-2">
            <div class="col-md-6">
                <div id="sections" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
            </div>
            <div class="col-md-6">
                <div id="sections" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-6">
                <img id="drag1" src="src/assets/images/rxjs.png" draggable="true" ondragstart="drag(event)" width="320"
                    height="250">
            </div>
        </div>
    </div>

Output here:

Required Attribute

There is a very important role of required attribute in HTML. We often use third party API's to implement mandatory fields validations but did you ever noticed we have a required attribute that we can use to apply required validations.

This attribute works when you have input fields in a forms and submit button has a type submit we can use this attribute with following input types: text, search, url, tel, email, password, date pickers, number, checkbox, radio, and file. Lets learn with an example here:

            <form action="/welcome.php">
                <label for="name">Name:</label>
                <input type="text" id="name" name="name" required>
                <label for="mobile">Mobile Number:</label>
                <input type="text" id="mobile" name="Mobile" required>
                <input type="submit">
            </form>

Output here:

Meter Tags

Meter Tag can be used where you want to show the percentage or the value of a particular block , like:

-you want to show the total educated people in your country.

-you marks in your exams (in percentage).

This is a very powerful feature of HTML that does not required any external JavaScript code or CSS so it can be considered as a powerful feature of HTML.

Attribute

• min - that refers the minimum value meter can have
• max: that refers the maximum value meter can have 
• low: it refers the value that will be considered low in some way.
• high: it refers the value that will be considered high.
• optimum: it indicates the preferred zone when the value is between min and low or max and high.

  
<div class="row">
    <div class="col-md-12 text-center">
            <label for="disk_c">Total marks 45 out of 100:</label>
            <meter id="disk_c" value="45" min="0" max="100" style="width: 200px;">45 out of 100</meter>
    </div>
</div>

Summary

In this section, we learned how we can use some less known powerful HTML features. These HTML tags are less known as we have so much other options in the market but we can make use of them to make our application more light weighted and reliable. Stay in touch to get some more cool stuff on future