Web Development and Design Foundations with XHTML, 5th Edition

(Steven Felgate) #1
Appendix D Comparison of HTML 4, XHTML, and HTML 5^629

working draft of HTML 5 is available at http://www.w3.org/TR/html5. An explanation
of the differences between HTML 4 and HTML 5 is located at http://www.w3.org/TR/
html5-diff. Be aware that at the time this was written, HTML 5 was in a draft status
and may change before it reaches recommendation status.


New elements and attributes have been added to HTML 5 that streamline the structuring
of content, add more options for semantic markup of text content, and provide for
multimedia and interactivity. This section will introduce you to several of the more
interesting new elements.


Block-Level Elements


Take a moment and think about how you typically structure a Web page layout with


tags. You may find that it’s common to use ids or classes with names such as
header, nav, or footer. HTML 5 has several new block-level elements specifically
intended for organizing Web pages:
●<header>contains the heading information of a section. It would typically con-
tain a heading tag (such as <h1>, <h2>, etc.) and might optionally contain other
information, such as the author’s name.
●<nav>contains a section of navigation links.
●<aside>contains sidebar, note or other tangential content.
●<footer>contains the footer of a section.
●<article>contains an independent entry, such as a blog posting, comment, or
e-zine article.
●<section>contains a “section” of a document, such as a chapter or topic. A sec-
tion might contain <header>, <footer>, and other elements needed to display
the content.
●<figure>associates a caption with an image or video.
●<dialog>configures a conversation and is used along with <dt>(the speaker’s
name) and <dd>(what they said) elements.

Semantic Inline Elements


HTML 5 contains new inline elements that are intended to provide more options for
semantic markup of Web page content. A few of these new elements are listed below.


●<mark>configures text as “marked” or highlighted.
●<time>configures a date and/or time.
●<meter>configures a numeric value within a specified range.

Multimedia Elements


HTML 5 contains several new elements that are intended to simplify displaying multi-
media in Web pages.


●<video>configures embedded video.
●<audio>configures embedded audio.
Free download pdf