Top 10 Latest Features of HTML

Top 10 Latest Features of HTML

HTML (Hypertext Mark-up Language) was first launched by W3C (World Wide Web Consortium) in 1993 around 26 years ago. HTML5 as the name suggests is the 5th version of HTML which was upgraded on 28 October 2014. This is widely used by web designers to design the Web pages.

Earlier hypertext systems found few less relevant features but with the innovation and development HTML 5 has come up with a few new features that are certainly much easy to adopt in the website designing. In this blog, we will be discussing about the top 10 latest features of HTML that you might not know.

10 Latest Features of HTML are:-

1) Doctype:

Tired of using XHTML doctype? Here you get relief by using <!DOCTYPE html>. And if browsers do not understand the doctype, don’t panic at all !!! It’s renders contains mark-up in standard mode.

2) Quote

Quote is represented by q tag. It has both opening and closing tag like this <q>—–</q>. It is basically used to write short quotations.

To write long quotations <blockquote> tag is used.

Input

<html>
  <p><q>I am a good programmer</q></p>
</html>

Output

3) figure and figcaption Element

Mostly figures are written wit the captions thats why figure and figurecaption tags are used together. figurecaption tag is used inside the figure tag.

For example :

Input

<figure>
  <img src="nature.jpg" alt=nature width="300px">
  <figcaption>Nature at its best. </figcaption>
 </figure>

Output

figure and figcaption

4) Placeholders

Placeholders are used with input tag to indicate that what is to be inserted in the particular input field.

For Example:

Input

<html>
  <input type="text" placeholder="Enter your name here"><br><br>
  <input type="text" placeholder="Enter your phone number here"><br><br>
  <input type="text" placeholder="Enter your gender here">
</html>

Output

5) Required & Range Validation

Required attribute is used inside input tag to indicate that input in the particular field is mandatory.

Input

<html>
  <form>
    <input type="text" placeholder="Enter your name here" required><br><br>
    <input type="submit" name="submit">
  </form>
</html>

Output

Range is also used in input tag to indicate the value of the controls where exact number is not required. Its default value is from 0 10 100.

For Example:

Input

<html>
  <form>
    <p><strong>Volume</strong></p>
    <input type="range" name="Volume" min="0" max="10">
  </form>
</html>

Output

6) The Semantic

Semantics are the tags which define that which part is it of the webpage. In HTML5 the way of using semantics has changed a little bit than it was used in HTML.

Old way (Earlier Versions of HTML) :

<html>
  <div id=”header”>content... </div>
  <div id=”footer”> about company....</div>
</html>

New way (HTML5) :

But now it is easy to use semantic tag names directly, no more div tags required now 🙂

<html>
  <header>
    //header body
  </header>
  <footer>
    //footer body
  </footer>
</html>

Some other semantic tags are: <article>, <aside>, <section>, <address> etc.

7) Audio & Video Support

The best part of this is its <audio> and <video> element. So no more plugin to integrate audio and video in a web page. Just write that simple code to add video and audio.

For audio:

<html>
  <body>
    <audio controls>
      <source src="web.mp3" type="audio/mpeg">
    </audio>
  </body>
</html>

For Video:

<html>
  <body>
    <video controls>
      <source src="web.mp4" type="video/mp4">
    </video>
  </body>
</html>

8) Autofocus

It automatically gets focus on the important part of the page when the page loads.

For Example :

<html>
  <body>
    <input type="text" name="name" placeholder="Enter name" autofocus="on">
  </body>
</html>

9) Editable Content:

content editable element works like its name suggest. End users can edit the text, which comes within this element like:

<html>
  <body>
    <h2>Your hobbies </h2>
      <ul contenteditable="true">
      <li> a </li>
      <li> b </li>
      <li> c </li>
      </ul>
    </body>
</html>

Output

Before Editing:

After Editing:

10) Local Storage

It’s a huge relief for UI developers. Local storage allows you to access everything whatever you type before closing and refreshing the page. Although, not all the browsers support that this feature.

localStorage sets fields on the domain. Even when you close the browser, reopen it, and go back to the site, it remembers all fields in localStorage.”

-QuirksBlog

Summary

In this blog we see the latest top 10 features of HTML. Web Development Institute is considered as the best HTML and CSS Institute in Delhi as they provide the exclusive range of HTML and CSS courses.

Leave a Reply

You must be logged in to post a comment.

Copy link