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