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.
History of HTML
HTML is known as Hyper Text Markup Language, the first version release of HTML was HTML 1.0 it was released in 1993. Invented by Sir Tim Berners Lee, he is the same person who invented the www (world wide web). And it was the initial version of the html then comes the html 2.0 it adds some of the additional features to HTML 1.0. after 1997 the HTML 3.0 comes in which Dave Reggett introduced the new draft of the html documentation. It gives some new powerful tools to the HTML but these powerful tools started slow down the website performance. In the HTML 4.01 and it was the most successful version of HTML till the HTML 5 is the extended version of html 4 and it is also known as semantic HTML which includes revolutionary features which are given below here.
Inventor of HTML
HTML was invented by sir Tim Burners Lee. He is the English computer scientist mostly famous for the invention of the world wide web. He is also the director of the world wide web consortium also known as w3c.
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 web pages now without the use of JavaScript.
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
HTML 5 was released in 2014 and it was not only an historic year for web designers, UI developers, and web devlopers but also for the entire world. New features of HTML5 revolutioned the gadgets industry hugely specially smart devices like phones and televisions.
Below given are few most useful and popular HTML5 features to explore.
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 audio in the web.
Example of using Video tag
<video controls preload> <source src="admec-multimedia.ogv" type="video/ogg" /> <source src="admec-multimedia.mp4" type="video/mp4" /> <p> Your browser is old. Please try in a latest browser.</p> </video>
Note: HTML5 supports only .mp4 and .ogv videos.
Example of using Audio tag
<audio autoplay="autoplay" controls="controls"> <source src="file.ogg" /> <source src="file.mp3" /> <p>Your browser doesn't support this feature.</p> </audio>
2. svg
The svg element is used for the scalable vector graphics in the html 5, we can create any kind of graphical animation with use of the svg tag, such as circle, square or rectangle etc.
<svg width="100" height="100"> <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" /> </svg>
3. Semantic tags in HTML5
This is most awaited set of tags in HTML. Semantic tags are very useful to make human and search engine friendly websites and apps. Earlier developers were using div tag only to make columns, rows, and new sections in a web page. DIV doesn’t represent any information about the page and its content to the search engines while semantic tags do.
Semantic tags boosted making of accessible websites too. Accessible websites are the websites which are planned and prepared for the people with various disabilities.
article
To distribute any independent content in a web page you can use article tag, which is a semantic tag like others.
<article>
<h1></h1>
<p></p>
</article>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>
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>
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>
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.
<article>
<section>
<h1></h1>
<p></p>
</section>
<section>
<p></p>
<p></p>
<section>
</article>aside
Most of the times, every web page has columns, hence sidebars are presented. They are like left sidebar and right sidebar (please refer above pic 1).
<aside>
<h1></h1>
<p></p>
</aside>Note: aside can also be divided into multiple sections. It is useful to insert widgets of some forms, lists etc.
main
main is a tag which is used to contain the main content of the page and it contains unique content. 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.
<main>
<h1>Programming languages</h1>
<p>Languages HTML and CSS are intended for site layout.
</p>
<article>
<h2>HTML</h2>
<p>
HTML (Hyper Text Markup Language) is a language of hypertext markup, which is used to create web pages.
</p>
<p>... </p>
<p>... </p>
</article>
<article>
<h2>CSS</h2>
<p>
CSS is a language of styles, defining the display of HTML documents.
</p>
<p>... </p>
</article>
</main>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.
<figure> <img src="image/image-1.jpg" alt="About ADMEC" /> <figcaption> <p>This is our institute </p> </figcaption> </figure>
Few other semantic tags are:
address
<address>
Written by <a href="mailto:webmaster@example.com">Jon Doe</a>.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>details
Additional details can be given of anything, which will be visible when user clicks on a small triangle shape.
<details>
<summary>Epcot Center</summary>
<p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
</details>
summary
<details>
<summary>Epcot Center</summary>
<p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
</details>
time
<p>Open from <time>10:00</time> to <time>21:00</time> every weekday.</p>
<p>I have a date on <time datetime="2008-02-14 20:00">Valentines day</time>.</p>
4. HTML5 APIs
Few APIs are introduced in the latest version of HTML i.e. HTML5. These are very useful and JavaScript based, meaning one need to JavaScript to leverage the power of these APIs. They are canvas, geolocation, drag/drop, web storage, web workers etc.
Here are few examples of most popular ones.
canvas API
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.
<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>
Output:
geolocation API
The HTML Geolocation API is used to locate a user’s position.
<p>Click the button to get your coordinates.</p>
<button onclick="getLocation()">Try It</button>
<p id="demo"></p>
<script>
var x = document.getElementById("demo");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
x.innerHTML = "Geolocation is not supported by this browser.";
}
}
function showPosition(position) {
x.innerHTML = "Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude;
}
</script>
Output: it will display your Latitude and Longitude.
Click the button to get your coordinates.
drag/drop API
In HTML, any element can be dragged and dropped.
/*css*/
#div1 {
width: 350px;
height: 70px;
padding: 10px;
border: 1px solid #aaaaaa;
}
/*JavaScript*/
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
/*HTML*/
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<img id="drag1" src="admec_logo.jpg" draggable="true" ondragstart="drag(event)" width="336" height="69">
Output:
Drag the ADMEC logo into the rectangle:
5. 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 contained by the input tag.
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.
<form action="" method="get"> <label for="email">Email:</label> <input id="email" name="email" type="email" /> <button type="submit"> Submit Form </button> </form>
More examples:
<input type="color" />6. 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.
<blockquote contenteditable="true">
<p>Edit this content to add your own quote</p>
</blockquote>
<cite contenteditable="true">-- Write your own name here</cite>— Write your own name hereEdit this content to add your own quote
7. Progress
This tag is used to check the progress of a task during execution of that. Progress tag can used with the conjunction of JavaScript. It is like progress bar.
<progress value="22" max="100"></progress>
8. Placeholders in Form
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.
<input type="text" placeholder="Type Your Name Here" />Type something in the given below input field.
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.
<input type="text" placeholder="Type Your Name Here" required />Submit the form without entering any value in the input field.
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.
Just add preload attribute to your video tag as below. There are 3 values which can be used – auto | metadata | none.
<video controls preload="none">
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>12. Regular Expressions
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. 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>
17. 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.
18. 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.
