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 a basic markup language used to make any web pages that further comprise to form websites. HTML had evolved so much from the initial stage when it was formed
W3C and WHATWG initially developed HTML. 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, their 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 the 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, please copy the above code snippet and paste it into the HTML file. Now, open the file in the browser
<output> – This tag represents the output of any calculation which is computed on an HTML file
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, please copy the above code snippet and paste it into 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, please copy the above code snippet and paste it into the HTML file. Now, open the file in the 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, please copy the above code snippet and paste it into the HTML file. Now, open the file in the browser.
12 Online Courses | 19 Hands-on Projects| 89+ Hours| Verifiable Certificate of Completion
4.5
View Course
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, please copy the above code snippet and paste it into the HTML file. Now, open the file in the 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, please copy the above code snippet and paste it into the HTML file. Now, open the file in the 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, please copy the above code snippet and paste it in html file. Now, open the file in the 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, please copy the above code snippet and paste it into the HTML file. Now, open the file in the browser.
8) <input type=” email”> – This element helps to validate whether the value inserted by the user is a valid email. It shows an 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, please copy the above code snippet and paste it in html file. Now, open the file in the 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 provide a better interface to the user and provide several validations on the user machine itself.
Recommended Articles
This has been a guide to HTML5 Elements. Here we discuss the introduction, HTML tags, their uses, and their corresponding examples. You can also go through our other suggested articles to learn more –
