Introduction
In this article, we will learn the basic understanding of the Progress and Mark tags available in HTML 5.
Question: What is Progress in Html 5?
If you are a developer or programmer, I am sure you have seen a progress bar in many applications. A progress bar control shows the progress of a process from start to finish and it also gives us an idea of how much time is left in the process to finish.
For example, when you install a software, you will notice a progress bar shows how much installation is completed and how much is left. On the Web, you may notice sometime when you are uploading or download a file, you will see how much task has completed.
In simple terms, "A progress bar is
used to display amount of task completed when compared to overall task".
The Progress tag in HTML 5 represents a progress bar control.
Question: What
is Mark in Html 5?
In simple terms, "A mark tag is
used to highlight some parts of your document".
Now, let's see some sample code that shows how to use these two tags in HTML 5.
Step 1: The Complete Code
of progress.html looks like this:
Code:
Remove this if you
use the .htaccess -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>templates</title>
<meta name="description" content="" />
<meta name="author" content="Vijay" />
<meta name="viewport" content="width=device-width;
initial-scale=1.0" />
<!-- Replace favicon.ico & apple-touch-icon.png
in the root of your domain and delete these references -->
<link rel="shortcut icon" href="/favicon.ico" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
</head>
<body>
<div style="font-family:
Verdana ; font-size:
22; text-align:
center">
<header>
<h1 style="color:
gray">Progress - HTML 5</h1>
</header>
Current Downloading<progress value="72" max="100"></progress>
<div>
<p>
This is simple example using <mark>Mark
- HTML 5</mark></p>
</div>
<footer>
<p style="color:
silver">© Copyright by Vijay
Prativadi</p>
</footer>
</div>
</body>
</html>
Step 2:
The Output of the Application looks like this:
I hope this
article is useful for you. I look forward for your comments and feedback .
Thanks Vijay Prativadi....