Table of contents
1.
Introduction
2.
Features
3.
Added Tags
4.
Advantages
5.
Disadvantages
6.
FAQs
7.
Key Takeaways
Last Updated: Mar 27, 2024

HTML5 Introduction

Author Shaurya Singhal
2 upvotes
Career growth poll
Do you think IIT Guwahati certified course can help you in your career?

Introduction

HyperText Markup Language(HTML) is used to design web pages. It is a combination of Markup and HyperText Language. A markup language is used to determine the text document within the tag, describing the structure of web pages. In contrast, we use HyperText to create a link between web pages. HTML5 is the currently used version of HTML, and its also the most famous version of HTML, providing the developers with unique features and advantages over the previous versions.

Features

HTML5 has provided the developers with a lot of new features.

  • HTML5 provided the feature of graphic elements using vector tags.
  • HTML5 provided the concept of geolocation services, where the location of the client can be made available.
  • Developers can store the data offline using SQL databases.
  • Developers can create various shapes like triangles, squares, etc., using HTML5.
  • HTML5 automatically handles incorrect syntax and doesn't display it on the website.
  • HTML5 introduced multimedia features using audio and video tags.
  • Developers can add a header and footer section to the web page using header and footer tags.
  • HTML5 provides easy DOCTYPE declaration and character encoding.

Added Tags

A lot of new tags are added in HTML5. Here are a few of them,

  • <article>: The article tag is used to describe an article. The content inside a <article> tag is independent of the other content on the website.
<!DOCTYPE html>
<html>
<body>
<h1>Articles</h1>
<article>
  <h2>1st Article</h2>
  <p>This is our first article</p>
</article>
<article>
  <h2>2nd Article</h2>
  <p>This is our second article.</p>
</article>
</body>
</html>

 

Output

  • <figure>: The figure tag is used to add content like photos, codes, or illustrations on the webpage. 
  • <figcaption>: This tag is used to add a caption to the <figure> tag on the webpage.
     
<!DOCTYPE html>
<html>
<body>
<h1>Figure and Fig Caption</h1>
<figure>
  <img src="pic_trulli.jpg">
  <figcaption>Trulli, Italy.</figcaption>
</figure>
</body>
</html>

 

Output

  • <header>: The header tag is used to add a header to the webpage. The header section contains the necessary heading or the brand logo and other necessary links.
  • <footer>: The footer contains all the author and copyright information related to the website. It also includes social media handles.
     
<!DOCTYPE html>
<html>
<body>
<header style="text-align:center">
<h2>Header</h2>
    <p style="text-align:right">Author: Shaurya Singhal</p>
</header>
<footer style="text-align:center">
<h2>Footer</h2>
    <p >Copyright<p>
    <a href="mailto:ninja@example.com" >ninja@example.com</a>
</footer>
</body>
</html>

 

Output

  • <mark>: The mark tag is used to highlight an important part of the paragraph.
  • <section>: The section tag is used to divide the code into different sections, which can be later targeted from the navigation bar for user convenience.
  • <nav>The nav tag adds the navigation bar to the website. Links for important sections are provided in the navigation bar for maneuverability.
  • <details>: It is used to hide detailed information about a subheading. The user can choose to drop down the panel and view the details.
     
<!DOCTYPE html>
<html>
<body>
<h1>Details element</h1>
<details>
  <summary>Click on the arrow</summary>
  <p>This text is hidden from the user and will be <mark>displayed</mark> when the arrow is pressed.</p>
</details>
</body>
</html>

 

Output

  • <datalist>It provides the user with an autocomplete feature on the web page. It is used with the input tag for a better user experience.
  • <output>: Any calculation performed at the client-side can be displayed on the HTML page using the output tag.
  • <svg>: SVG or Scalable Vector Graphics tag is used to create custom graphical figures.
     
<!DOCTYPE html>
<html>
<body>
<h1>SVG</h1>
<svg width="400" height="180">
  <rect x="50" y="20" rx="20" ry="20" width="150" height="150"
  style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
</svg>
</body>
</html>

 

Output

  • <canvas>: This tag is used to draw graphics for the webpage using Javascript.
  • <video>: This HTML tag is used to add video content to the webpage.
  • <audio>: This tag is used to add audio tracks to the webpage.
  • <source>: The source tag is used to define the source for the audio and video track.
     
<!DOCTYPE html>
<html>
<body>
<h1>Audio Tag</h1>
<audio controls>
  <source src="horse.mp3" type="audio/mpeg">
</audio>
</body>
</html>

 

Output

Apart from adding a lot of new tags, a few of the tags from the previous version were removed from HTML5. For example, 

  • <acronym>
  • <basefont> 
  • <big> 
  • <center> 
  • <dir> 
  • <font> 
  • <frame>
  • <isindex> 
  • <strike>
  • <tt> 
  • <applet>

Advantages

HTML5 is a potent tool, and some of its advantages are,

  • It is very device-friendly and is compatible with all devices.
  • It is effortless to use and can be implemented very conveniently.
  • HTML5, integrated with CSS and JavaScript, is used to build user-friendly and beautiful websites.

Disadvantages

Apart from all the advantages, HTML5 has a few disadvantages as well,

  • HTML5 codes can be pretty lengthy and are very tedious and time-consuming to write.
  • HTML5 is only supported by the latest browsers like chrome, firefox, etc.

FAQs

  1. What is HTML?
    HyperText Markup Language(HTML) is used to design web pages. It is a combination of Markup and HyperText Language.
     
  2. When was HTML5 released?
    HTML5 was initially released on 22nd January 2008 by WHATWG(Web Hypertext Application Technology Working Group).
     
  3. How can we highlight text using HTML5?
    We can highlight any text using the mark tag in HTML5. The Highlight tag can be added between the p tag to add more value to a word or a sentence.
     
  4. How can we add a video or audio element using HTML5?
    A video or audio element can be added using the video or audio tag, respectively. We then have to pass the source of the audio or the video that needs to be added to the webpage using the source tag.
     
  5. Does internet explorer support HTML5?
    Not all the versions of internet explorer support HTML5 efficiently. Version 9 and 11 are the two versions that support HTML5 properly. Similarly, all the recent versions of Chrome and Firefox support HTML5.

Key Takeaways

This Blog covered all the necessary points about HTML5 with the required code snippets. This Blog listed all the essential facts about HTML5, including its advantages and disadvantages.

Don’t stop here; check out Coding Ninjas for more unique courses and guided paths. Also, try Coding Ninjas Studio for more exciting articles, interview experiences, and fantastic Data Structures and Algorithms problems.

Live masterclass