HTML5 Overview : understanding basic concepts

What is HTML5?

HTML5 is the 5th and latest upgraded major version of HTML (Hypertext Markup Language). HTML is the standard Markup Language for those documents which were designed to be displayed in a web browser. HTML is frequently assisted by other technologies like CSS (Cascading Style Sheets) and JavaScript.

HTML5 have come up with a variety of new and advanced features and enhancements like Geolocation, Canvas, Drag & Drop, and many more. Let's have a brief introduction to most important HTML5 features:

HTML5 Canvas - HTML5 supports <canvas> tag that offers a two-dimensional drowing surface for drowing.
HTML5 SVC - HTML5 supports SVG that allows you to define Scalable Vector Graphics for the web.
HTML5 Audios - HTML5 supports <audio> tag taht allows you to embed audios on a webpage without using third-party plugins.
HTML5 Videos - HTML5 supports <video> tag that allows you to embed videos on a webpage without using third-party plugins.
HTML5 Nav - HTML5 supports <nav> tag that allows you to define a set of navigation links.
HTML5 Header - HTML5 supports <header> tag to include introductory content and heading elements.
HTML5 Footer - HTML5 supports <footer> tag to define the footer of a webpage.
HTML5 Section - HTML5 supports <section> tag to define specific sections of subsections of your webpages.
HTML5 Main - HTML5 supports <main> tag that allows you to define the important content of the <body> of a webpage.
HTML5 Progress - HTML5 supports <progress> tag that allows you to display progress of a task during the execution.
HTML5 Figure & Figcaption - HTML5 supports <figure> and <figcaption> tags that allow you to image along with its caption.
HTML5 Drag and Drop - HTML5 allows you to drag and drop elements from one location to another on the same webpage.
HTML5 Geolocation - HTML5 allows your webpage visitors to share their physical location with visitor consent.
HTML5 Local Storage - HTML5 support secure web storage that allows you to store large amount of data locally.
HTML5 WebSocket - HTML5 offers an useful next-generation bidirectional communication technology for youe web based applications.
HTML5 Server-sent Events - HTML5 has introduced events which are initiated from web server and sent to the web browsers.
HTML5 Forms 2.0 - HTML5 have introduced new attributes for <input> tag which are very useful.

What is HTML5 Canvas?

HTML5 offers <canvas> element that allows us to draw graphics on a web page. The <canvas> element provides us a drawing surface and its only a container for graphics. In order to draw graphics, you will have to use JavaScript. Canvas offers list of methods that help us in droawing boxes, paths, circles, rectangles, and adding text and images. Almost all modern browsers support for canvas.

Points to note:

A Canvas is nothing but a rectangular area on your web page.
By defaut, a canvas will not have a border and content.
You should always specify an id attribute to a canvas element.
You should also specify a width and a height attribute to canvas element that define the size of the canvas.
You can use style attribute to add css effect on canvas like its border.

Simple canvas example along with its border and a simple text drawn in it:

<!DOCTYPE html>
<html>
<body>
    <canvas id="simplecanvas" width="250" height="150" style="border: 3px solid #000;">This browser has no support for canvas tag.</canvas>
    <script>
    let c = document.getElementById("simplecanvas");
    let ctx = c.getContext("2d");
    ctx.font = "40px Arial";
    ctx.fillText("Hello My Friends", 20, 60);
    </script>
</body>
</html>

What is HTML5 SVG?

HTML5 offers <svg> element that allows us to define vector-based scalable graphics in XML format on a web page. The <svg> element is nothing but a container for Scalable Vector Graphics. SCG offers many useful methods to draw text, boxes, paths, and other graphic images.

Simple SVG rxample that draw a circle:

<! DOCTYPE html>
<html>
<body>
    <svg width="200" height="200">
        <circle cx="100" cy="100" r="80" stroke="red" stroke-width="5" fill="green" />
    </svg>
</body>
</html>

HTML5 Audios

HTML5 introduced <audio> element that allows us to play an audio file on a web page. It has a controls attribute that is useful when adding audio controls like play, pause, and volume. You can also use <source> element along with <audio> element to specify multiple audio files from which browser can choose one. Browser will always choose the first supported file. You can mention a text between <audio> and </audio> tags to display if browser has no support for <audio> element.

HTML5 Audio Example 1:

<! DOCTYPE html>
<html>
<body>
    <audio src="xyz.mp3" controls autoplay loop>
        This browser doen not support HTML5 <audio> element
    </audio>
</body>
</html>

HTML5 Audio Example 2 (with alternative source files):

<! DOCTYPE html>
<html>
<body>
    <audio controls autoplay loop>
        <source src="xyz.mp3" type="audio/mpeg" />
        <source src="xyz.ogg" type="audio/ogg" />
        <source src="xyz.wav" type="audio/wav" />
        This browser doen not support HTML5 <audio> element
    </audio>
</body>
</html>

HTML5 Videos

HTML5 introduced <video> element that allows us to play a video on a html web page. It has a controls attribute that adds video controls like play, pause, and volume. It is wise to add width and height attribute to <video> element to fit video as expected. You can use <source> element along with <video> element to specify multiple video files from which browser can choose one. Browser will always choose the first recognized format. You should mention a text between <video> and </video> tags to display if browser has no support for <video> element.

HTML5 Video Example 1:

<! DOCTYPE html>
<html>
<body>
    <video src="xyz.mp4" width="400" height="250" controls autoplay loop>
        This browser doen not support HTML5 <video> element
    </video>
</body>
</html>

HTML5 Video Example 2 (with alternative source files):

<! DOCTYPE html>
<html>
<body>
    <video width="400" height="250" controls autoplay loop>
        <source src="xyz.mp4" type="video/mp4" />
        <source src="xyz.ogg" type="video/ogg" />
        This browser doen not support HTML5 <video> element
    </video>
</body>
</html>

HTML5 Overview : understanding basic concepts

What is HTML5?

What is HTML5 Canvas?

What is HTML5 SVG?

HTML5 Audios

HTML5 Videos

Recommended Posts

PHP 7 New Features and Enhancements Explained

JSON Web Tokens Explained

Var, Let, and Const in JavaScript Explained

Categories