5 Useful HTML5 Features, which you are not much aware Part 2


Today we are going to discuss 5 useful html5 features in Part 2. The HyperText Markup Language or HTML is the standard markup language for documents designed to be displayed in a web browser. It can be assisted by technologies such as Cascading Style Sheets and scripting languages such as JavaScript. I found this very interesting once I saw this. 


1

var

<var></var>

2

range

<input type=”range”>

3

contenteditable

<element contenteditable =”true|false”>

4

meter

<meter></meter>

5

samp

<samp></samp>


  1. <var>

HTML <var> tag is used to specify the variable in a mathematical equation. The content of this tag is displayed in an italic format. 


<!DOCTYPE html>

<html>

<body>

<p>The area of a triangle is: 1/2 x <var>b</var> x <var>h</var>, where <var>b</var> is the base, and <var>h</var> is the height.</p>

</body>

</html>


  1. range

The <input> tag having range value in its attribute. 

Here is an example

 

            <!DOCTYPE html>

<html>

<body>

  <h1>Range Field</h1>

  <label for="vol">Volume (between 100 and 1000):</label>

  <input type="range" id="vol" name="vol" min="0" max="100">

</body>

</html>


  1. contenteditable

The contenteditable is an attribute which specifies the element/content can be editable by the user. 

 

<!DOCTYPE html>

<html>

<body>

<p contenteditable="true">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>

</body>

</html>


  1. <meter></meter>

HTML <meter> tag, which is used to measure the data in some range  or a fractional value.

 

<!DOCTYPE html>

<html>

<body>

<h1>The meter Tag</h1>

<label for="usage_h">usage h:</label>

<meter id="usage_h" value="2" min="0" max="25">2 out of 25</meter><br>

</body>

</html>


  1. <samp>

HTML <samp> tag used to display sample computer program output

 

<!DOCTYPE html>

<html>

<body>

<h1>The samp HTML TAG </h1>

<samp>A computer science program</samp>  

</body>

</html>


Hence I am concluding this part 2, I will be back with next set of tags on part3

Comments