Yah, it was one of those days, no it wasn't dark, dreary and stormy. Not a chance, it was time for Web Class and out side it was even partially sunny with a slight evening breeze.
We we're learning how to divide, section, slice-up --layout a web page. Instead of using the old xhtml style of using well named div's we were implementing features from the new kid on the block, html5.
In html5 it's a really good idea to contain or wrap ALL the sections of the layout with a <div> element. This changes the relationship of the pages sections from being related directly to the <body> of the page. The sections will now be the "child" of the containing wrapper <div>. That way we can move the entire layout by simply centering the wrapper div, or making the entire layout fluid so it always fills the page 100% no matter the size of the browser window.
So, to begin, our markup looked like this… We gave the wrapper a specific size and background color so we could actually see it on the page… we also decided the layout would be fixed and centered in the browser's screen.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>A Very Basic HTML5 Web Page</title>
<style type="text/css" media="screen">
html, body, div, header, footer, aside, nav, article, section, { margin: 0; padding: 0; }
header, footer, aside, nav, article, section { display: block; }
#wrapper {width: 960px;
height: 768px;
background-color: #ddd;
margin: 0 auto;
banner {width: 960px;
height: 160px;
background-color: yellow; }
</style>
<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->
</head>
<body>
<div id="wrapper">
</div> <!-- Comment: closing div for the wrapper -->
</body>
</html>
But, you'll notice a very interesting declaration in the embedded styles
header, footer, aside, nav, article, section { display: block; }
and, this where we found the dead banner! Let me explain.
The first "thing" that appears on a web page, I like to call the "banner" in xhtml that's what I name the id for that part of the page, <div id = "banner">!
In html5 there are very specific, well defined names for dividing up a web page. Google searched and analyzed 3 Billion web pages to find common id names for web page divisions, and later the html5 consortium searched and anaylsed 3 Million web pages… and, the common division names are: header, nav and footer.
Somewhere, a long time ago, in the mists of the past I had read that you could, if you wanted to, you could use any name for a division of an html5 web page and long as you declared it, and told the browsers to make it display like a block element… So as an <aside> (to me, anyway) using <banner> instead of <header>, is much less confusing, since in html5, headings and <head> also exist.
Even possibly more confusing is the fact that in html5 a <header> is defined to contain heading elements, namely <h1> and even <h2>, <h3>, etc., Also, if necessary, there can be more than one <header> on a single page! Maybe confusing for humans, not so for computers.
So, I went a head and added <banner> to the above declarations, and added some styles to the <banner>
The page markup now looked like this… but when displayed in a browser, the <banner> was no where to be seen, not at all visible, it was dead…. Try it and see for yourself (just cut and paste)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>A Very Basic HTML5 Web Page</title>
<style type="text/css" media="screen">
html, body, div, banner, header, footer, aside, nav, article, section, { margin: 0; padding: 0; }
banner, header, footer, aside, nav, article, section { display: block; }
#wrapper {width: 960px;
height: 768px;
background-color: #ddd;
margin: 0 auto;
banner {width: 960px;
height: 160px;
background-color: yellow; }
banner { width: 960px;
height:150px;
back-ground-color: yellow;}
</style>
<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->
</head>
<body>
<div id="wrapper">
<banner>
<h1>An h1 heading for our web page</h1>
<h2>A slug line for our banner</h2>
</banner>
</div> <!-- Comment: closing div for the wrapper -->
</body>
</html>
As, you can see the <banner> , does not show up in a browser, it's gone, missing, it's dead!
In html5 the parts or divisions of the layout on a web page are well defined. Html5 uses a very precise language called semantics to describe the various parts of the layout.
Semantics, definition: the meaning, or an interpretation of the meaning of a word…
One of the reasons for using well defined words is so that a computer (not humans?) can find a "section," an "article" or the "header" on any web page easily and quickly…
The well defined words for html5 layout are: header, footer, aside, nav, article, section
In our markup above, if you replace <banner> with <header> The header for our web page will display in all browsers just fine.
It was Sematics that killed the <banner>!
Using html5's well defined words, well, puts us all on the same page...
To learn more about the sematics for header, footer, aside, nav, article, and section read this document. (It's also on your class disk.)
There are many articles written about the html5 semantics, just do a Google search using the phrase
html5 semantics
Today the sun is shinning on our web pages, even though it's raining outside, again, in dreary Vancouver, WA
