EDUCBA

Home Software Development Software Development Tutorials HTML Tutorial HTML5 Elements

HTML5 Elements

By Priya PedamkarPriya Pedamkar

HTML5 Elements

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

Start Your Free Software Development Course

Web development, programming languages, Software testing & others

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.

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 –

  1. Html5 vs Html4
  2. Html5 New Elements
  3. HTML5 Tags
  4. HTML5 Semantic Elements
0 Shares
Share
Tweet
Share
quiz