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
-
What is HTML?
HyperText Markup Language(HTML) is used to design web pages. It is a combination of Markup and HyperText Language.
-
When was HTML5 released?
HTML5 was initially released on 22nd January 2008 by WHATWG(Web Hypertext Application Technology Working Group).
-
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.
-
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.
-
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.