Just HTML5 - Making A Basic Page The Right Way

Just HTML5 – Making A Basic Page The Right Way

After seeing the W3 present HTML5 I have created a new example of how you can structure a page using the new semantic HTML tags. This example does not use CSS3 to style the page the way my previous one did....

Twitter Facebook Digg Delicious Stumble RSS Email

In Case You Haven't Heard

I wanted to make this a separate post since the other one I posted prior to going to the meetup with W3 is already rather long. The reason I have not yet updated that other post yet is because of the fact I went and saw presentations by the W3 on HTML5, CSS3, SVG, and Canvas. I should have expected to be very busy after going to that given the fact I would learn things I wanted to try.

So in keeping this short since I am so busy, here you go.

Demo 1

Demo 2

Step 1. The HTML

Here is the new HTML5 code structure, which is better than the previous page I created, and then went over board playing with the CSS3. First you create the head, and the header of the page.

<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset=utf-8>
	<title>Just HTML5</title>
	<link rel="stylesheet" href="justhtml5.css" type="text/css" media="screen,projection">
</head>
<body>

<div id="headwrap">
	<nav id="subnav">
		<ul>
			<li><a href="#">Sub Link 1</a></li>
			<li><a href="#">Sub Link 2</a></li>
			<li><a href="#">Sub Link 3</a></li>
		</ul>
	</nav>
	<header role="head">
		<hgroup>
			<h1 class="logo"><a href="/">Just HTML5</a></h1>
			<h2 class="tagline">a basic HTML5 page</h2>
		</hgroup>
	</header>
	<nav>
		<ul>
			<li><a href="#">Link 1</a></li>
			<li><a href="#">Link 2</a></li>
			<li><a href="#">Link 3</a></li>
		</ul>
	</nav>
</div>
<div id="content">

That will give us some navigation, logo etc. Note the opened 'content' div at the end. Then the main content for posts would done like this.


    <div class="main" role="main">
        <article class="entry">
            <header>
                <h1>Basic Page Structure Using HTML5</h1>
            </header>
                <div class="post">
                    <article>
                        <h2>What is this for?</h2>
                        <p>
                            HTML5 adds semantics to the page, so browsers now knows which area of your site is the header, footer, etc.
                        </p>
                        <footer>
                            <div>
                                <span>Posted on <time>Date/Time</time></span>
                            </div>
                            <p>Category: <a href="#">HTML5</a></p>
                            <p>Tags: <a href="#">HTML5</a>, <a href="#">Semantics</a></p>
                        </footer>
                    </article>
                </div>
        </article>
    </div><!-- // Main -->

Here is the sidebar of the page, which uses the <asides> tag.

	<aside role="complementary">
		<nav>
			<h3>Nav 1</h3>
			<ul class="recent">
				<li><a href="#">Link 1</a></li>
				<li><a href="#">Link 2</a></li>
				<li><a href="#">Link 3</a></li>
			</ul>
		</nav>
		<nav>
			<h3>Nav 2</h3>
			<ul>
				<li><a href="#">Link 1</a></li>
				<li><a href="#">Link 2</a></li>
				<li><a href="#">Link 3</a></li>
			</ul>
		</nav>
		<nav>
			<h3>Nav 3</h3>
			<ul>
				<li><a href="#">Link 1</a></li>
				<li><a href="#">Link 2</a></li>
				<li><a href="#">Link 3</a></li>
			</ul>
		</nav>
		<nav>
			<h3>Nav 4</h3>
			<ul>
				<li><a href="#">Link 1</a></li>
				<li><a href="#">Link 2</a></li>
				<li><a href="#">Link 3</a></li>
			</ul>
		</nav>
	</aside><!-- // End Aside/Sidebar -->

Finally, you have the footer. Which includes the closing 'content' div tag

</div><!-- // End Content -->

<footer role="contentinfo">
	<p>This is the page footer where you would put copyright info maybe a sub menu of site pages, etc.</p>
