Take a look at this code listing. Careful examination of this short listing shows quite a bit of HTML, but only indirect references to CSS. It’s the listing for the HTML5 Café Home Page.
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>HTML5 Cafe: Home</title>
<meta name="description" content="sample site for 9781118657201">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div id="container">
<nav id="topnav">
<a href="index.html">HOME</a> |
<a href="about.html">ABOUT US</a> |
<a href="menu.html">MENU</a> |
<a href="contact.html">CONTACT US</a>
</nav>
<div id="content">
<h1>Welcome to HTML5 Cafe!</h1>
<p>Here you will find all sorts of delicious HTML5 and CSS3 treats.
This is the sample site for <a href=
"http://www.amazon.com/Beginning-HTML5-CSS3-Dummies-
Computer/dp/1118657209">Beginning HTML5 and CSS3 for Dummies</a>,
by <a href="http://www.edtittel.com">Ed Tittel</a> and
<a href="http://www.chrisminnick.com">Chris Minnick</a>. To view
all of the code samples from the book, visit the
<a href="menu.html">Menu</a>.
</p>
<figure id="home-image">
<img src="img/pitr_Coffee_cup_icon.png"
width="400" height="400" alt="delicious coffee">
<figcaption class="warning">powered by coffee.</figcaption>
</figure>
</div>
<footer>
copyright © dummieshtml.com
</footer>
</div>
</body>
</html>
The HTML elements you see in this listing are as follows, in their order of appearance:
The tag starts the web page, and ends it.
The markup between and defines general information for the entire web page.
The text inside the
element provides the page title. The element provides information about page content and display layout.
A element establishes a link to an external resource; in this case, to two different CSS style sheets.
The markup between and supplies actual page content.
The element defines two different content divisions on the page, one for navigation, the other for page content.
The navigation element defines a navigation bar.
The heading1 element defines a level-1 heading.
The paragraph element defines a paragraph of text.
A figure
element defines a graphic with a caption. The image element links to a graphic for display, with horizontal and vertical dimensions and alternative text in case the image doesn’t appear.
A figure caption
element labels the figure caption. A document footer element defines text for the bottom of the page.
Put all these elements together, add attribute values and text, and you have the web page shown here.
