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 Popular Course in this categoryHTML Training (12 Courses, 19+ Projects, 4 Quizzes)12 Online Courses | 19 Hands-on Projects | 89+ Hours | Verifiable Certificate of Completion | Lifetime Access | | 4 Quizzes with Solutions
4.5 (6,492 ratings)Course Price
₹6999 ₹41999
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, 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.

Introduction to HTML5 Elements