Kamakshi

Frontend Developer Software Developer || Fascinated by tech trends || Building usable systems that work on web and mobile.

HTML5 New Features

October 21, 2021

What is HTML 5?

HTML 5 is the latest specification of the HTML language and represented a major break from previous markup practices. The purpose of the many, profound changes to the language was to standardize the many new ways in which developers were using it, as well as to encourage a single set of best practices with regards to web development.

Most of the individual changes are a result of larger objectives in the design of the language. These objectives primarily include:

  • Encouraging semantic (meaningful) markup.
  • Separating design from content.
  • Promoting accessibility and design responsiveness.
  • Reducing the overlap between HTML, CSS, and JavaScript.
  • Supporting rich media experiences while eliminating the need for plugins such as Flash or Java.

HTML 5 Features

HTML 5 recognizes that Web pages have a structure, just like books have a structure or other XML documents. In general, Web pages have navigation, body content, and sidebar content plus headers, footers, and other features. And HTML 5 has created tags to support those elements of the page.

  • To define sections of pages
  • Defines the header of a page
  • Defines the footer of a page
  • Defines the navigation on a page
  • Defines the article or primary content on a page
  • Defines extra content like a sidebar on a page
  • Defines images that annotate an article

HTML 5 New Dynamic Pages Support

HTML 5 was developed to help Web application developers, so there are a lot of new features to make it easy to create dynamic HTML pages:

  • Context menus — HTML 5 will support the creation and use of context menus within Web pages and applications
  • href is not required on a tag — this allows you to use the a tag with scripts and in Web applications without needing a place to send that anchor
  • async attribute — This is added to the script tag to tell the browser that the script should be loaded asynchronously so that it doesn’t slow down the load and display of the rest of the page.
  • Provides details about an element. This would be like tool tips in non-Web applications.

HTML 5 New Form Types

HTML 5 supports all the standard form input types, but it adds a few more:

  • datetime
  • datetime-local
  • date
  • month
  • week
  • time
  • number
  • range
  • email
  • url

HTML 5 Removes Some Elements

There are also some elements in HTML 4 that will no longer be supported by HTML 5. Most are already deprecated, and so shouldn’t be surprising, but a few might be difficult:

  • acronym
  • applet
  • basefont
  • big
  • center
  • dir
  • font
  • frame
  • frameset
  • isindex
  • noframes
  • noscript
  • s
  • strike
  • tt
  • u

What Does HTML5 Do?

  • Audio Video
  1. Audio is used to define an audio of the section. 
  2. Video is used to define the video section in the document.

Example:-

<audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
</audio>
<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
</video>
  • Article Header Footer
  1. Article is used to define an article in a document.
  2. Header is used for defining the header in an html document.
  3. Footer is used to define the footer for a document or section.

Example:-

<article>
  <header>
    <h1>A heading here</h1>
    <p>Posted by John Doe</p>
    <p>Some additional information here</p>
  </header>
<footer>
  <p>Lorem Ipsum dolor sit amet....</p>
</footer>
</article>
  • Figure and Figcaption:-

The figure tag is used to define the self-contained content. We bound the image tag in that also figcaption tag which represents the caption of a figure. 

Example:-

<figure>
<img src="pic_trulli.jpg" alt="Trulli" style="width:100%">
<figcaption>Fig.1 - Trulli, Puglia, Italy.</figcaption>
</figure>
  • Nav

It defines the navigation link we bound the link in anchor tags in section.

Example:-

<nav>
  <a href="/html/">HTML</a>
  <a href="/css/">CSS</a>
  <a href="/js/">JavaScript</a>
  <a href="/python/">Python</a>
</nav>
  • Progress 

It represents the progress of a task.

Example:-

<div class="w3-border">
<div class="w3-grey"	 style="height:24px;width:20%"></div>
</div>
  • Time attribute

It defines the date and time.

<p>We open at <time>10:00</time> every morning.</p>
<p>I have a date on <time datetime="2022-02-14 20:00">Valentines day</time>.</p>
  • Email attribute:

It says the data you want to write it has email type

Example:-

<label for="email">Enter your email:</label>
<input type="email" id="email" name="email">
  • Detail and Summary attribute:

Defines additional details that the user can view and hide. Summary defines a visible heading for a details element.

Example:-

<details>
  <summary>Copyright 1999-2018.</summary>
  <p> - by Refsnes Data. All Rights Reserved.</p>
  <p>All content and graphics on this web site are the property of the company Refsnes Data.</p>
</details>
  • Vector Graphics

SVG stands for Scalable Vector Graphics. It basically defines vector-based graphics in XML format.SVG graphics do NOT lose any quality if they are zoomed or resized. Every element and every attribute in SVG files can be animated.

Example:-

<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
  • Storage:
    In the case of HTML, we can use the browser as the temporary storage whereas, in the case of HTML5, application cache, web SQL database, and web storage is used.
  • Ease of use
    While HTML5 does have risks like constant updates, it is generally easy to keep up with the changes & updates because of simpler syntax as compared to other versions of HTML.

References:

Tags:

Share

You may also like...