Neal Stublen
A Basic Template HTML doctype Much simpler than HTML4/XHTML Title and meta content Again simpler than “Content-Type” Link to your CSS Perhaps some JavaScript
HTML5 Compatibility Simplifications were introduced after determining what could be removed while still working with modern browsers None of these document changes should fail to render
DOCTYPE HTML 4.01… <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN“ "
DOCTYPE XHTML 1.0… <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN“ " transitional.dtd">
DOCTYPE HTML 5…
Character Set HTML 4.01, XHTML 1.0… <meta http-equiv="Content-Type“ content="text/html; charset=utf-8">
Character Set HTML 5…
Style Sheets HTML 4.01, XHTML 1.0… <link rel="stylesheet" type="text/css“ href="./css/styles.css?v=1.0">
Style Sheets HTML 5… <link rel="stylesheet“ href="./css/styles.css?v=1.0">
JavaScript HTML 4.01, XHTML 1.0… <script src="js/scripts.js“ type="text/javascript">
JavaScript HTML 5…
XHTML Differences Void tags don’t need to be closed But it’s still okay <link rel="stylesheet“ href="css/styles.css" /> <link rel="stylesheet“ href="css/styles.css">
XHTML Differences Uppercase/lowercase doesn’t matter on tags and attributes <link rel="stylesheet“ href="css/styles.css"> <LINK REL="stylesheet“ HREF="css/styles.css"> <Link Rel="stylesheet“ Href="css/styles.css">
XHTML Differences Quoting attribute values isn’t necessary <link rel="stylesheet“ href="css/styles.css"> <link rel=stylesheet href=css/styles.css>
XHTML Differences Boolean attributes don’t need values <input type=“checkbox” checked=“checked”>
HTML5 Compatibility HMTL5 introduces some new element tags Most older browsers don’t care Unknown element tags are rendered as inline elements However, IE8 and earlier won’t apply styling to unknown element tags Use html5shiv.js
Page Structure Look at the page we want to design for the HTML Herald. How would we create the page structure using elements? Header with navigation links Content area with three columns Footer
HTML5 “Semantic” Content Additions to HTML5 are intended to provide better descriptions of content Tag names imply meaning/purpose Not just divs… header, nav, section, article, aside, footer Why? Standard implementation Useful to non-human readers
The header element Contains introductory elements or navigational links The header is not defined by its location on the page, but its purpose within the page The entire page A section of the page Both
The section element Thematic grouping of content, typically with a heading If the content within the section isn’t related, use a div Prefer a more specific tag if possible article, aside, nav
The article element Similar to section, but… Self-contained composition Independently distributable Possible examples: Forum posts Magazine articles Blog posts User comments
The nav element Intended to wrap a set of navigation links that are of primary importance for the page May be links to pages within the site May be links to anchors within the page You can have multiple nav sections
The aside element Marks content that is tangentially related to the content around it or the content on the page Possible examples: Side bar Advertisements
The footer element Indicates footer content It may appear at the end of the page It may appear at the end of an article or section Does not necessarily imply anything about position on the page, but relationship to content on the page Information about an author
Page Structure Revisited How would we update the HTML Herald page layout to use the new HTML5 elements? header nav section article aside footer