Hello, reader's Today we will discuss about the HTML5 attributes. Basically attributes are used to define some additional information about the HTML elements. As there are various global and standard attributes used in HTML5.
Here , we will discuss about a new global attribute in HTML5 i.e. Spellcheck attribute which is mostly used in the forms.
Features of HTML5 attributes:-
-
It provides additional information about the element.
-
Some attributes are defined globally and therefore can be easily used on any HTML element.
-
While some other attributes are defined for some particular HTML elements.
-
These are always specified in the start tag in a document.
-
All attributes have a specific name and value assigned to it .
-
These are case insensitive.
Below is an example to show a div element with an attriibute name class included in it .
<div class=”example”> . . . .</div>
The work of spellcheck attribute is to identify, if the HTML element need to have its spelling and grammar checked or not.
It uses the boolean value i.e. true and False to show whether the content is checked or not.
Below in my example, I have taken Input, Textarea, Contenteditable for checking the spelling for the inputed content .Below is the HTML code:-
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Attribute</title>
<style>
h1{
font-size: 45px;
font-weight: bold;
color: red;
}
h2{
font-size: 45px;
font-weight: 500;
color: green;
}
.section{
width: 80%;
}
</style>
</head>
<body>
<div class="container">
<h1>Spellcheck Attribute</h1>
<div class="section">
<h2>Spellcheck=True</h2>
<!-- spellcheck everything! -->
<input type="text" spellcheck="true" style="margin-bottom:2%;" /><br />
<textarea spellcheck="true"></textarea>
<div contenteditable="true" spellcheck="true">Write the content</div>
<h2>Spellcheck=False</h2>
<!-- spellcheck nothing! -->
<input type="text" spellcheck="false" style="margin-bottom:2%;"/><br />
<textarea spellcheck="false"></textarea>
<div contenteditable="true" spellcheck="false">Write the content</div>
</div>
</div>
</body>
</html>
In my example, I have used Contenteditable attribute which specifies if the user want to edit the element's content or not when required.
The syntax used for it is : < element contenteditable = “ true | false”> where true specifies that the content that is entered is editable while false specifies that the content entered is not editable.
Conclusion:-
Hence, The HTML5 attributes are easy to understand and use.
Note:-The latest versions of Safari ,Google Chrome , Mozilla Firefox and Opera all support HTML5 new attributes.
0 Comment(s)