</footer>

</body>
</html>

This is nothing really knew from my previous post, but the structure of the tags is set up differently. The CSS for styling this is, however, very different from the other example in that it uses different selectors. I'm not going to go much into it though since it should be self-explanatory.

Step 2. The CSS

Header and main content styles.

@import "css/reset.css"; /*--- Stylesheet Reset ---*/
body {
	width:960px;
	margin:0 auto;
	font:normal 14px Arial, Helvetica, sans-serif;
	padding:0 10px;
	background:#333;
	color:#fff;
}
#subnav {
	display: block;
	position: relative;
	top:0;
	left:-9999;
	background:#222;
	border:1px solid #888;
	border-top:none;
}
#subnav a { color:#888; }
#subnav:focus { left: 0; }
header { margin:10px 0; }

/************* MAIN CONTENT ***************/
h1.logo, h2.logo {
	float:left;
	border:none;
	background:none;
	font-family:"Palatino Linotype", Palatino, "Rockwell", "Times New Roman", Times, serif;
	font-size:30px;
}
h1.logo a, h2.logo a {
	display:block;
	border-bottom:0;
	text-align:left;
	padding:40px 0 0 0;
}
h1.logo a:hover, h2.logo a:hover {
	background:none;
}
.tagline {
	float:right;
	text-align:right;
	padding:60px 0 0 0;
	font-size:18px;
	color:#888;
	font-weight:normal;
	letter-spacing:0.1em;
}
nav {
	border-bottom:2px solid #999;
	border-top:2px solid #999;
	background:#666;
	float:left;
	width:100%;
	font-family:"Palatino Linotype", Palatino, "Rockwell", "Times New Roman", Times, serif;
	font-weight:bold;
	margin-bottom:15px;
}
nav  ul {
	padding:0 5px;
	list-style:none;
	margin:0 0 0 20px;
}
.nav-footer { margin:0; }
.nav-footer ul { margin:0 0 0 0; }
nav li {
	display:block;
	float:left;
	width:auto;
	margin:2px 10px 2px 0;
	padding:3px 0;
}
nav a {
	padding:5px 10px;
	color:#000;
	text-decoration:none;
}
#content {
	clear:both;
	float:left;
	width:100%;
	margin-top:0;
	padding-top:0;
	border-top:0;
}
.main div nav {
	border:0;
	float:right;
	width:100%;
	text-align:right;
	margin:15px 0;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	padding:10px 0 0 0 ;
	border-top:1px solid #ccc;
}
.main footer a:hover {
	background:#E3E3E3;
	color:#000;
	text-decoration:none;
	text-shadow:none;
}
.main {
	float:left;
	width:660px;
	padding-right:15px;
}
.main > h1 {
	padding-left:35px;
}
article {
	padding:10px 0 10px 32px;
}
article header { margin:0; }
article footer {
	padding:0 3px;
	color:#999;
}
article footer p, article footer div {
	padding-bottom:0;
	font-size:12px;
}
article footer div p {
	float:right;
	width:50%;
	text-align:right;
}
article footer a { color:#999; }
article footer a:hover {
	color:#0481b5;
}

Then you have the sidebar styles.

/****************** START SIDEBAR ******************/
#content aside {
	float:right;
	width:270px;
	margin-left:15px;
	text-indent:15px;
	background:#808080;
}
#content aside section, #content aside div, #content aside nav {
	margin-bottom:15px;
	margin-top:15px;
	padding-bottom:10px;
	clear:both;
}
#content aside ul {
	list-style:none;
	line-height:2;
	font-size:12px;
	margin:0;
	padding:0;
	font-family:Arial, Helvetica, sans-serif;
	font-weight:normal;
}
#content aside nav { border:0; background:#222; }
#content aside nav li {
	padding:0;
	margin:0;
	float:none;
}
#content aside nav a { color:#999; }
#content aside h3 {
	font-size:16px;
	padding:0px 0;
}
#content aside section p, #content aside nav p {
	text-indent:0;
	padding-left:5px;
}
/************** END SIDEBAR *****************/

