Today we are going to discuss 5 useful html5 features Part 1. 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.
<em></em>
Html <em> tag is used to formatting texts, used to special importance to text or statements. Example of <em> tag is below
<p> Hello <em>Harikrishnan</em>. Welcome to my blog.</p>
<wbr>
The wbr stands Word Break Opportunity. This tag doesn’t require an end tag. It is very difficult in html to display a long word for example.
With wbr tag the output looks like
The syntax of the wbr tag looks like below
<!DOCTYPE html>
<html>
<body>
<p>veryveryveryveryveryveryveryveryveryveryveryveryveryveryveryvery<wbr>veryveryveryverygoodgoodgoodgoodgoodgoodgoodgoodgoodgoodgoodgoodgoodgoodplaceswhenthebrowserwindowisresized.<wbr><b>veryveryveryveryveryveryveryveryveryveryveryveryveryveryveryvery<wbr>veryveryveryverygoodgoodgoodgoodgoodgoodgoodgoodgoodgoodgoodgoodgoodgoodplaceswhenthebrowserwindowisresized</b></p>
</body>
</html>
<param>
The <param> tag is used inside the <object> tag to provide parameters.
Any number of <param> elements may appear inside an <object> element, but must be placed at the start of the content.
<object data="">
<param name="controller" value="true">
</object>
<details>
The <details> tag is used to specify the additional details on a web page, that user can open and view details.
<!DOCTYPE html>
<html>
<head>
<title>Details Tag Demo</title>
</head>
<body>
<details>
<summary>Click to see details details tag demo</summary>
<p>Detailed information is here .</p>
</details>
</body>
</html>
<map>
<map> tag is used for images having clickable areas. Each of this clickable area will redirect to different location.
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
</head>
<body>
<map name="infographic">
<area shape="poly" coords="130,147,200,107,254,219,130,228"
href="https://harikrishnanrnair.blogspot.com/2022/07/install-bootstrap-in-reactjs.html"
target="_blank" alt="React" />
<area shape="poly" coords="130,147,130,228,6,219,59,107"
href="https://harikrishnanrnair.blogspot.com/2018/09/laravel-curl-request-example-using.html"
target="_blank" alt="Laravel" />
<area shape="poly" coords="130,147,200,107,130,4,59,107"
href="https://harikrishnanrnair.blogspot.com/2020/12/angular-routing.html"
target="_blank" alt="Angular" />
</map>
<img usemap="#infographic" src="https://drive.google.com/file/d/1O84M_tsLtYrWWCl4u7s7lTNQV-JYjqos/view?usp=sharing" alt="MDN infographic" />
</body>
</html>
Hence I am concluding this part, I will be back with next set of tags on part2
Comments
Post a Comment