•
•0

Top New Features of HTML5 with Examples

ADMEC Multimedia > Web Design > Top New Features of HTML5 with Examples

Technology is growing exponentially. This enterprise moves fast—definitely fast! if you’re no longer cautious, you will be left in its dirt. So, in case you’re feeling a chunk overwhelmed with the coming adjustments/ updates in HTML5, use this HTML new features blog as a primer of the stuff you ought to realize.

A Basic Intro to HTML

HTML is the basic language that should be well known to all the beginners as well as professionals to build a perfect structure of the webpage. It helps in building a website that is light in weight but yet provides all the necessary features that are required.

Earlier version of HTML5: HTML4

Earlier the version that was in use was HTML4 which was too complicated and it was not a child’s play to design a perfect interactive website using it. But with the introduction of HTML5 now new opportunities arose and made the life of coders better. It has made the web life much more flexible. All the new features that have been introduced does not include JS. These inventions have changed the perspective of coders towards HTML.

HTML5 is introduced with new features. This version was released in October of 2014. 

Benefits of Upcoming HTML Features

With invent of features in HTML5 it is not only possible to create better static websites but we can also create dynamic websites. Features such as audio, video, animations etc can be added to the webpage now without the use of JS.

Along with this it is possible to make our website responsive without the use of third party plugs. It is the need of an hour as equal number of users are assessing the website from desktop as that are from the smartphones.

For a good start, get assistance from ADMEC Multimedia Institute by joining advanced HTML & CSS course that will impart you live project training on primary aspects, which includes customization of HTML5 templates a latest version of the HTML language.

New features of HTML5

1. Video and Audio

Video and audio are the new tags which allow to embed a video in the website. YouTube also declare video embed by giving the code to embed for their videos. It helps the web to be more involved with multimedia. A new tag is also available in HTML5 and that is audio tag. Which is used to embed any audion in the web.

Example of using Video tag

<video controls preload>
    <source src="cohagenPhoneCall.ogv" type="video/ogg; codecs='vorbis, theora'" />
    <source src="cohagenPhoneCall.mp4" type="video/mp4; 'codecs='avc1.42E01E, mp4a.40.2'" />
    <p> Your browser is old. <a href="cohagenPhoneCall.mp4">Download this video instead.</a> </p>
</video>

Example of using Audio tag

<audio autoplay="autoplay" controls="controls">
 <source src="file.ogg" />
    <source src="file.mp3" />
    <a>Download this file.</a>
</audio> 

2. nav

The nav element is used for the part of a internet site that links to different pages at the website. The hyperlinks can be organized a number of approaches. below, the hyperlinks are displayed inside paragraph factors. An unordered list can also be used.

<nav>
  <a href="/html/">HTML</a>
  <a href="/css/">CSS</a>
  <a href="/js/">JavaScript</a>
  <a href="/jquery/">jQuery</a>
</nav>

3. header

The header element can be used to institution collectively introductory factors on a website, such as a business enterprise brand, navigation objects, and occasionally, a search form.

<header>
  <img src="company-logo.png">
  <nav>
    <p><a href="login.html">Log In</a></p>
    <p><a href="signup.html">Sign Up</a></p>
    <p><a href="contact.html">Contact Us</a></p>
  </nav>
</header>

4. canvas

canvas is a tag of HTML which is newly introduced in HTML5. It is used to draw the images on the fly. It can be used for visual images, rendering graphs, game graphics.

Example of canvas

<canvas id="myCanvas"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 80, 80);
</script>

5. footer

Footer is a tag, used to define the footer of a document or a section. Usually it contains the information about author and copyright etc. Address tag may be used to mark up the contact information in the footer.

A document or section can have more than one footer.                            

<footer>
  <p>Posted by: Hege Refsnes</p>
  <p>Contact information: <a href="mailto:someone@example.com">
  someone@example.com</a>.</p>
</footer>

6. New types for input tags

input is an attribute which is an old attribute but in HTML, it is reintroduced with new values like email, month, number, range, search, tel, color, week, url, time, date, datetime-local etc.These are the new values which can be contain by the input tag.

  • ContentEditable

It is an attribute which is used to permit the user to edit the content. It creates What You See What You Get so easy. Content will be editable by clicking on it.

  • Progress

This tag is used to check the progress of a task during execution of that. Progress tag can used with the conjuction of JavaScript. It is like progress bar.

<progress value="22" max="100"></progress>
  • section

Section tag is used to divide a document or in parts or sections. For example: An article can have many sections like header, footer, latest news and section for main content etc.

  • main

main is a tag which is used to contain the main content of the page. More than one main tag is not accepted in the document and this tag can not be inside in article, aside, footer, header tags. It does not include the navigation bar, header and footer.

7. Figure and Figcaption