Here is just some more general styling, used in various areas of the page depending on which elements you put where.

footer {
	clear:both;
	padding:15px;
}
footer p {
	padding-left:0;
	padding-right:0;
}
footer[role="contentinfo"] p { /* Site footer */
	font-size:12px;
	clear:both;
}
h1, h2, h3, h4, h5, h6 {
	font-family:"Palatino Linotype", Palatino, "Rockwell", "Times New Roman", Times, serif;
	padding-bottom:5px;
}
h1 { font-size:30px; }
article h1, header hgroup h1 {
	padding-left:0;
	font-size:24px;
}
h1 a {
	text-decoration:none;
	color:#999;
	padding:2px;
	text-shadow:0px 3px 2px rgba(0, 0, 0, .5%);
}
h1 a:hover {
	background:#ccc;
	color:#777;
	text-shadow:0px 1px 0px rgba(255,255,255,0.5%);
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	border-radius:5px;
}
h2, h3, h4, h5, h6 { padding:2px; }
h2 { font-size:18px; }
.entry-content h2 { margin-top:12px; }
h3 { font-size:16px; }
h4 {
	font-size:14px;
	text-transform:uppercase;
}
h5, h6 {
	font-size:14px;
	font-style:italic;
}
a {
	color:#888;
	text-decoration:none;
	text-shadow:0px 3px 2px rgba(0, 0, 0, .5%);
}
p {
	font-size:12px;
	padding:0 2px 10px 2px;
}
p a, article ul a, article ol a {
	text-decoration:none;
	padding:2px 3px;
}
p a:hover, article ul a:hover, article ol a:hover {
	background:#ccc;
	color:#fff;
	text-shadow:1px 1px 1px #000;
}
.entry-content > p:first-of-type { font-size:16px; }
article footer p, article footer span {
	padding:0;
	font-size:11px;
}
article footer a {
	color:#999;
	background:none;
	text-decoration:underline;
	padding:0;
	text-shadow:0;
}
article footer p a:hover {
	background:none;
	color:#0481b5;
	text-decoration:underline;
}

You can of course experiment and play with the settings of the Stylesheet to see what you can create with it. It's really very cool, and easy to do.

Step 3.

Leave a comment if you have any questions, and check out the demo pages 1 and 2 to see how this looks. Hope this helps you understand the usage of these a bit more and how some of the HTML5 tags can be used within each area of a page.

I will be hopefully able to get my review of the W3 meetup event up by the end of this week. I have so many things I have been working on since attending that and haven't had the time to do it, but it is half done.

Shortlink:

Get automatic updates! Subscribe to Our RSS Feed or Get Email Updates sent straight to your inbox!

About the Author

Jared is from Boston working as a web and graphic designer. Also owns the design blog Tweeaks.com, and has designed many other websites powered by Wordpress including the New2WP theme.

Visit Jared's Website Follow Jared on Twitter

Level: Rookie Posted by: Jared

User Comments

( ADD YOURS )

WPExplorer April 28

CSS3 and HTML5 have added the capabilities every web designer has been dreaming of for a long time...Sorry photoshop I don't really need you anymore :)
Jared April 28

Haha, yeah it's funny you say that actually. I have been realizing the same thing with a new theme I'm working on. I've done pretty much all the stuff I'd normally create images for by coding CSS3 and HTML5 instead. It's really long overdue.
Timmy March 23

Hallo.. There is a useful live example of how to use the article and section elements at Brugbart.

http://brugbart.com/Visions/article-section-header-footer-example

Trackbacks

Add Your Comment

( Get A Gravatar )

Your Name
February 4

Your Message... Name... Email... Website...
Cancel

Subscribe to comments Notify me of followup comments via e-mail