Download - HTML5 and CSS3
![Page 2: HTML5 and CSS3](https://reader033.vdocuments.net/reader033/viewer/2022061615/56815df9550346895dcc30cb/html5/thumbnails/2.jpg)
CHAPTER 2
MARKUP, HTML5 STYLE
![Page 3: HTML5 and CSS3](https://reader033.vdocuments.net/reader033/viewer/2022061615/56815df9550346895dcc30cb/html5/thumbnails/3.jpg)
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
![Page 4: HTML5 and CSS3](https://reader033.vdocuments.net/reader033/viewer/2022061615/56815df9550346895dcc30cb/html5/thumbnails/4.jpg)
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
![Page 5: HTML5 and CSS3](https://reader033.vdocuments.net/reader033/viewer/2022061615/56815df9550346895dcc30cb/html5/thumbnails/5.jpg)
DOCTYPEHTML 4.01…
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN“ "http://www.w3.org/TR/html4/strict.dtd">
![Page 6: HTML5 and CSS3](https://reader033.vdocuments.net/reader033/viewer/2022061615/56815df9550346895dcc30cb/html5/thumbnails/6.jpg)
DOCTYPEXHTML 1.0…
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN“ "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd">
![Page 7: HTML5 and CSS3](https://reader033.vdocuments.net/reader033/viewer/2022061615/56815df9550346895dcc30cb/html5/thumbnails/7.jpg)
DOCTYPEHTML 5…
<!DOCTYPE html>
![Page 8: HTML5 and CSS3](https://reader033.vdocuments.net/reader033/viewer/2022061615/56815df9550346895dcc30cb/html5/thumbnails/8.jpg)
Character SetHTML 4.01, XHTML 1.0…
<meta http-equiv="Content-Type“ content="text/html; charset=utf-8">
![Page 9: HTML5 and CSS3](https://reader033.vdocuments.net/reader033/viewer/2022061615/56815df9550346895dcc30cb/html5/thumbnails/9.jpg)
Character SetHTML 5…
<meta charset=“utf-8">
![Page 10: HTML5 and CSS3](https://reader033.vdocuments.net/reader033/viewer/2022061615/56815df9550346895dcc30cb/html5/thumbnails/10.jpg)
Style SheetsHTML 4.01, XHTML 1.0…
<link rel="stylesheet" type="text/css“ href="./css/styles.css?v=1.0">
![Page 11: HTML5 and CSS3](https://reader033.vdocuments.net/reader033/viewer/2022061615/56815df9550346895dcc30cb/html5/thumbnails/11.jpg)
Style SheetsHTML 5…
<link rel="stylesheet“ href="./css/styles.css?v=1.0">
![Page 12: HTML5 and CSS3](https://reader033.vdocuments.net/reader033/viewer/2022061615/56815df9550346895dcc30cb/html5/thumbnails/12.jpg)
JavaScriptHTML 4.01, XHTML 1.0…
<script src="js/scripts.js“ type="text/javascript"></script>
![Page 13: HTML5 and CSS3](https://reader033.vdocuments.net/reader033/viewer/2022061615/56815df9550346895dcc30cb/html5/thumbnails/13.jpg)
JavaScriptHTML 5…
<script src="js/scripts.js"></script>
![Page 14: HTML5 and CSS3](https://reader033.vdocuments.net/reader033/viewer/2022061615/56815df9550346895dcc30cb/html5/thumbnails/14.jpg)
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">
![Page 15: HTML5 and CSS3](https://reader033.vdocuments.net/reader033/viewer/2022061615/56815df9550346895dcc30cb/html5/thumbnails/15.jpg)
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">
![Page 16: HTML5 and CSS3](https://reader033.vdocuments.net/reader033/viewer/2022061615/56815df9550346895dcc30cb/html5/thumbnails/16.jpg)
XHTML Differences Quoting attribute values isn’t necessary
<link rel="stylesheet“ href="css/styles.css">
<link rel=stylesheet href=css/styles.css>
![Page 17: HTML5 and CSS3](https://reader033.vdocuments.net/reader033/viewer/2022061615/56815df9550346895dcc30cb/html5/thumbnails/17.jpg)
XHTML Differences Boolean attributes don’t need values
<input type=“checkbox” checked=“checked”>
<input type=“checkbox” checked>
![Page 18: HTML5 and CSS3](https://reader033.vdocuments.net/reader033/viewer/2022061615/56815df9550346895dcc30cb/html5/thumbnails/18.jpg)
HTML5 Compatibility HMTL5 introduces some new element
tags Most older browsers don’t care
Unknown element tags are rendered as inline <div> elements
However, IE8 and earlier won’t apply styling to unknown element tagsUse html5shiv.js
![Page 19: HTML5 and CSS3](https://reader033.vdocuments.net/reader033/viewer/2022061615/56815df9550346895dcc30cb/html5/thumbnails/19.jpg)
Page Structure
![Page 20: HTML5 and CSS3](https://reader033.vdocuments.net/reader033/viewer/2022061615/56815df9550346895dcc30cb/html5/thumbnails/20.jpg)
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
![Page 21: HTML5 and CSS3](https://reader033.vdocuments.net/reader033/viewer/2022061615/56815df9550346895dcc30cb/html5/thumbnails/21.jpg)
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
![Page 22: HTML5 and CSS3](https://reader033.vdocuments.net/reader033/viewer/2022061615/56815df9550346895dcc30cb/html5/thumbnails/22.jpg)
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
![Page 23: HTML5 and CSS3](https://reader033.vdocuments.net/reader033/viewer/2022061615/56815df9550346895dcc30cb/html5/thumbnails/23.jpg)
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
![Page 24: HTML5 and CSS3](https://reader033.vdocuments.net/reader033/viewer/2022061615/56815df9550346895dcc30cb/html5/thumbnails/24.jpg)
The article element Similar to section, but… Self-contained composition Independently distributable Possible examples:
Forum postsMagazine articlesBlog postsUser comments
![Page 25: HTML5 and CSS3](https://reader033.vdocuments.net/reader033/viewer/2022061615/56815df9550346895dcc30cb/html5/thumbnails/25.jpg)
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
![Page 26: HTML5 and CSS3](https://reader033.vdocuments.net/reader033/viewer/2022061615/56815df9550346895dcc30cb/html5/thumbnails/26.jpg)
The aside element Marks content that is tangentially related
to the content around it or the content on the page
Possible examples:Side barAdvertisements
![Page 27: HTML5 and CSS3](https://reader033.vdocuments.net/reader033/viewer/2022061615/56815df9550346895dcc30cb/html5/thumbnails/27.jpg)
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 28: HTML5 and CSS3](https://reader033.vdocuments.net/reader033/viewer/2022061615/56815df9550346895dcc30cb/html5/thumbnails/28.jpg)
Page Structure Revisited How would we update the HTML Herald
page layout to use the new HTML5 elements?headernavsectionarticleasidefooter