Selectors in action - step by step tutorial

Step 2 - drop in content

The next step involves adding content into five of the <div> elements. There are some browsers or devices that may view your page in this raw form - without any styling. For this reason, the content should be styled using the correct HTML elements, so it has meaning for these users.

This means that the main heading should be an <h1>. Navigation items should be lists and content should be placed in containers, such as <p> elements. The HTML code now looks like this:


HTML CODE
		
<body>
<div id="banner">
	<h1>Site name</h1>
</div>
<div id="container">
	<div id="container2">
		<div id="navigation">
			<ul>
				<li><a href="#">Nav item 1</a></li>
				<li><a href="#">Nav item 2</a></li>
				<li><a href="#">Nav item 3</a></li>
			</ul>
		</div>
		<div id="more">
			<h3>Find out more</h3>
			<p>Lorem ipsum.. </p>
		</div>
		<div id="content">
			<h2>Heading here</h2>
			<p>Lorem ipsum..</p>
		</div>
		<div id="cleardiv"></div>
	</div>
</div>
<div id="footer">
	<ul>
		<li><a href="#">Footer item 1</a></li>
		<li><a href="#">Footer item 2</a></li>
		<li><a href="#">Footer item 3</a></li>
		<li><a href="#">Copyright &copy; sitename</a></li>
	</ul>
</div>
</body> 

View step 2 »

Go to Step 3 »

Other Max Design articles and presentations
Associated with webstandardsgroup.org