SIGN UP LOGIN

Advanced HTML5 elements to use in web page

  24th Nov, 2019   Rahul Ranjan   0 comment
Advanced HTML5 elements to use in web page

In this article we are going to make use of HTML5 elements to add interactive features like playing audio and video, canavas, navigation tag and HTML forms. If you are new to web development the i would recommend you to firstly checkout 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 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 alternative of 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 an video stream into an HTML document and can be played directly from 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 alternative of video source.

Example:

<video controls="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 canavas

The <canvas> is used to draw and display graphics content on the web page. To draw the canavas content we need to use javascript and default width of <canavas> is 300px and default height is 150px. We can also make game using <canvas>. Currently we fill focus on basic <canavas> example drawing simple shapes in canavas.

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 website or data entered via feedback form or contact form.

Form tag accepts two methods:
GET: If get method is used then data is appended to url while submitted. It also has limit as the length of a URL can exceed than 2048 characters.This method is not preferred while sending any sensitive data as it is visible in url and is unsecure.

POST: Post method is mostly used while sending data as it is secured and data is sent in headers, invisible to users. It don't have any size limitations and can send large amount of data.

In forms 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 below contents and run it in browser to check result of 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 in the website to add additional features to your webpage. If you liked this article, do share it with your friends. Thanks for reading complete article carefully, please provide your important feedback or comments below.

Rahul Ranjan
Author: Rahul Ranjan

Founder of 7topics. Rahul Ranjan is a website developer and blogger who loves to read and share about new techonology with others through his blog.