Introduction to HTML5 Elements
We are mostly aware of web sites. A web site is simply a collection of web pages For creating any web page we require. An HTML is the element that is responsible for making any web page. HTML stands for HyperText Markup Language. It is basic markup language that is used to make any web pages which further comprises to form websites. HTML has evolved so much from the initial stage when it was formed
HTML was initially developed by W3C and WHATWG. It was initially developed in 1993. W3C mainly checks for standards of Html and other stuff. HTML has evolved a lot from the initial version of 1.0 to the version of 5 HTML5 has lots of new HTML tags.
HTML tags, there Uses and Examples
Below are some tags of HTML with their uses and examples are as follows –
New elements in HTML5
1)<datalist> – It is a new form element in HTML5 . It helps to implement a feature of autocomplete where an input box appears where user can insert text to see elements in the list
Example:
<!DOCTYPE html>
<html>
<body>
<form>
<input list="favoriteCusine" name="favoriteCusine">
<datalist id="favoriteCusine">
<option value="Noodles">
<option value="Continental">
<option value="Thai">
<option value="Asia-Pacific">
<option value="Safari">
</datalist>
</form>
</body>
</html>
Now, copy the above code snippet and paste it in the HTML file. Now, open the file in browser
<output> – This tag represents the output of any calculation which is computed on HTML file
4.5 (3,987 ratings)
View Course
Example
<!DOCTYPE html>
<html>
<body>
<form oninput="x.value=parseInt(minInput.value)+parseInt(maxInput.value)">0
<input type="range" id="minInput" value="50">100
+<input type="number" id="maxInput" value="50">
=<output name="x" for="minInput maxInput"></output>
</form>
</body>
</html>
Now, copy the above code snippet and paste it in the HTML file. Now, open the file in browse
2) <input type=” text”> – This element is used to receive input from the user. The text entered by the user is generally text form
Example
<!DOCTYPE html>
<html>
<body>
<form>
<div>
<span>Favorite Football Player:</span>
<span><input type="text" name="fPlayer"></span>
</div>
<div>
<span>Favorite Football Team:</span>
<span><input type="text" name="fTeam"></span>
</div>
<input type="submit">
</form>
</body>
</html>
Now, copy the above code snippet and paste it in the HTML file. Now, open the file in browser
3) <input type=” password”> – This element is used to receive a password from the user.
Example
<!DOCTYPE html>
<html>
<body>
<form>
<div>
<span>User name</span>
<span><input type="text" name="uName"></span>
</div>
<div>
<span>Password:</span>
<span><input type="password" name="pwdField"></span>
</div>
<input type="submit">
</form>
</body>
</html>
Now, copy the above code snippet and paste it in the HTML file. Now, open the file in browser
4) <input type=” submit”> – This tag renders a submit button. This button is used to submit the form
Example – In the below example update action value with the php file path
<!DOCTYPE html>
<html>
<body>
<form action="./dummy.php">
<div>
<span>Favorite Football Player:</span>
<span><input type="text" name="fPlayer"></span>
</div>
<div>
<span>Favorite Football Team:</span>
<span><input type="text" name="fTeam"></span>
</div>
<input type="submit">
</form>
</body>
</html>
Now, copy the above code snippet and paste it in the HTML file. Now, open the file in browser
5) <input type=” radio”> – This element helps to receive one input from the user from the available multiple items. User can select any of the items available in the list
Example
<!DOCTYPE html>
<html>
<body>
<h2>Radio Buttons for faavorite cusine</h2>
<form>
<input type="radio" name="cusine" value="asian">Asian<br>
<input type="radio" name="cusine" value="thai">Thai<br>
<input type="radio" name="cusine" value="japanese">Japanese<br><br>
<input type="submit">
</form>
</body>
</html>
Now, copy the above code snippet and paste it in the HTML file. Now, open the file in browser
6) <input type=” checkbox”> – This element helps to receive multiple inputs from the user from the available multiple items. User can select any number of the items available in the list
Example
<!DOCTYPE html>
<html>
<body>
<h2>Checkbox for faavorite cusine</h2>
<form>
<input type="checkbox" name="cusine" value="asian">Asian<br>
<input type="checkbox" name="cusine" value="thai">Thai<br>
<input type="checkbox" name="cusine" value="japanese">Japanese<br><br>
<input type="submit">
</form>
</body>
</html>
Now, copy the above code snippet and paste it in html file. Now, open the file in browser
7) HTMLput type=” number”> – This element helps to numeric value from the user. User can insert an only numeric value into the field
Example
<!DOCTYPE html>
<html>
<body>
<h2>Number fields example</h2>
<form>
Enter number
<input type="number" name="num">
<input type="submit">
</form>
</body>
</html>
Now, copy the above code snippet and paste it in the HTML file. Now, open the file in browser
8) <input type=” email”> – This element helps to validate whether the value inserted by the user is a valid email. It shows error on submit if the email is not valid
Example
<!DOCTYPE html>
<html>
<body>
<h2>Number fields example</h2>
<form>
Enter valid email id
<input type="email" name="emailField">
<input type="submit">
</form>
</body>
</html>
Now, copy the above code snippet and paste it in html file. Now, open the file in browser
Apart from this, HTML5 has lots of new elements added to it. Some of them are –
- range
- URL
- tel
- audio
- embed
Apart from HTML elements. It has also added new semantic elements. Some of the important semantic elements are-
- <article>
- <figcaption>
- <footer>
- <section>
- <mark>
- <figure>
- <aside>
- <main>
- <nav>
- <details>
- <header>
Conclusion
There are lots of tags of HTML% which is being developed. From an initial version of 1.0 to the latest version of 5.2, HTML has developed a lot. These tags help to provide a better interface to the user as well as is provides several validations on the user machine itself.
Recommended Articles
This has been a guide to HTML5 Elements. Here we discuss the introduction, HTML tags, its uses, and their corresponding examples. You can also go through our other suggested articles to learn more –
