HTML5 and CSS3
28
description
Neal Stublen [email protected]. 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. - PowerPoint PPT Presentation
Transcript of 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 Simplifications were introduced after
determining what could be removed while still working with modern browsers
None of these document changes should fail to render
DOCTYPEHTML 4.01…
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN“ "http://www.w3.org/TR/html4/strict.dtd">
DOCTYPEXHTML 1.0…
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN“ "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd">
DOCTYPEHTML 5…
<!DOCTYPE html>
Character SetHTML 4.01, XHTML 1.0…
<meta http-equiv="Content-Type“ content="text/html; charset=utf-8">
Character SetHTML 5…
<meta charset=“utf-8">
Style SheetsHTML 4.01, XHTML 1.0…
<link rel="stylesheet" type="text/css“ href="./css/styles.css?v=1.0">
Style SheetsHTML 5…
<link rel="stylesheet“ href="./css/styles.css?v=1.0">
JavaScriptHTML 4.01, XHTML 1.0…
<script src="js/scripts.js“ type="text/javascript"></script>
JavaScriptHTML 5…
<script src="js/scripts.js"></script>
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”>
<input type=“checkbox” checked>
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 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 possible
article, 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
