HTML and CSS Reference
HTML5 element categories and content models
HTML 4 divided elements into “block-level” and “inline.” These names are gone from HTML5, as they're
inherently presentational; they simply reflect 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 defines 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, we find lots of new content models, including phrasing (broadly equivalent to inline) and
flow (broadly equivalent to block-level). Some elements ( <a> , <ins> , <del> ) can be both. You'll also
recognize heading content like <h1>..<h6> and sectioning elements like <article> , <section> ,
<nav> , and <aside> .
There's also embedded (content that imports another resource into the document, or content from another
vocabulary that's inserted into the document, such as <audio> , <canvas> , <embed> , <iframe> , <img> ,
<math> , <object> , <svg> , and <video> ), interactive ( <a> , <audio> [if the controls attribute is
present], <button> , <details> , <embed> , <iframe> , and <img> [if the usemap attribute is present],
<input> [if the type attribute is not in the hidden state], <keygen> , <label> , and <menu> [if the type
attribute is in the toolbar state], <object> [if the usemap attribute is present], <select> , <textarea> ,
and <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” (to use the old HTML 4 parlance), you won't notice anything
different from before in terms of styling—particularly if you're using the HTML5 shiv ( http://code.google .
com/p/html5shiv/ ) to help old browsers along with the new HTML5 elements until their default presenta-
tion is added to the browsers' style sheets.
Microdata is composed of five attributes that can go on any
HTML element. The most important are itemscope , itemtype ,
and itemprop .
itemscope defines the scope of one particular item; it says “this
container is all about one single item.”
Here is a <div> about this very book:
I love that Introducing HTML5 by Bruce Lawson and Remy Sharp
¬ (ISBN 0321784421)
itemtype allows me to specify a vocabulary so a parser or
crawler will know what kind of information I'm marking up (this
must be an absolute URL):