Use more semantic elements in header and footer.

Also, put the page title in the header.

3 files changed, 31 insertions, 19 deletions

diff --git a/includes/footer.html b/includes/footer.html
index 9f67910..4cbebd6 100755
--- a/includes/footer.html
+++ b/includes/footer.html
@@ -1,6 +1,6 @@
 			<p style="clear: both;"></p>
-		</div>
-		<div class="footer">
+		</section>
+		<footer>
 			<p class="copyright">
 				Copyright &copy; 2011-2012 Patrick "P. J." M<span class="super">c</span>Dermott
 			</p>
@@ -27,6 +27,6 @@
 				Last modified: <!--#echo var="LAST_MODIFIED" --> EDT<br>
 				Retrieved: <!--#echo var="DATE_LOCAL" --> EDT
 			</p>
-		</div>
+		</footer>
 	</body>
 </html>
diff --git a/includes/header.html b/includes/header.html
index 959d48a..e952fe7 100755
--- a/includes/header.html
+++ b/includes/header.html
@@ -47,7 +47,7 @@ var="MEDIA_BASE" -->/main.css">
 			<h1><a href="<!--#echo var="DOCUMENT_BASE" -->/">P. J. M<span class="super">c</span>Dermott</a></h1>
 			<p>Software and hardware hacker and advocate for software and cultural freedom.</p>
 		</header>
-		<div class="menu">
+		<nav>
 			<ul>
 				<li>
 					<a href="<!--#echo var="DOCUMENT_BASE"
@@ -74,6 +74,18 @@ var="MEDIA_BASE" -->/main.css">
 -->/projects/">Projects</a>
 				</li>
 			</ul>
-		</div>
-		<div class="body">
-			<a id="body"></a>
+		</nav>
+		<section id="body">
+<!--#if expr="'$__SSIC__' eq '__SSIC__'" -->
+	<!-- Apache HTTPd mod_include -->
+	<!--#if expr="$title != ''" -->
+	<!--#else -->
+			<h1><!--#echo var="title" --></h1>
+	<!--#endif -->
+<!--#else -->
+	<!-- Server Side Includes Compiler -->
+	<!--#if expr="'$title' ne ''" -->
+			<h1><!--#echo var="title" --></h1>
+	<!--#endif -->
+<!--#endif -->
+			<article>
diff --git a/main.css b/main.css
index 9c095e3..b3f7359 100644
--- a/main.css
+++ b/main.css
@@ -70,67 +70,67 @@ header>p {
 	margin: 0px 0px 0px 0px;
 }
 
-div.menu {
+nav {
 	margin: 0px 0px 0px 0px;
 	padding: 0px 72px 0px 72px;
 	background-color: #CC4433;
 	text-align: center;
 }
-div.menu ul {
+nav>ul {
 	list-style-type: none;
 	margin: 0px;
 	padding: 12px 0px 12px 0px;
 }
-div.menu ul li {
+nav>ul>li {
 	display: inline;
 	font-family: sans-serif;
 	font-size: 12pt;
 }
-div.menu ul li a {
+nav>ul>li>a, nav>ul>li>a:visited {
 	color: #FFFFFF;
 	font-weight: bold;
 	font-size: 12pt;
 	text-decoration: none;
 	padding: 12px;
 }
-div.menu ul li a:hover {
+nav>ul>li>a:hover {
 	color: #FFFFAA;
 	background-color: #BB3311;
 	font-weight: bold;
 	text-decoration: none;
 }
 
-div.body {
+body>section {
 	margin: 24px 64px 8px 64px;
 	font-family: serif;
 }
 
-div.footer {
+footer {
 	margin: 32px 8px 8px 8px;
 	padding-top: 8px;
 	font-family: sans-serif;
 	border-top: 1px solid #666666;
 }
-div.footer p.copyright {
+footer p.copyright {
 	margin-top: 0px;
 }
-div.footer p.dates {
+footer p.dates {
 	margin-bottom: 0px;
 }
-div.footer p.web-site {
+footer p.web-site {
 	float: right;
 	margin-top: 0px;
 	margin-bottom: 0px;
 	text-align: right;
 }
-div.footer p.license img {
+footer p.license img {
 	float: left;
 	/*vertical-align: middle;*/
 	margin: 0px 8px 8px 0px;
 }
 
 /* Homepage */
-div.body img.photo {
+body>section img.photo {
 	float: right;
 	margin: 0px 0px 16px 16px;
 	width: 240px;