In this article, we are going to make use of HTML5 elements to add interactive features like playing audio and video, canvas, navigation tag, and HTML forms. If you are new to web development I would recommend you to first check out our previous post on Create your first web page using HTML5.
HTML5 audio tag
<audio> tag is used to embed an audio stream into an HTML document. Audio content added can be played directly from the browser. Create a file named “audio.html” and paste the code given below and save and test in your browser.
Example:
<audio controls="controls" src="https://cdn.7topics.com/content/media/audio_sample.mp3">
Your browser does not support the HTML5 Audio element.
</audio>Output:
We can also add multiple alternatives to the audio source.
Example:
<audio controls="controls">
<source src="https://cdn.7topics.com/content/media/audio_sample.mp3" type="audio/mpeg">
<source src="https://cdn.7topics.com/content/media/audio_sample.ogg" type="audio/ogg">
Your browser does not support the HTML5 Audio element.
</audio>HTML5 video tag
<video> tag is used to embed a video stream into an HTML document and can be played directly from the browser. HTML5 <video> tag currently supports three main video formats i.e MP4, Ogg and WebM. Create a file named “video.html” and paste the code given below and save and test in your browser.
Example:
<video controls="controls" src="https://cdn.7topics.com/content/media/video_sample.mp4">
Your browser does not support the HTML5 Video element.
</video>Output:
We can also add multiple alternatives to video sources.
Example:
<video controls>
<source src="https://cdn.7topics.com/content/media/video_sample.mp4" type="video/mp4">
<source src="https://cdn.7topics.com/content/media/video_sample.ogv" type="video/ogg">
Your browser does not support the HTML5 Video element.
</video>HTML5 Navigation Menu
The <nav> element is used as a container for navigation links.
Example:
<nav>
<ul>
<li><a href="http://7topics.com">Home</a></li>
<li><a href="https://7topics.com/category/html">HTML</a></li>
</ul>
</nav>Output:
HTML5 canvas
The <canvas> is used to draw and display graphics content on the web page. To draw the canvas content we need to use javascript and default width of <canavas> is 300px and default height is 150px. We can also make games using <canvas>. Currently, we will focus on basic <canavas> example drawing simple shapes in canvas.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Drawing shape on Canvas</title>
<script>
window.onload = function() {
var canvas = document.getElementById("demo");
var context = canvas.getContext("2d");
context.strokeStyle = "brown";
context.rect(50, 50, 150, 100);
context.stroke();
};
</script>
</head>
<body>
<canvas id="demo" width="300" height="200"></canvas>
</body>
</html>HTML Forms
The <form> tag is used to gather data from the visitors. It can either login/signup credentials provided to access the website or data entered via the feedback form or contact form.
Form tag accepts two methods:
GET: If the get method is used then data is appended to url while submitted. It also has a limit, as the length of a URL can exceed 2048 characters. This method is not preferred while sending any sensitive data as it is visible in url and is insecure.
POST: The post method is mostly used while sending data as it is secured and data is sent in headers, invisible to users. It doesn’t have any size limitations and can send a large amount of data.
In form, we use action attribute to define path/url where the data will be transferred on submit. Form tag contains various input elements to receive user input. So now create a file named “form.html” and paste the below contents and run it in the browser to check the result of the form example.
Example:
<form action="some_url" method="post">
First name:<br>
<input type="text" placeholder="Enter your first name"><br>
Last name:<br>
<input type="text" name="lastname" vplaceholder="Enter your last name"><br><br>
<input type="submit" value="Submit">
</form>Output:
First name:
Last name:
Above I have discussed some advanced HTML elements which can be added to the website to add additional features to your webpage. If you liked this article, do share it with your friends. Thanks for reading the complete article carefully, please provide your important feedback or comments below.
No Responses