HTML and CSS Reference
• How to use the new semantic elements to lay out a page.
• How to deal with older versions of Internet Explorer that don't recognize the new
• About the new form features you can implement immediately in HTML5.
• How to use new UI elements, such as progress bars and collapsible sections.
Let's get started by examining the basic structure of an HTML5 document. If you're not in-
semantic markup and into the HTML5 ecosystem.
1.1.1. Creating the basic structure of an HTML5 document
HTML5 documents are structured in the same way as older versions of HTML: you put
a <!DOCTYPE> declaration at the top of the document and open and close the HTML
document with matching <html> and </html> tags. Between these tags, you have a
<head> section, where you place <meta> information and other noncontent items such
as stylesheets, and a <body> section, where your page content should go. If you've writ-
ten HTML pages or applications before, none of this will be new to you, but you need to
be aware of some subtle differences, which we'll cover in this section:
• The HTML5 DOCTYPE declaration syntax.
• How to use the opening <html> element.
• How to use the shorter versions of the various elements in the <head> section.
Let's look more closely at these differences by examining hello.html, the HTML5 equival-
ent of a “Hello, World!” application, shown in the following listing.