EDUCBA

EDUCBA

MENUMENU
  • Free Tutorials
  • Free Courses
  • Certification Courses
  • 600+ Courses All in One Bundle
  • Login

HTML5 Elements

Home » Software Development » Software Development Tutorials » HTML Tutorial » HTML5 Elements

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 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.

Start Your Free Software Development Course

Web development, programming languages, Software testing & others

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

Popular Course in this category
HTML 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 (5,751 ratings)
Course Price

View Course

Related Courses
Bootstrap Training (2 Courses, 6+ Projects)XML Training (5 Courses, 6+ Projects)CSS Training (9 Courses, 9+ Projects)

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 –

  1. Html5 vs Html4
  2. Html5 New Elements
  3. HTML5 Tags
  4. HTML5 Semantic Elements

HTML 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

Learn More

0 Shares
Share
Tweet
Share
Primary Sidebar
HTML Tutorial
  • HTML5
    • What is HTML5
    • HTML5 Elements
    • Html5 New Elements
    • HTML5 Tags
    • HTML5 Semantics
    • HTML5 Web Workers
    • HTML5 Semantic Elements
  • Basic
    • Introduction to HTML
    • What is HTML
    • HTML stands for
    • Advantages of HTML
    • Applications of HTML
    • Career In HTML
    • How HTML Works
    • Versions of Html
    • Symbols in HTML
    • HTML Commands
    • HTML Events
    • HTML Fonts Styles
    • HTML Form Controls
    • HTML Form Elements
    • HTML Frames
    • HTML Layout
    • HTML Entities
    • HTML List Styles
    • HTML Style Sheets
    • HTML Text Formatting Tags
    • What is XHTML?
    • HTML Section vs Div
    • DHTML
    • Cheat Sheet HTML
  • Attributes
    • HTML Attributes
    • HTML Event Attributes
    • HTML Style Attribute
    • HTML Text Attributes
    • HTML Block Elements
    • HTML Inline-Block
    • Block Level Elements in HTML
    • HTML Form Attribute
    • HTML Padding vs Margin
  • Tags
    • Types of Tags in HTML
    • Basic HTML Tags
    • HTML Format Tags
    • HTML object Tag
    • HTML Image Tags
    • HTML Table Tags
    • Meta Tag in HTML
    • Caption Tag in HTML
    • Aside Tag in HTML
    • Style Tag in HTML
    • Cite Tag in HTML
    • HTML Legend Tag
    • Quotation Tag in HTML
    • Datalist in HTML
    • map Tag in HTML
    • HTML Marquee Tag
    • Footer Tag in HTML
    • HTML nav Tag
    • HTML figure Tag
    • Option Tag in HTML
    • Inline Tags in HTML
    • Pre Tag in HTML
    • Span Tag in HTML
    • HTML samp Tag
    • SUP Tag in HTML
    • Div Tag in HTML
    • HTML tr Tag
    • HTML abbr Tag
    • HTML Address Tag
    • Small Tag in HTML
    • PHP Tag in HTML
    • Canvas Tag in HTML
    • Font Tag in HTML
    • Select Tag in HTML
    • HTML Picture Tag
    • Fieldset Tag in HTML
    • HTML Code Tag
    • kbd Tag in HTML
    • TextArea Tag in HTML
    • HTML Article Tag
    • HTML Button Tag
    • HTML time Tag
    • THead Tag in HTML
    • HTML frameset Tag
    • HTML checkbox Tag
    • Address Tag in HTML
    • Area Tag in HTML
    • HTML Strike Tag
    • HTML section Tag
    • HTML Umlaute
    • Frame Tag in HTML
    • tfoot in HTML
    • Embed Tag in HTML
    • href tag in HTML
    • Alt Tag in HTML
    • HTML Audio Tag
  • Color
    • HTML Colors 
    • RGB Color Model
    • Color Name in HTML
    • HTML Color Picker
    • Scrollbar Color
  • Advance
    • Create Tables in HTML
    • Drag and Drop in HTML
    • Dropdown List in HTML
    • HTML Align Center
    • HTML Display Block
    • HTML Blocks
    • HTML Canvas
    • HTML SVG
    • HTML Text Editors
    • HTML Text Link
    • HTML Text Decoration
    • HTML URL Encoding
    • Iframes in HTML
    • HTML Tooltip
    • HTML Reset Button
    • HTML Hide Element
    • Image Link in HTML
    • Web Templates HTML
    • HTML Ordered List
    • HTML Unordered List
    • HTML Description List
    • HTML Form Validation
    • HTML Form Action
    • Registration Form in HTML
    • HTML Justify Text
    • Date in HTML
    • Vertical Table HTML
    • DOCTYPE HTML
    • Moving Text in HTML
    • Scrollbar in HTML Table
    • Responsive in HTML
    • HTML Inline-Style
    • HTML Progress Bar
    • HTML Colspan
    • HTML Favicon
    • HTML margin-left
    • Combobox in HTML
    • HTML Table Background
    • Table Without Border in HTML
    • Nested Table in HTML
    • Table Border in HTML
    • HTML onclick Button
    • HTML Image Padding
    • HTML Padding
    • HTML Border Style
    • HTML Float Left
    • File Path in HTML
    • HTML Geolocation
    • Linking Pages in HTML
    • Embed PHP in HTML
    • How to Add CSS in HTML?
    • Design Web Page in HTML
    • HTML Schriftart
    • Cursor in HTML
    • Scrollbar in HTML
    • HTML Sonderzeichen
    • HTML Search Bar
  • Interview Questions
    • HTML interview Questions
    • HTML5 Interview Questions And Answers

Related Courses

Online HTML Course

Bootstrap Training Course

XML Training Course

CSS Training Course

Footer
About Us
  • Blog
  • Who is EDUCBA?
  • Sign Up
  • Corporate Training
  • Certificate from Top Institutions
  • Contact Us
  • Verifiable Certificate
  • Reviews
  • Terms and Conditions
  • Privacy Policy
  •  
Apps
  • iPhone & iPad
  • Android
Resources
  • Free Courses
  • Java Tutorials
  • Python Tutorials
  • All Tutorials
Certification Courses
  • All Courses
  • Software Development Course - All in One Bundle
  • Become a Python Developer
  • Java Course
  • Become a Selenium Automation Tester
  • Become an IoT Developer
  • ASP.NET Course
  • VB.NET Course
  • PHP Course

© 2020 - EDUCBA. ALL RIGHTS RESERVED. THE CERTIFICATION NAMES ARE THE TRADEMARKS OF THEIR RESPECTIVE OWNERS.

EDUCBA
Free Software Development Course

Web development, programming languages, Software testing & others

*Please provide your correct email id. Login details for this Free course will be emailed to you
Book Your One Instructor : One Learner Free Class

Let’s Get Started

This website or its third-party tools use cookies, which are necessary to its functioning and required to achieve the purposes illustrated in the cookie policy. By closing this banner, scrolling this page, clicking a link or continuing to browse otherwise, you agree to our Privacy Policy

EDUCBA

*Please provide your correct email id. Login details for this Free course will be emailed to you
EDUCBA Login

Forgot Password?

EDUCBA
Free Software Development Course

Web development, programming languages, Software testing & others

*Please provide your correct email id. Login details for this Free course will be emailed to you

Special Offer - HTML Training (12 Courses, 19+ Projects, 4 Quizzes) Learn More