Python JavaScript HTML CSS C Java C# / .NET C++ TypeScript Dart

HTML5 tutorial

The HTML5 guide offers comprehensive information on over 40 HTML elements such as audio, video, header, footer, data, datalist, and article. This instructional resource caters to both novice and experienced individuals in the field. HTML5 stands as the fifth and latest significant iteration of the HTML protocol, officially ratified by the W3C in 2014, and it progresses further under the WHATWG Living Standard.

Here, you will get some brand new features that will make HTML much easier. These newly introduced features make your website layout clearer to both website designers and users. There are some elements like <header>, <footer>, <nav>, and <article> that define the layout of a website.

Why use HTML5?

  • ✅ The advanced features present in HTML5 help to make it user-friendly, interactive, and easy, particularly for designers and developers.
  • ✅ It enables you to view a video and audio file in the browser itself.
  • ✅ It can be used to draw on a canvas to create animations, games, or graphs.
  • ✅ It helps in making superior designs and developing offline web applications.
  • ✅ It has the in-built functions that you would otherwise need to code in JavaScript .
  • ✅ The greatest need to use HTML5 is that it is stable in the long term and supported across all browsers based on W3C standards.

    • HTML 5 Example

Let's see a simple example of HTML5.

Example

Example

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="UTF-8">

    <title>HTML5 Example</title>

  </head>

  <body>

    <h1>Write Your First Heading</h1>

    <p>Write Your First Paragraph.</p>

  </body>

</html>

Explanation

<!DOCTYPE html> tells the browser that the page is written in HTML5. A heading is defined by the use of the <h1> tag and a paragraph by the use of the <p> tag . They are the components of the simplest page on HTML5.

New Semantic Elements in HTML5

The introduction of HTML5 has led to the creation of fresh semantic tags, which play a vital role in enhancing the significance and accessibility of web pages. These tags help browsers, developers, and search engines better understand the structure of a webpage.

Some of the most commonly used semantic tags are:

  • ✅ <header> - Represents the header section of a page or article.
  • ✅ <nav> - Defines a navigation menu.
  • ✅ <section> - Groups related content into a thematic section.
  • ✅ <article> - Represents an independent piece of content.
  • ✅ <aside> - Contains side information or related content.
  • ✅ <footer> - Defines the footer of a page or section.

    • Multimedia Elements (Audio and Video)

The introduction of HTML5 also facilitated the integration of multimedia content without the need for third-party applications like Flash.

Example

Example

<video controls width="400">

  <source src="https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image" type="video/mp4">

  Your browser does not support the video tag.

</video>

<br> <br>

<audio controls>

  <source src="https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image" type="audio/mpeg">

  Your browser does not support the audio element.

</audio>

Explanation

The <video> and <audio> tags allow direct embedding of media files into a webpage . The controls attribute displays default player controls, while <source> specifies the media file path and format. If the browser doesn't support the tag, fallback text is displayed.

HTML5 Form Enhancements

HTML5 has expanded the range of input types and attributes to enhance the usability of forms and reduce the reliance on JavaScript for validation purposes.

Some of the new input types include email, URL, telephone number, numeric value, range, color selection, date, time, and search queries.

Example

Example

<!DOCTYPE html>

<html>

  <body>

    <h2>HTML5 Form Example</h2>

    <form>

      <label>Email:</label>

      <input type="email" required><br><br>



      <label>Birthday:</label>

      <input type="date"><br><br>



      <label>Favorite Colour:</label>

      <input type="color"><br><br>



      <label>Rating (1-10):</label>

      <input type="range" min="1" max="10"><br><br>



      <input type="submit" value="Submit">

    </form>

  </body>

</html>

Explanation

HTML5 introduces several new input types like email, date, color, and range, enhancing user interaction and validation. By using the required attribute, the email input field is made compulsory, ensuring that users fill it out before submitting the form.

HTML5 APIs

Other than new tags, HTML5 also comes with a number of JavaScript APIs that enable developers to make very powerful and interactive applications:

  • ✅ Canvas API - Used to draw graphics, charts, and animations.
  • ✅ Geolocation API - Retrieves the user's location (with permission).
  • ✅ Web Storage API - Provides localStorage and sessionStorage for storing data locally in the browser.
  • ✅ Offline Web Apps (Service Workers) - Enable web apps to work offline.
  • ✅ Drag and Drop API - Adds drag-and-drop functionality without complex code.

    • Accessibility in HTML5

HTML5 improves accessibility by introducing semantic elements that provide more meaningful information to screen readers and assistive technologies. Elements such as nav, main, and article help define the purpose of content, leading to websites that are easier to navigate and more inclusive.

Supporting Browsers

Element Chrome Edge Firefox Opera Safari
HTML5 Tags Yes Yes Yes Yes Yes

Conclusion

Contemporary web development relies on HTML5, enhancing web pages to be more engaging, user-friendly, and optimized. By incorporating semantic tags, multimedia capabilities, and robust APIs, HTML5 bridges the divide between traditional websites and advanced web applications.

Input Required

This code uses input(). Please provide values below: