HTML and CSS Reference
In-Depth Information
You use indeterminate tasks when you don't know how long a task will take to complete
but still want to show users that some work is occurring and that they should wait. You still
use the
<progress>
element but remove the
value
attribute. When you don't specify the
value
attribute, the browser can infer that the
<progress>
element represents an indeterminate
task. This might be useful for data received from a service where you have no control over or
knowledge of how quickly the request will complete or how large the request results will be.
The following HTML5 markup demonstrates an indeterminate task:
<p>Data download is in progress, please wait patiently:</p>
<progress max="5"></progress>
This code produces a progress display like the one shown in Figure 1-11:
FIGURE 1-11
Showing indeterminate progress by using moving dots to demonstrate that work is occurring
In Figure 1-11, the blue dots replace the progress bar from the previous determinate
example. This visual change to the progress indicator occurred by simply removing the
value
attribute from the
<progress>
element. In actuality, the dots are animated, as you would see
if you run the code in a browser.
<mark>
element
With the
<mark>
element, you can easily highlight important information or any text you
want to emphasize. It has essentially the same function as a highlighter. By wrapping text in a
<mark>
element and providing a
background-color
attribute to its
style
element, you can get
the desired highlight effect. The following HTML code demonstrates the
<mark>
element:
<p>Some very <mark style="background-color:red;">important</mark> information provided
here!</p>
Figure 1-12 shows the output of this HTML. The word “important” is highlighted as a result
of the
<mark>
element being placed around it.
FIGURE 1-12
The effect on text placed inside the
<mark>
element
Search WWH ::
Custom Search