Text - Introducing HTML5 - page 54

HTML5 element categories and content models
HTML4 had divided elements into “block-level” and “inline.” These names are gone from HTML5, as
they're inherently presentational: They simply refl ect the way browsers display them—with their default
style sheets. There is nothing inherent to any HTML element that is “block” or “inline.”
By default, CSS defi nes every element as display:inline until it's overridden by the browser's default
style sheet or the gorgeous design that the sublimely talented designer that you are applies to the
markup. (Don't blush, you know you are; everybody says so.)
In HTML5, meet lots of new content models, including phrasing (broadly equivalent to inline) and
fl o w (broadly equivalent to block-level). Some ( <a> , <ins> , <del> ) can be both. Some content types
(heading content like <h1>..<h6> , sectioning elements like <article> , <section> , <nav> , <aside> )
are subsets of these.
There's also embedded (content that imports another resource into the document, or content from
another vocabulary that is inserted into the document such as <audio> , <canvas> , <embed> , <iframe> ,
<img> , <math> , <object> , <svg> , <video> ), interactive ( <a> , <audio> (if the controls attribute is pres-
ent), <button> , <details> , <embed> , <iframe> , <img> (if the usemap attribute is present), <input> (if
the type attribute is not in the hidden state), <keygen> , <label> , <menu> (if the type attribute is in the
toolbar state), <object> (if the usemap attribute is present), <select> , <textarea> , <video> (if the
controls attribute is present), metadata, and others.
Don't get hung up on these. They're pretty intuitive: Apart from the fact that <a> now behaves like <ins>
and <del> and can be “inline” or “block,” you won't notice anything different from before if you're using
the html5 shiv ( http://code.google.com/p/html5shiv/ ) to defi ne the new HTML5 elements until browsers
defi ne them in their style sheets.
<mark>
The <mark> element allows you to do the markup equivalent of
using a highlighter pen to bring out some words on a printed
page. It's not the same as emphasis—for that you use <em> . But
if you had some existing text and wanted to bring something to
the fore that isn't emphasised in the text, you could use <mark>
and style it to be italics, or with a yellow highlighter-pen back-
ground colour. In print, you'll often see the phrases “my italics”
or “emphasis added”.
The spec also says “When used in the main prose of a docu-
ment, it indicates a part of the document that has been high-
lighted due to its likely relevance to the user's current activity.”
As an illustration, on my own site, I use an adapted version of
Stuart Langridge's Searchhi script ( www.kryogenix.org/code/
browser/searchhi/ ), which checks to see if the referrer to a page
was a search engine and the search terms are in the query
string. If they are, the script walks the DOM and surrounds each