Lesson 4: Using HTML5 Markup

 The distinguishing characteristics of HTML5 syntax  The new HTML5 sectioning elements  Adding support for HTML5 elements in browsers  HTML5 document outlines  An overview of the additional HTML5 elements  How to convert a standard HTML page to HTML5 This presentation covers:

HTML5 syntax  The rules for HTML5 syntax are less strict than either HTML 4.0 or XHTML 1.0. –HTML5 is case insensitive, meaning that you can use uppercase tags, lowercase tags or even a mixture of the two and the page will still validate. –The closing tags for elements are not required. –Attribute quotes are optional. For example, the following code is valid:  One result of these rules is that HTML5 documents are backwards compatible with older browsers and also compatible with newer browsers.

The HTML5 DOCTYPE Identifying that a document is HTML5 is extremely simple and less complex than either HTML 4.0 or XHTML 1.0.  The DOCTYPE for the transitional version of HTML (4.0.1)  The DOCTYPE for the strict version of XHTML 1.0  The DOCTYPE for HTML5

The HTML5 sectioning elements  HTML5 contains the majority of tags found in both HTML 4.0 and XHTML 1.0. The most notable new elements are categorized as sectioning elements.  The W3C explains sectioning content as “…defin[ing] the scope of headings and footers.” The four new elements in this category are,,, and.  The and elements are also new, but are technically considered Flow content, not Sectioning content.

The new structural elements reduce the existing reliance on the tag Typically you would use the div element, paired with a CSS class or ID, to define the layout of this page. Etc.

The problem with divs  The problem with div elements is that the CSS class and ID names used to distinguish layout elements are arbitrary. What one calls “header” another might call “masthead”. This results in non- standardized code.  Div tags are not specific enough. A web browser (or another device) has no way of distinguishing which part of the page is a header or the navigation or the sidebar, etc.

How were the names of the new HTML5 elements chosen? As the language of HTML5 was being developed, the architects of the specification polled working designers and developers and identified the most common names for page layout and used these as a model for the new HTML5 elements.

The specification for HTML5 elements An invaluable resource is the official specification for HTML5 syntax published online by the WHATWG (Web Hypertext Application Technology Working Group). This is an evolving document specifically formatted for designer and developer use.

New HTML5 elements

Browser support for HTML5 features needs to be considered  All older web browsers need help with rendering HTML5 elements.  Some of this support is easier to add than others. –You need to add the new styles to a style sheet to force HTML5 elements to be rendered as block, not inline. header, section, aside, nav, footer { display: block }  This support is not enough for older versions of Internet Explorer.

The Modernizr library For versions 6,7 & 8 of Internet Explorer to render HTML5 correctly, some sort of JavaScript solution is needed. This Modernizr JavaScript library is referenced on all pages of your HTML5 site and will test all visiting browsers support of HTML5 features and provide fixes as needed. Modernizr.com

The element  The element is a more specific tag that allows you to specify a special role for content. Typical examples of header content would be to group the introductory content and/or navigation on a page. This might also include a search form or any relevant logos.  Most importantly, you may use more than one header on a page. Each section of a page can have its own header.

The header element is used to group relevant content in different sections of the page

The element  The element is similar to headers in that it can be used multiple times for different parts of the page. Most pages would have a “site-wide” footer as well as any footers within different sections.  A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and other similar information.

The element  The element is also similar to the header and footer element in that you might have more than one navigation section on a page. (Site-wide navigation and page navigation for example.)  The nav element is primarily intended for sections of the page that consist of major navigation blocks. Navigation blocks will include links to other pages on the site (or external links).

The element A distinct and often self-contained part of a document, the element is used when you need to divide important and related content, such as text and images, into logical areas. Important info about your 401k Important info about Employee Benefits

The element The element is an independent, self-contained block of related content: How to use your new Windows 7 smartphone There are a few tips and tricks you should know in order to get the most out of your smartphone....

Section vs. Article  The element and the element are potentially the most confusing of the new HTML5 elements. The key to understanding the difference is connected to the content. The element is reserved for content that could stand alone and out of context of the rest of the site.  Content within an might be published to a website and simultaneously to a RSS news feed or a mobile application, for example.

There is flexibility in the way pages are organized The element and the element are not mutually exclusive. In fact, there are scenarios where a section might include one or more article elements. Alternatively, a large article might contain one or more sections.

Div elements are still important!  Although the new HTML5 elements reduce the reliance on div elements, they still have an important role.  A div element should be used for style and/or layout purposes, such as a container that only has a background image or a container that nests other layout elements.

The element  The element essentially replaces the role of a sidebar and is used for content that is considered separate from the main content.  The element is often used as a page layout element but can also be used within a section or articles as pull quotes.

Sectioning and document outlines  The new sectioning elements in HTML5 documents have a function in HTML5 that is somewhat new. These sectioning elements create a document outline automatically.  Think of a document outline as “table of contents” that is built from the structure of an HTML page. This analogy is a bit dangerous because the document outline is not visible by default.

The structure of a document outline Welcome to our site The best website in the world! Site Navigation Breaking News Car overturns on highway Document Outline 1. Welcome to our site 1. Site Navigation 2. Breaking News 1. Car Overturns on Highway

Document outlines are currently more abstract then they are practical  The benefits of document outlines are not immediately apparent with today’s web browsers and mobile devices, but they will likely be useful for assistive devices, such as screen readers.  An HTML5-enabled screen reader might encounter a page with the element and choose to skip the nav, give the user the option to skip it, or read each item within the nav.

There are additional new elements  Acts as a wrapper for one or more related heading elements. It can only contain a group of – element(s).  The element is intended to be used with the element to mark up diagrams, illustrations, photos, and more.

An interactive way to see all of the new HTML5 elements The HTML5 Semantic Notepad at ie.microsoft.com/testdrive provides an interactive way to learn the new HTML5 elementsie.microsoft.com/testdrive

Summary In this presentation you learned:  Distinguishing characteristics of HTML5 syntax  New HTML5 sectioning elements  Adding support for HTML5 elements in browsers  The role of HTML5 document outlines  Overview of the additional HTML5 elements  Converting a standard HTML page to HTML5