HTML and CSS Reference
In-Depth Information
but send pages with a content type of
text/html
, causing HTML parsing of the XML
markup.
HTML5 unifies everything in a single specification by allowing both HTML and XML
serializations; that is, the specification provides a vocabulary that can be expressed in either
HTML or XHTML. The XHTML serialization must be sent with an XML content type
such as
application/xml+xhtml
. It also conforms to XML parsing rules rather than
HTML ones, requiring an
xmlns
declaration, closing tags, and so on. In the code down-
load there are two additional versions of
listing 1.1
showing the same markup in valid and
invalid XHTML markup: hello-invalid.xhtml, which uses HTML syntax in an XML docu-
ment, and hello-valid.xhtml, which corrects the markup to valid XML.
1.1.2. Using the new semantic elements
If you've read about HTML5 before you picked up this topic, chances are you've heard
plenty about the new semantic elements. They're important, particularly if you want search
engines and assistive technologies such as screen readers to understand your pages better,
but they're no more difficult to use than the elements you know and love from HTML4.
Don't get too excited about this new set of tags. If you're expecting these new elements
to do something magical in terms of how they look on your page, you're in for some dis-
appointment. Using these new elements on your page is functionally equivalent to using
a series of
<div>
elements; they behave as block elements by default and can be styled
as required using CSS. Their importance comes from the standard semantic meaning they
have.
Consider, for example, a typical blog post, in which the web page contains a series of sec-
tions. First, you'd have the site heading and navigation, maybe some sidebar navigation,
a main content area, a footer area with further navigation links, and perhaps some copy-
right and legal links. The next listing demonstrates how such a blog post might have been
marked up in HTML4 or XHTML.
Listing 1.2. html4-blog.html—HTML4 markup for a blog post
<div class
=
"header"
>
<h1>
My Site Name
</h1>
<h2>
My Site Slogan
</h2>