HTML and CSS Reference
In-Depth Information
The mark element
HTML5 also adds the <mark> element as a way to highlight small portions of text as if you were using
a highlighter on a paper sheet. Using the <mark> element is easy; all you do is wrap some text in the
<mark> element, as shown below:
The <mark> DETAILS </mark> element is not supported by Internet Explorer 10.
The entire text is rendered with default settings except the text enclosed in the <mark> element.
Most HTML5 browsers have default graphical settings for marked text. Most commonly, these settings
entail a yellow background. Needless to say, graphical effects of the <mark> element can be changed
at will via CSS.
Figure 2-5 shows how the previous text looks using Internet Explorer 10.
FIGURE 2-5 The mark element in action.
The dataList element
For a long time, HTML developers asked loudly for the ability to offer a list of predefined options
for a text field. The use-case is easy to figure out. Imagine a user required to type the name of a city
in a text field. As a page author, you want to leave the user free of entering any text; at the same
time, though, you want to provide a few predefined options that can be selected and entered with a
single click. Up until HTML5, this feature had to be coded via JavaScript, as HTML provided only two
options natively: free text with no auto-completion or a fixed list of options with no chance of typing
anything. The new <datalist> element fills the gap. Copy the following text to the body of a new
HTML page named datalist.html .
<input list="cities" />
<datalist id="cities">
<option value="Rome">
<option value="New York">
<option value="London">
<option value="Paris">
</datalist>
In the example, the <datalist> element is bound to a particular input field—the input field named
cities. It is interesting to notice that the binding takes place through a new attribute defined on the
Search WWH ::




Custom Search