HTML and CSS Reference
In-Depth Information
So, what does this code mean?
The first line,
<!DOCTYPE html>
, specifies the type of markup the
document
(the technical term for a web page)
will use; in this case, it uses HTML.
Next is the
<head>
, which is the location where you place metadata about the web page. The template's
<head>
contains the charset (which tells the browser what character encoding to use) and the title of the page. You also use
<head>
to add resources such as stylesheets and JavaScript, among other metadata. Because the template is built
using HTML5 elements—which isn't supported by Internet Explorer 6, 7, and 8—a script is referenced here that
makes those browsers understand HTML5. Conditional comments are used to make the script apply only to Internet
Explorer versions below version 9. Conditional comments are explained in Chapter 15.
<head>
<meta charset=”utf-8” />
<title>Cool Shoes & Socks</title>
<!--[if lt IE 9]>
<script src=”http://html5shiv.googlecode.com/svn/trunk/html5.js”>
</script>
<![endif]-->
</head>
The
<body>
tags follow the closing
</head>
tag. Here, you place the structure and content of the page:
<body>
...
</body>
Inside the
<body>
tags is the header of the web page:
<header id=”header” class=”group” role=”banner”>
<a href=”#” title=”Return to the front page”>
<img class=”logo” src=”images/logo.png” alt=”Cool Shoes & Socks” />
</a>
<nav role=”navigation”>
<ul>
<li>
<a href=”#” title=”Return to the front page”>Home</a>
</li>
<li>
<a href=”#” title=”About Company Name”>About</a>
</li>
<li class=”products”>
<a href=”#” title=”Visit our shop”>Shop</a>
</li>
<li>
<a href=”#” title=”Contact us”>Contact</a>
</li>
</ul>
</nav>
</header>
