HTML 5 Tutorial (iv)

HTML4 uses 5 different inline elements to represent slightly different computer code: VAR, code, KBD, TT, and Samp. However, it cannot represent basic values such as time, numbers, and so on. HTML 5 provides several new inline elements to meet the needs of non-technical authors.

M

The M element indicates that the text is "marked", but not necessarily emphasized. You can think of it as a highlighted section in a book. Google's caching page is a typical use case. If you link to a cached copy, the search term is flagged. For example, if you search for "Egret," the cached Google page might look like this:

The Great <m>Egret</m> (also known as the
American <m>Egret</m>)is a large white wading bird found worldwide.
The Great <m>Egret</m> flies with slow wing beats. The
scientific name of the Great <m>Egret</m> is <i>Casmerodius
albus</i>.

There is currently a dispute about the name of this element. It may change from M to mark before the specification is published.

Time

The time element represents a temporal value, such as 5:35 p.m., EST, April 23, 2007. For example:

<p>I am writing this example at
<time>5:35 P.M. on April 23rd</time>.
</p>

The time element can help browsers and other programs identify times in an HTML page. It does not require any particular format to be applied to element content. However, each time element should have a DateTime attribute that contains a value that is more appropriate for machine recognition, such as:

<p>I am writing this example at
<time datetime="2007-04-23T17:35:00-05:00">5:35 P.M. on April 23rd</time>.
</p>

The time value for machine reading may be helpful to search engines, calendar programs, and so on.

Meter

The meter element represents a numeric value in the specified range. For example, you can use it to indicate a salary, a percentage of French voters voting for the Pen, or a test score. Here, I use meter to mark the data provided by a Google programmer on Software Development 2007:

<p>An entry level programmer in Silicon Valley
can expect to start around <meter>$90,000</meter> per year.
</p>

The meter element helps browsers and other clients identify the number of HTML pages. It does not require any particular format to be applied to element content. However, each meter element can have up to 6 properties that represent the number in a more machine-aware form:

value
min
low
high
max
optimum

These attributes should all contain a decimal digit. For example, a final exam score can be written as follows:

<p>Your score was
<meter value="88.7" min="0" max="100" low="65" high="96" optimum="100">B </meter>.
</p>

This means that the student's score is 88.7 of the Hundred. The lowest possible score is 0, but the actual minimum score is 65. The highest possible score is 100, but the actual highest score is 96. The user agent can display this information with a numeric control, or it can display additional data in a ToolTip, but the most common scenario might be to apply styles to it like other inline elements.

Progress

The progress element represents the state of an ongoing process, like a progress bar in a graphical user interface (GUI) application. For example, you can use it to indicate the percentage of a file that has been downloaded or the current position when the movie is played. The following progress control indicates that the download is 33% complete:

<p>Downloaded:
<progress value="1534602" max="4603807">33%</progress>
</p>

The Value property represents the current state of the operation. The Max property represents the total number of operations. This element indicates that the total amount of data to be downloaded is 4,603,807 bytes and 1,534,602 bytes have been downloaded.

Ignoring the Max property, you can display unlimited progress.

You should dynamically update the progress bar using the JavaScript language when the operation progresses. In a static situation, this element doesn't make sense.