Earlier there was no way to of figure as well as give caption to that figure. But, with the introduction of figure as well as figcaption, it has become semantically possible to insert an image in a page with its caption.

Syntax –

<figure>
    <img src="image/image-1.jpg" alt="About ADMEC" />
        <figcaption>
             <p>This is our institute </p>
        </figcaption>
</figure>

8. Placeholders

This feature in html5 has provided the assistance to many new users. It gives the hint to what is to be inserted in a particular field of the form. It is there when the user has not started writing something in the input field. It is sometime also called dummy text. It is present temporarily.

9. Required Attribute

It is another important features that is there in the form tag. It helps in gathering of all the mandatory information that is there in the form. Without this it will not be possible to submit the form. It is boolean attribute. The form will all the required fields being filled will be allowed to submit.

It works with text, url, email, password, date, numbers, checkbox, file etc.

10. Preload Videos

It is an amazing feature for uploading the videos. It specifies the way to upload the video along with the loading of the page. This helps the browser in knowing about the improvisation of the user experience of the webpage. Though this is not a too mandatory features that is too be added. It helps in better representation of the page.

11. Display Control

Display attribute helps in specifying the behaviour of the elements. When this property is not specified, then the default values are taken.

12. Regular Expressions

With the help of regular expression we can add the particular pattern as an input. Such as the most common pattern that is used is [A-Za-z] {5,11}. It accepts the uppercase as well as lowercase letters. Along with this it states that the minimum length of characters is 5 and the maximum length of characters that is acceptable is 11.

13. Accessibility

With the invent of HTML5 it has played a great role in providing the best of the accessibility features to a website. This has made the use of website simplified. the people of almost an kind of disability such as visually impaired, color blind, low vision, blind etc can have access to the websites that have been designed with the accessibility features of HTML5.

Such as in forms the validation is the best example of providing accessibility. Labels should be properly marked.

14. Inline elements

To keep code up to mark, semantically these inline elements help alot :

  • mark – It highlights the content that is marked in some or the other way.
  • time – This helps in adding current time as well as date to the webpage.
  • meter – It helps in indicating that how much space in the storage disk is still there.
  • progress bar – It helps in knowing the progress of the task that has been assigned for its completion.

15. Dynamic Page Support

Now a days there is need of dynamic as well as interactive websites rather than static websites. Here are enormous features that provide the dynamic touch to the website :

  • mark – It highlights the content that is marked in some or the other way.
  • time – This helps in adding current time as well as date to the webpage.
  • meter – It helps in indicating that how much space in the storage disk is still there.
  • progress bar – It helps in knowing the progress of the task that has been assigned for its completion.

many more such features are there to make the page dynamic.

16. Email attribute

When in a form we write the type as email, then browser by itself gets the instruction from the code to write an email with the proper as well as valid format of writing an email. This was not possible in the earlier browsers.

<!DOCTYPE html>
 
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>ADMEC form</title>
</head>
<body>
    <form action="" method="get">
        <label for="email">Email:</label>
        <input id="email" name="email" type="email" />
 
        <button type="submit"> Submit Form </button>
    </form>
</body>
</html>

17. Cryptographic nonces

In this newer version of HTML, we can add cryptographic nonces to all the styles as well as scripts. Here, we usually use nonce attribute inside script and style tag. This nonce tag basically generates a random number which is for one time use only.

So, it is regenerated each time the page refreshes. It is great features as it can be used to increase the security of the content of the page. This helps in stating and providing the authority to the webpage to specify a particular script or style.

Syntax for nonce is :

<script nonce='adfjaf8eda64U7'>
  // some JavaScript
</script>

18. Reverse Links

rev attribute is back in action again with the use of HTML 5.1. It basically allows the web users to again use the link and a or anchor tag elements. It explains the relationship between the current document as well as the linked document but in the opposite direction.

19. Zero width images

Now the web developers can make the width of the images as zero. This feature is of great hel pwhen there is no need to show them to the users such as while tracking the image files as otherwise it would take more space. It is advisable to use the zero width images with the alt tag that is empty.

For Example :

<img src="yourimage.jpg" width="0" height="0" alt="">

The above listed features are all the new features that have been introduced in HTML5 version. It has given a new life to the HTML language. The ease of designing a webpage that these features have provided id commendable. There are many more features of HTML5 which are newly introduced. Features of HTML5 is supported by the latest versions of browsers.

Keep reading our blogs and stay updated!

You can go through our all HTML blogs page to read more informative blogs related to website designing. 

To learn more about the same it is advisable to join the best HTML Training Institute such as ADMEC Multimedia Institute. We have the best industry expert trainers who can provide you better understanding of these new features.

Are these new features helpful for you? Let us know in the comment section.

Related Posts

Leave a Reply

Copy link
Powered by Social Snap