HTML and CSS Reference
In-Depth Information
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:
<div itemscope>
I love that Introducing HTML5 by Bruce Lawson and Remy Sharp
¬ (ISBN 0321784421)
</div>
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):
