SiteCrafting, Inc.

While HTML5 has yet to achieve wide spread browser support, there's no reason why you can't start using some of the features described in its specification today. Many of the features described are putting words to what people are already doing, for example giving input elements placeholder text, or the introduction or the email and date types.

Another useful new element in HTML5 is mark. The mark element is used do denote "a run of text in one document marked or highlighted for reference purposes, due to it's relevance in another context." Instead of waiting for global adoption and support for the mark element, we can start using it today, with just a simple PHP function.

Example of marking or highlighting words in action:



While the mark element is not technically supported yet, most browsers are clever enough to treat elements that they don't recognize nicely, rather than refusing to acknowledge them at all.

If we want to highlight a set of words or a string with in a block of text, eventually the end result should look something like this screenshot:



Using a simple PHP function, we can replace all instances of the first string (Accountants - Certified, Public) with either wrapping mark elements, or a span with class="mark" if you have to support all browsers as well. By adding an optional parameter to flag HTML5 support, we can switch between these options on the fly.

function mark($subject, $search, $html5 = true) {
	if($html5) {
		$subject = str_replace($search, '<mark>'.$search.'</mark>', $subject);
	}
	else {
		$subject = str_replace($search, '<span class="mark">'.$search.'</span>', $subject);
	}
	
	return $subject;
}

Then just a small snippet of CSS allows us to highlight the new marks to appear distinct from the rest of the text:

mark, span.mark {
    background-color: #cfc;
    padding: 2px;
}

By using clever coding and a holistic view, we can begin using HTML5's best features even before they are supported by browsers.