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 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 the 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
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="utf-8" /> <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
- 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" />
- <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 to your comments and feedback.
Thanks, Vijay Prativadi...