28
| Date post: | 16-Dec-2015 |
| Category: |
Documents |
| Upload: | clemence-magdalen-knight |
| View: | 218 times |
| Download: | 1 times |
CHAPTER 2
MARKUP, HTML5 STYLE
A Basic Template
HTML doctypeMuch simpler than HTML4/XHTML
Title and meta contentAgain 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“ "http://www.w3.org/TR/html4/strict.dtd">
DOCTYPE
XHTML 1.0…
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN“ "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd">
DOCTYPE
HTML 5…
<!DOCTYPE html>
Character Set
HTML 4.01, XHTML 1.0…
<meta http-equiv="Content-Type“ content="text/html; charset=utf-8">
Character Set
HTML 5…
<meta charset=“utf-8">
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"></script>
JavaScript
HTML 5…
<script src="js/scripts.js"></script>
XHTML Differences
Void tags don’t need to be closedBut 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”>
<input type=“checkbox” checked>
HTML5 Compatibility
HMTL5 introduces some new element tags
Most older browsers don’t careUnknown element tags are rendered as
inline <div> elements However, IE8 and earlier won’t apply
styling to unknown element tagsUse html5shiv.js
Page Structure
Page Structure
Look at the page we want to design for the HTML Herald. How would we create the page structure using <div> elements?Header with navigation linksContent area with three columnsFooter
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 implementationUseful 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 pageThe entire pageA section of the pageBoth
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 possiblearticle, aside, nav
The article element
Similar to section, but… Self-contained composition Independently distributable Possible examples:
Forum postsMagazine articlesBlog postsUser 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 barAdvertisements
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 pageInformation about an author
Page Structure Revisited
How would we update the HTML Herald page layout to use the new HTML5 elements?headernavsectionarticleasidefooter
