HTML 5: things you should know

 

Hey there, i know you may asking what? HTML!😕

A lot of you may be thinking that they know the most needed in HTML and the rest is just facultative. Well let me show things you should use in HTML!😃

1-Datalist:

   <form action="" method="get">

        <label for="animal">Choose your animal from the list:</label>

        <input list="animals" name="animal" id="animal">

            <datalist id="animals">

               <option value="Lion">

               <option value="Dog">

               <option value="Eagle">

               <option value="Tiger">

               <option value="Fish">

            </datalist>

         <input type="submit">

     </form>

The <datalist> tag allows you to render a list of options with autocomplete option! I know cool right? 😃You don’t have to code it in JS. I have integrated it with a form to add each time an option. Copy the code and try it 😉 .

2-detail tag:

    <details>

        <summary>Click Here to see details</summary>

           <p>Do IT is the best blog  !</p>

     </details>

When we open details tag we wrap inside it <summary> .which will give us a button when clicking on it, it will display the next tags!

Instead of using js on it just do it simply.

3-meter and progressive:

    <meter id="meter1" value="0.7">70%</meter>

    <progress id="progressive1" value="52" max="100"> 52% </progress>

If you want to represent the data in a given range. It’s very beautiful representation. If we have a static indicator use ‘meter’ else if progressive use ‘progressive’ tag.

4-editable content:

Yes you read it right! Let’s make our content editable without java script.

    <ul contenteditable="true">

    <li> 1.element one </li>

    <li> 2. element two </li>

    <li> 3. element three </li>

</ul>

The attribute ‘contenteditable’ can be added to elements like: div, ul, p etc.

It makes the content editable by the user including the element’s children. Give it a try with input field.😉

5-output:

How about we manage a logic like sum using HTML? I’m not joking we use the output tag:

 <form oninput="x.value=parseInt(a.value) * parseInt(b.value)">

        <input type="number" id="a" value="0">

               * <input type="number" id="b" value="0">

                     = <output name="x" for="a b"></output>

     </form>

The output will display the result of such logic. As you can see the x value will take a*b, when a and b are taken by inputs fields. Try to change it to make other operations type or add fields.

So those tricks can help you to minimize js logic and show it to your friends.😎