Breaking News
Home / Web / HTML / HTML5 specific new tags

HTML5 specific new tags

Review HTML5 new Tags

The web has significantly evolved during the last years. Blogs, social networks, and web-based applications are some modern applications of the Internet that were never even imagined when the HTML 4.01 specification was released in 1999. Basically, what HTML5 adds compared to the previous specification is a brand new set of tags to improve the functionality of HTML.

The first set of tags is dedicated to add more structure to an HTML page. Indeed, most of the HTML pages before HTML5 were structured using <div> tags, which were then specialized using CSS classes:

<div class="header">
The header
</div>

<div class="section">
<div class="article">
One article
</div>

<div class="article">
One article
</div>
</div>

<div class="footer">
The footer
</div>

This approach worked of course, but was difficult to understand. To solve this problem, HTML5 introduced new tags to add more structure to a page. For example, a section can now be declared with the <section> tag. There is also a new tag for articles, with the <article> tag. The previous example can now be rewritten in HTML5:

<header>
The header
</header>

<section>
<article>
One article
</article>

<article>
One article
</article>
</section>

<footer>
The footer
</footer>

These new tags don’t change the functionality of the page, but it is now much easier to organize an HTML page, and it is also easier to read the code for somebody that doesn’t know the project yet.

The second set of tags that was added in HTML5 is related to media functionalities. It is now trivial to add sounds or videos into an HTML page, without caring about how to play it or about the format of the video. HTML5 takes care about everything, and propose a nice and ready-to-use player for your media files. For example, embedding a video into an HTML5 page would look like this:

<video controls src=”video/my_video.mp4” width=”720″ height=”480″>

In this case, the “controls” argument specifies that we want the basic controls (play, pause …) to be displayed at the bottom of the video, just as it would on a website like Youtube.

Finally, the last fundamental new tag of HTML5 is the <canvas> element. This new element makes on-the-fly drawing possible on an HTML page via scripting. It was intended to replace third-party software like Flash for devices that didn’t support Flash, for example on the iOS mobile devices from Apple. Usually, the scripting language is Javascript, which is now the default scripting language for HTML5. But let’s take an example, and just draw a red square on a page. The HTML page would look like this:

<!doctype html>

<html>
<head>
<meta charset="utf-8">
<script src="simplecanvas.js"></script>
<!-- Some CSS to see the border of the canvas -->
<style>canvas {border: 1px solid black;}</style>
</head>

<body>
<!-- This is where we declare the canvas -->
<canvas width="600" height="300" id="myCanvas">
</canvas>
</body>
</html>

Easy, isn’t it? The real magic happens in the Javascript file, which we linked with the <script> tag. Here is the content of this file:

// Function called when the page has finished loading
window.onload = function(){
// Get the canvas element from the HTML page
var canvas = document.getElementById("myCanvas");

// Specificy we want to work in 2D
var context = canvas.getContext("2d");

// Set the filling color to red, and draw a 50*50 pixels rectangle
context.fillStyle = 'red';
context.fillRect(100,50,50,50);
}

Now, if your browser is HTML5-compatible (which is the case for all recent browsers), you should see this:

HTML5 Canvas Drawing
So that was an overview of the new tags in HTML5. To summarize, these new tags add functionalities to HTML in 3 domains: structure of the page, easy integration of media files, and on-the-fly drawing.

The project files are attached the post.

Attachment Size
html5-simple-canvas.zip 1.18 KB
[pb_builder]

Check Also

Guess the Number – Game in Python

Mini Project Practice Exercise in Python for Beginners. Create a Guess the Number game where …

Advertisment ad adsense adlogger