220 likes | 416 Views
Neal Stublen nstublen@jccc.edu. HTML5 and CSS3. Chapter 2 Markup, HTML5 Style. 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.
E N D
Neal Stublen nstublen@jccc.edu HTML5 and CSS3
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
HTML5 Compatibility • HMTL5 introduces some new element tags • Most older browsers don’t care • However, IE8 and earlier won’t apply styling to unknown element tags • Use html5shiv.js
XHTML Differences • Tags don’t need to be closed • But it’s still okay • Uppercase/lowercase doesn’t matter on tags and attributes • Quoting attribute values isn’t necessary • Boolean attributes don’t need values • <input type=“checkbox” checked=“checked”> • <input type=“checkbox” checked>
Page Structure • Look at the page we want to design for the HTML Herald. How would we create the page layout? • 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 • 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 Revisted • How would we update the HTML Herald page layout to use the new HTML5 elements?