summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorJoey Hess <joey@kitenet.net>2010-05-02 15:09:33 -0400
committerJoey Hess <joey@kitenet.net>2010-05-02 15:09:33 -0400
commitd69f6057d1e1787fa3c19cc13c40eb3e9b822283 (patch)
treeaa547dc8305255748fd281f715a179d181fbe1e5
parent7517d34da928bb9612c65fcde87cc434b7b7d653 (diff)
use html5 semantic markup in page.tmpl
This is a first pass, it avoids needing to change style.css except where it refers to tag types. This goes a bit off the rails at the pageheader with its nested header. Semantically, there should be an article around the whole page header, content, and footer. Just as there will be an article around a whole comment or inlined page header, content, and footer. But that will mean changing the css that currently refers to pageheader to refer to the enclosing article instead.
-rw-r--r--debian/changelog3
-rw-r--r--doc/style.css5
-rw-r--r--templates/page.tmpl49
3 files changed, 29 insertions, 28 deletions
diff --git a/debian/changelog b/debian/changelog
index c9fc2e657..789fda1ce 100644
--- a/debian/changelog
+++ b/debian/changelog
@@ -3,6 +3,9 @@ ikiwiki (3.20100502) UNRELEASED; urgency=low
* Add parameter to displaytime to specify that it is a pubdate,
and in html5 mode, use time tag.
* Add placeholder text in search form (in html5 mode only).
+ * In html5 mode, use all the nice new semantic tags. Care was taken
+ to not change the id/class named used in the CSS, so only CSS
+ that refers to tag types needed to be changed.
-- Joey Hess <joeyh@debian.org> Sun, 02 May 2010 13:22:50 -0400
diff --git a/doc/style.css b/doc/style.css
index 7ffcf9fe2..69c7f80d8 100644
--- a/doc/style.css
+++ b/doc/style.css
@@ -60,15 +60,12 @@ div.inlinecontent {
clear: both;
}
-.tags {
-}
-
#pageinfo {
margin: 1em 0;
border-top: 1px solid #000;
}
-div.tags {
+.tags {
margin-top: 1em;
}
diff --git a/templates/page.tmpl b/templates/page.tmpl
index 661d4a515..0176b0116 100644
--- a/templates/page.tmpl
+++ b/templates/page.tmpl
@@ -5,7 +5,7 @@
<html xmlns="http://www.w3.org/1999/xhtml">
</TMPL_IF>
<head>
-<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+<TMPL_IF HTML5><meta charset="utf-8" /><TMPL_ELSE><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></TMPL_IF>
<meta http-equiv="Cache-Control" content="must-revalidate" />
<title><TMPL_VAR TITLE></title>
<TMPL_IF NAME="FAVICON">
@@ -26,8 +26,8 @@
</head>
<body>
-<div class="pageheader">
-<div class="header">
+<TMPL_IF HTML5><article class="pageheader"><TMPL_ELSE><div class="pageheader"></TMPL_IF>
+<TMPL_IF HTML5><header class="header"><TMPL_ELSE><div class="header"></TMPL_IF>
<span>
<span class="parentlinks">
<TMPL_LOOP NAME="PARENTLINKS">
@@ -40,14 +40,14 @@
&nbsp;(<TMPL_VAR NAME="PERCENTTRANSLATED">%)
</TMPL_IF>
</span>
-</span><!--.header-->
+</span>
<TMPL_IF NAME="SEARCHFORM">
<TMPL_VAR SEARCHFORM>
</TMPL_IF>
-</div>
+<TMPL_IF HTML5></header><TMPL_ELSE></div></TMPL_IF>
<TMPL_IF NAME="HAVE_ACTIONS">
-<div class="actions">
+<TMPL_IF HTML5><nav class="actions"><TMPL_ELSE><div class="actions"></TMPL_IF>
<ul>
<TMPL_IF NAME="EDITURL">
<li><a href="<TMPL_VAR EDITURL>" rel="nofollow">Edit</a></li>
@@ -72,11 +72,11 @@
</TMPL_IF>
</TMPL_IF>
</ul>
-</div>
+<TMPL_IF HTML5></nav><TMPL_ELSE></div></TMPL_IF>
</TMPL_IF>
<TMPL_IF NAME="OTHERLANGUAGES">
-<div id="otherlanguages">
+<TMPL_IF HTML5><nav class="otherlanguages"><TMPL_ELSE><div class="otherlanguages"></TMPL_IF>
<ul>
<TMPL_LOOP NAME="OTHERLANGUAGES">
<li>
@@ -89,23 +89,22 @@
</li>
</TMPL_LOOP>
</ul>
-</div> <!-- #otherlanguages -->
+<TMPL_IF HTML5></nav><TMPL_ELSE></div></TMPL_IF>
</TMPL_IF>
-</div> <!-- .pageheader -->
+<TMPL_IF HTML5></header><TMPL_ELSE></div></TMPL_IF>
<TMPL_IF SIDEBAR>
-<div class="sidebar">
+<TMPL_IF HTML5><aside class="sidebar"><TMPL_ELSE><div class="sidebar"></TMPL_IF>
<TMPL_VAR SIDEBAR>
-</div>
+<TMPL_IF HTML5></aside><TMPL_ELSE></div></TMPL_IF>
</TMPL_IF>
-<div id="content">
+<TMPL_IF HTML5><article id="content"><TMPL_ELSE><div id="content"></TMPL_IF>
<TMPL_VAR CONTENT>
-</div>
<TMPL_IF COMMENTS>
-<div id="comments">
+<TMPL_IF HTML5><aside id="comments"><TMPL_ELSE><div id="comments"></TMPL_IF>
<TMPL_VAR COMMENTS>
<TMPL_IF ADDCOMMENTURL>
<div class="addcomment">
@@ -114,23 +113,25 @@
<TMPL_ELSE>
<div class="addcomment">Comments on this page are closed.</div>
</TMPL_IF>
-</div>
+<TMPL_IF HTML5></aside><TMPL_ELSE></div></TMPL_IF>
</TMPL_IF>
-<div id="footer" class="pagefooter">
-<div id="pageinfo">
+<TMPL_IF HTML5></article><TMPL_ELSE></div></TMPL_IF>
+
+<TMPL_IF HTML5><footer id="footer" class="pagefooter"><TMPL_ELSE><div id="footer" class="pagefooter"></TMPL_IF>
+<TMPL_IF HTML5><nav id="pageinfo"><TMPL_ELSE><div id="pageinfo"></TMPL_IF>
<TMPL_IF NAME="TAGS">
-<div class="tags">
+<TMPL_IF HTML5><nav class="tags"><TMPL_ELSE><div class="tags"></TMPL_IF>
Tags:
<TMPL_LOOP NAME="TAGS">
<TMPL_VAR LINK>
</TMPL_LOOP>
-</div>
+<TMPL_IF HTML5></nav><TMPL_ELSE></div></TMPL_IF>
</TMPL_IF>
<TMPL_IF NAME="BACKLINKS">
-<div id="backlinks">
+<TMPL_IF HTML5><nav id="backlinks"><TMPL_ELSE><div id="backlinks"></TMPL_IF>
Links:
<TMPL_LOOP NAME="BACKLINKS">
<a href="<TMPL_VAR URL>"><TMPL_VAR PAGE></a>
@@ -144,7 +145,7 @@ Links:
</span>
</span>
</TMPL_IF>
-</div><!-- #backlinks -->
+<TMPL_IF HTML5></nav><TMPL_ELSE></div></TMPL_IF>
</TMPL_IF>
<TMPL_IF COPYRIGHT>
@@ -166,10 +167,10 @@ Last edited <TMPL_VAR MTIME>
<!-- Created <TMPL_VAR CTIME> -->
</div>
-</div><!-- #pageinfo -->
+<TMPL_IF HTML5></nav><TMPL_ELSE></div></TMPL_IF>
<TMPL_IF EXTRAFOOTER><TMPL_VAR EXTRAFOOTER></TMPL_IF>
<!-- from <TMPL_VAR WIKINAME> -->
-</div><!-- .pagefooter #footer -->
+<TMPL_IF HTML5></footer><TMPL_ELSE></div></TMPL_IF>
</body>
</html>