An Advanced Guide to HTML 5 Features

The fact that HTML5 is powerful with a wider set of technologies that allows development of more diverse and powerful websites and applications isn’t in doubt. Therefore, knowing how to use these features is the first step towards becoming an efficient web developer. This blog post walks you through a comprehensive list of new features in HTML5 that are necessary to make you an efficient web developer.

Are you set to go?

#1: New semantics

New elements have been added to HTML5. Knowing how to use the semantics—with the new HTML5 elements—will provide you with the knowledge that describes with precision how your content should look like. Some of these elements are:

* <mark>. It’s used to show highlighted text. For instance, the code below demonstrates how you can use this element:

<p><strong>the mark element is used to <mark>highlight</mark> text</strong></p>

* <figure>. It shows a self-contained content. This element is frequently used with the caption (<figcaption>) element, where it’s referenced as a single unit. Here’s an example:

<figure>
<img src= “https://www.capitalnumbers.com/media/ourlogo-sm.jpeg” alt="Capital Numbers”>
<figcaption>Capital Number Logo</figcaption>
</figure>

* <data>. The data element in HTML5. It’s used to link a given HTML content with a machine-readable translation system. When the HTML content is time or even date-related, then the <time> element is used. Here’s an example:

<ul>
<li><data value= “67400”>Mombasa</data></li>
<li><data value= “67401">Nairobi</data></li>
</ul>

* <output>. It displays the result of a calculation or a user’s action. Here’s an example when used in a form:

<form oninput= “answer. Value=parseInt (m.value) +parseInt (n.value)”>
<input type= “number” name= “m” value= “100” /> +
<input type= “number” name= “n” value= “250” /> =
<output name= “answer”>350</output>
</form>

In the above example 350 is a value shown as an example which will basically vary depending on the calculations or functions implemented.

* <progress>. It’s used to display the completion progress of a given task. Here’s how you can use this element:

<progress value= “60” max= “100”>85</progress>

Apart from other attributes <progress> has two specific attributes “max” and “value”.
Max indicates how much task needs to be done before it is considered as complete
Value indicates the current status of the progress bar.

* <meter>. It represents a scalar number that’s contained within a known range of values. Here’s how you can use this element:

<p> you can heat your oven to <meter min= “150” max= “230” value= “200”>200 degrees</meter>.</p>

#2: Adjustments to the iframe

The HTML Inline Frame Element—the <iframe> element—represents a nested browsing content that can be used to embed another HTML page onto the current page. Here are the attributes that you can use with the iframe element to improve the level of security in HTML5:

* Sandbox. When specified as an empty string, the sandbox attribute will allow extra restrictions on the content which will appear in the inline frame.
Below example we have given the frame all the capabilities it requires, and the browser will helpfully deny its access to any of the privileges that we didn’t explicitly grant it via the sandbox attribute’s value.
* Srcdoc. The srcdoc attribute is used in conjunction with the sandbox and seamless attributes. However, when a browser supports the srcdoc attribute, it will automatically override the content that’s specified in the src attribute.
* Src. It specifies the URL of the web page that you’d to embed.

Here’s an example of HTML5 code demonstrating the use of the above-mentioned attributes:

<iframe id= Another_Demonstration” sandbox="allow-same-origin allow-scripts allow-popups allow-forms"> name= “Another_Demonstration” title= “Another_Demonstration” width= “500” height= “450” scrolling="no" marginheight="0" marginwidth="0" src= https://www.capitalnumbers.com/media/file.php> srcdoc=https://www.capitalnumbers.com/media/file2.php> </iframe>

#3: Adjustments to multimedia elements

HTML5 has introduced two built-in media support elements namely: the <audio> and the <video> elements. These elements provides users with capabilities to easily embed both audio and video into HTML documents. Here’s an example of how the video element can be specified in HTML5:

<video src= “https://www.capitalnumbers.com/promotionalvideo.ogg” controls>
<source src="video.mp4" type="video/mp4">
<source src="video.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

Here is an example for embedding audio into your HTML document
Here’s an example of how the audio element can be specified in HTML5:

<audio src= “httpS://www.capitalnumbers.com/promotionalaudio.ogg”> <source src="audio.ogg" type="audio/ogg"> <source src="audio.mp3" type="audio/mpeg"> Your browser does not support the audio element. </audio>

#4: Adjustments to 3D Graphics and their Effects

The <canvas> element can be used to draw graphics, create animations, etc. using JavaScript, now there are many JS frameworks available to make your life easire.. Here’s the basic illustration of using the canvas element:

<canvas id= “Demonstration of Canvas Element” width= “300” height= “250”>
</canvas>

For instance, if you want to provide text descriptions of the canvas content—by providing a static image of the dynamic content—here’s is how you can do it in HTML5:

<canvas id= “Demonstrations2” width= “300” height= “250”>
The current price of the stock is: $300+200
</canvas>

That’s not everything, there’s more to learn in HTML5. Get in contact with us for more detailed information.