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

<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

    <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

            <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

  
<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