1 / 15

HTML5 and CSS3

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.

iolana
Download Presentation

HTML5 and CSS3

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Neal Stublen nstublen@jccc.edu HTML5 and CSS3

  2. Chapter 2Markup, HTML5 Style

  3. 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

  4. 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

  5. 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

  6. 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>

  7. 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

  8. 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

  9. 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

  10. 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

  11. The article element • Similar to section, but… • Self-contained composition • Independently distributable • Possible examples: • Forum posts • Magazine articles • Blog posts • User comments

  12. 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

  13. 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

  14. 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

  15. Page Structure Revisted • How would we update the HTML Herald page layout to use the new HTML5 elements?

More Related