HTML5 structure and semantics-semantic inline elements (4)

HTML4 uses five different inline elements to indicate slightly different computer codes: var, code, kbd, tt, and samp. However, it cannot represent basic values such as time and number. HTML 5 provides several new inline elements to meet non-technical author requirements.
 
M
 
The m element indicates that the text is "marked", but not necessarily emphasized. You can think of it as a highlighted section in the book. Google cache pages are typical use cases. If it is linked to a cached copy, the search term is marked. For example, if you search for "Egret", the cached Google page may look like the following:
 
The following code snippet: [www.2cto.com]
The Great <m> Egret </m> (also known as
American <m> Egret </m>) is a large white wading bird found worldwide.
The Great <m> Egret </m> flies with slow wing beats.
Scientific name of the Great <m> Egret </m> is <I> Casmerodius
Albus </I>.
 
The name of this element is still controversial. Before the specification is released, it may be changed from m to mark.
 
Time
 
The time element represents a time value, for example, p.m., EST, limit l 23,200 7. For example:
 
The following code snippet: [www.2cto.com]
<P> I am writing this example
<Time> p.m. on 23rd </time>.
</P>
The time element helps the browser and other programs identify the time in the HTML page. It does not apply any specific format to element content. However, each time element should have a datetime attribute, which contains a time value that is more suitable for machine identification, such:
 
The following code snippet: [www.2cto.com]
<P> I am writing this example
<Time datetime = "2007-04-23T17: 35: 00-05:00"> p.m. on 23rd </time>.
</P>
 
The time value suitable for machine reading may be helpful to search engines and calendar programs.
 
Meter
 
The meter element indicates the numeric value in the specified range. For example, it can be used to indicate salary, percentage of French voters voting for Le Pen, or exam scores. Here, I use meter to mark the data provided by a Google programmer on Software Development 2007:
 
The following code snippet: [www.2cto.com]
<P> An entry level programmer in Silicon Valley
Can perform CT 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 apply any specific format to element content. However, each meter element can have a maximum of six attributes. They represent this quantity in a more suitable form for Machine recognition:
Value
Min
Low
High
Max
Optimum
These attributes must contain a decimal number. For example, the score of the final exam can be written as follows:
 
The following code snippet: [www.2cto.com]
<P> Your score was
<Meter value = "88.7" min = "0" max = "100" low = "65" high = "96" optimum = "100"> B </meter>.
</P>
 
This indicates that the score of this student is 88.7 in the percentage system. The possible Gini score is 0, but the actual Gini score is 65. The highest possible score is 100, but the actual highest score is 96. The user agent can use a numeric control to display this information, or display additional data in the tooltip, but the most common case may be to apply a style to it like other inline elements.
 
SS
 
The SS element indicates the status of an ongoing process, just like the progress bar in a graphical user interface (GUI) application. For example, it can be used to indicate the percentage of files downloaded or the current position when playing a movie. The following progress control indicates that the download has completed 33%:
 
The following code snippet: [www.2cto.com]
<P> Downloaded:
<Progress value = "1534602" max = "4603807"> 33% </progress>
</P>
 
The value Attribute indicates the current status of the operation. The max attribute indicates 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.
Ignore the max attribute to display the infinite progress.
During the operation, you should use JavaScript to dynamically update the progress bar. This element makes no sense in a static environment.