HTML supports
the following inline elements –
·
<mark>
- It
is used for indicating text as marked or highlighted for reference purposes. It
is a paired tag.
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8"/>
<title>Welcome</title>
</head>
<body>
<mark style='background-color:lightblue'>
<mark>HTML</mark> is a new hypertext markup language for mobile apps <br/>
HTML5 is new hypertext markup language for mobile <mark>apps</mark>
</mark>
</body>
</html>
·
<meter>
- It
defines a scalar measurement within a known range. This is also known as gauge.
It is a paired tag.
|
Attribute
|
Value
|
Description
|
|
form
|
form_id
|
Specifies one or more forms.
|
|
high
|
number
|
Specifies the range that considered to be
high.
|
|
low
|
number
|
Specifies the range that is considered to be
low.
|
|
max
|
number
|
Specifies the maximum value of the range.
|
|
min
|
number
|
Specifies the minimum value of the range.
|
|
optimum
|
number
|
What value is the optimum value for gauge.
|
|
value
|
number
|
Specifies the current value for the gauge.
|
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8"/>
<title>Welcome</title>
</head>
<body>
<meter value="2" max="10"></meter>
<br/><br/>
<meter value="9" max="10"></meter>
<br/><br/>
<meter low="69" high="80"
max="100" value="100"></meter>
<br/><br/>
<meter high="80" max="100"
value="84"></meter>
<br/><br/>
<meter max="100" value="50"
min="10"></meter>
</body>
</html>
Note – If value is higher than
‘high’ the gauge is yellow(when low available). When value is lower than low if
optimum is lower than low the gauge is green. If value is more than high then
optimum is red (when max available).
·
<progress>
- It
is used to represent progress of a task. It is a paired tag.
|
Attribute
|
Value
|
Description
|
|
max
|
number
|
Specifies how much work the task requires in
total.
|
|
value
|
number
|
Specifies how much of the task has been
completed
|
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8"/>
<title>Welcome</title>
</head>
<body>
<progress value="5" max="10"></progress>
</body>
</html>
·
<time>
- This
element is used in representing dates and times in machine readable format. It
is a paired tag.
|
Attribute
|
Value
|
Description
|
|
datetime
|
datetime
|
Specifies the date/time
|
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8"/>
<title>Welcome</title>
</head>
<body>
We arrived at <time> 9:00 </time>
</body>
</html>
No comments:
Post a Comment