10 features of HTML5 recommended by BAT bosses

tag, determines the clickable area. Clickable areas can be rectangular, circular or polygonal areas. If you do not specify any shapes, it defaults to the entire image.

Code

<div>
    <img src="circus.jpg" width="500" height="500" alt="Circus" usemap="#circusmap">

    <map name="circusmap">
        <area shape="rect" coords="67114207254" href="elephant.htm">
        <area shape="rect" coords="222141318, 256" href="lion.htm">
        <area shape="rect" coords="343111455, 267" href="horse.htm">
        <area shape="rect" coords="35328143500" href="clown.htm">
        <area shape="circle" coords="426409100" href="clown.htm">
    </map>
 </div>
Copy the code

Results demonstrate

You can start from here to view demos: html5-tips.net lify. The app/map/index. The h…

tip

Image maps have their drawbacks, but you can use them for visual presentations. We can try this with family photos and delve into personal photos

Mark Content

Use the tag to highlight any text content.

Code

 <p> Did you know, you can <mark>"Highlight something interesting"</mark> just with an HTML tag? </p>
Copy the code

Results demonstrate

You can start from here to view demos: html5-tips.net lify. The app/mark/index…

tip

You can always change the highlight color using CSS,

mark {
  background-color: green;
  color: #FFFFFF;
}
Copy the code

data – * attribute

The data-* property is used to store custom data that is specific to a page or application. You can use the stored data in your JavaScript code to create more user experiences.

The data- * attribute consists of two parts:

• Attribute names must not contain any uppercase letters and must be at least one character long after the prefix “data-“
• The property value can be any string

Code

<h2> Know data attribute </h2>
 <div 
       class="data-attribute" 
       id="data-attr" 
       data-custom-attr="You are just Awesome!"> 
   I have a hidden secret!
  </div>

 <button onclick="reveal()">Reveal</button>

Copy the code

function reveal() {
   let dataDiv = document.getElementById('data-attr');
    let value = dataDiv.dataset['customAttr'];
   document.getElementById('msg').innerHTML = `<mark>${value}</mark>`;
}
Copy the code

Note: To read the values of these attributes in JavaScript, you can use getAttribute(), but the specification defines a simpler approach: using the dataset attribute.

Results demonstrate

You can see the demo from here: html5-tips.netlify.app/data-attrib…

tip

You can use it to store some data in the page and then pass it to the server using REST calls.

Output Tag

The

tag indicates the result of the operation. Typically, this element defines a region that will be used to display some computed text.

Code

<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>
Copy the code

Results demonstrate

You can start from here to view demos: html5-tips.net lify. App/output/inde…

tip

If you want to perform any calculation in client-side JavaScript and you want the results to be reflected on the page, use the

tag. You don’t have to go through the extra step of getting the element: getElementById().

Datalist

The

Code

<form action="" method="get">
    <label for="fruit">Choose your fruit from the list:</label>
    <input list="fruits" name="fruit" id="fruit">
        <datalist id="fruits">
           <option value="Apple">
           <option value="Orange">
           <option value="Banana">
           <option value="Mango">
           <option value="Avacado">
        </datalist>
     <input type="submit">
 </form>  
Copy the code

Results demonstrate

You can start from here to view demos: html5-tips.net lify. App/datalist/in…

tip

How is it different from the traditional – tag? The Select tag is used to Select one or more items from the options, and you need to browse the list to make the selection. Datalist is an advanced feature with autocomplete support. This means that the Datalist tag can not only be selected, but also entered

Range (the Slider)

Range has a slider that ranges the type of input selected

Code

<form method="post">
    <input 
         type="range" 
         name="range" 
         min="0" 
         max="100" 
         step="1" 
         value=""
         onchange="changeValue(event)"/>
 </form>
 <div class="range">
      <output id="output" name="result">  </output>
 </div> 
Copy the code

Results demonstrate

You can start from here to view demos: html5-tips.net lify. App/range/index…

tip

In HTML5, there’s nothing called sliders

Meter

Use the tag to measure data within a given range.

Code

`<label for="home">/home/atapas</label>
<meter id="home" value="4" min="0" max="10">2 out of 10</meter><br>

<label for="root">/root</label>
<meter id="root" value="0.6">60%</meter><br>`
Copy the code

Results demonstrate

You can start from here to view demos: html5-tips.net lify. App/meter/index…

tip

Do not use the label for progress bars. We have the tag for HTML5.

<label for="file">Downloading progress:</label>
<progress id="file" value="32" max="100"> 32% </progress>
Copy the code

What’s next?

Well, I’m sure I left something useful behind. Please provide comments about this article and your learning of HTML5.

If it works for you, please like/share it and it will attract others. I am passionate about UI/UX and enjoy sharing my knowledge through articles.

The article was published in the wechat public account “Front Sunshine”.