WordPress主题修改之Html5语义化

不明白为什么在IE6下面会严重变形。

Html5的魅力

Html5最大的特点在于多媒体和移动互联网方面，小弟不才，对那些了解不多，本次修改仅仅是为了那么一点点语义化。

对已有主题进行Html5语义化升级

对已有的WordPress主题进行Html5语义化标签还是很容易的。

我们平时写CSS的时候，用的大多是id或者class属性，所以，基本上修改Html后，对CSS文件的改动很少。

对于很多现代浏览器，基本上支持Html5的很多属性了，但对于IE9以下的版本，就添加如下两段代码即可：

/* html5 Tags */ header,nav,article,section,aside,footer,figure{display:block}

<!--[if lt IE 9]> <script type="text/javascript" src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->

根据页面优化原则，记得把css文档放在页面头部，把js文档放在页面尾部原来这个js脚本要放在里面，否则IE6下面会严重错位。

Html5常用标签解释

• <article> 标签定义外部的内容，可以是一篇新的文章。
• <aside> 标签定义 article 以外的内容，aside 的内容可用作文章的侧栏。
• <figcaption> 标签定义 figure 元素的标题。
• <figure> 标签用于对元素进行组合，使用 figcaption 元素为元素组添加标题。
• <footer> 标签定义 section 或 文档 的页脚。
• <header> 标签定义 文档 的页眉。
• <hgroup> 标签用于对 section 或 网页 的标题进行组合，使用 figcaption 元素为元素组添加标题。
• <nav> 标签定义 导航链接 的部分。
• <section> 标签定义文档中的节（ section、区段 ）。比如章节、页眉、页脚或文档中的其他部分。
• <time> 标签定义日期或时间，或者两者。

在常用布局里面，多用到<section> <article> <aside> <hgroup> <header> <nav> <footer>。

后面三个都比较好理解，意义明确。

前面三个，可以把<article>和<aside>看成是<section>更富语义化后的标签

不过我对里面的<hgruop>搞不懂，不知道该什么时候用，找过搜索引擎，详细的案例解释几乎没有，里面通常包含<h2><h3>等标签，难道就是h标签的集合的意思？

额外疑问

• 像这篇文章 http://www.vinqon.com/codeblog/?detail/11103 右边有个Content目录，这个是如何实现的？插件？
• 平常我们做主题，会在header.php里面的<header>标签里面用<h1>来包裹网站标题，那么在single.php等文章页，文章标题就只能用<h2>这种标签了？总感觉在文章页等有具体内容的页面，应该直接使用<h1>作为主要内容的标题。不知道其他人是怎么处理的呢？