IrodorI One-Poem World

Version 3.0.1mt Build 5527997

O-P World: HTML5へのマークアップ言語の変更

先日から少し調べ始めたHTML5であるが、やはり、文書構造を明確化できるsection, article, nav, aside, header, footerといったタグが使えることは面白い。 試験的に、トップページ（メインページ）をローカル環境にコピーし、HTML5式にマークアップを行ってみた。

すでにMovable Typeの標準のテンプレートとは異なった構造になっていた可能性もあるが、元々のトップページはMovable Typeの標準の構造を流用していて、大雑把にまとめると以下のような構造になっていた。

  • html要素
    • head要素
      • meta要素
      • link要素
    • body要素 class="layout-two-column-right"
      • div要素 id="container"
        • div要素 id="container-inner"
          • div要素 id="banner"
            • div要素 id="banner-inner"
              • h1要素 id="banner-header"
              • h2要素 id="banner-description"
          • div要素 id="pagebody"
            • div要素 id="pagebody-inner"
              • div要素 id="alpha"
                • div要素 id="alpha-inner"
                  • h2要素 (日付) class="date-header"
                  • div要素 id="entry-????" class="entry"
                    • div要素 class="entry-header"
                      • h3要素 (記事タイトル) a00????
                    • div要素 class="entry-content"
                      • div要素 class="entry-body"
                        • (実際の記事内容)
                        • div要素 class="entry-footer"
                          • dl要素 (投稿者・日時)
                          • dl要素 (カテゴリリスト)
                          • dl要素 (タグリスト)
                          • dl要素 (パーマリンク等)
                  • (次の記事のdiv要素 class="entry")
                  • (次の日付のh2要素 class="date-header")
            • div要素 id="beta"
              • div要素 id="beta-inner"
                • div要素 class="module" または class="widget"
                • (複数のサイドバー用ウィジェット)

この構造ツリーをulとliでマークアップするだけでも一苦労だが、これを以下のように変更したいと思っている。

  • html要素
    • head要素
      • meta要素
      • link要素
    • body要素 class="layout-two-column-right"
      • div要素 id="container"
        • div要素 id="container-inner"
          • headerdiv要素 id="banner"
            • div要素 id="banner-inner"
              • h1要素 id="banner-header"
              • ph2要素 id="banner-description"
          • maindiv要素 id="pagebody"
            • div要素 id="pagebody-inner"
              • articlediv要素 id="alpha"
                • div要素 id="alpha-inner"
                  • h1h2要素 (日付) class="date-header"
                  • articlediv要素 id="entry-????" class="entry"
                    • div要素 class="entry-header"
                      • h1h3要素 (記事タイトル) a00???? class="entry-header"
                    • div要素 class="entry-content"
                      • articlediv要素 class="entry-body"
                        • (実際の記事内容)
                      • footerdiv要素 class="entry-footer"
                        • address要素 dl要素 (投稿者・日時)
                        • nav要素 dl要素 (カテゴリリスト)
                        • nav要素 dl要素 (タグリスト)
                        • nav要素 dl要素 (パーマリンク等)
                  • (次の記事のarticlediv要素 class="entry")
                  • (次の日付のh1h2要素 class="date-header")
              • asidediv要素 id="beta"
                • div要素 id="beta-inner"
                  • nav/section/asidediv要素 class="module-****" または class="widget-****"
                  • (複数のサイドバー用ウィジェット)
          • footer要素
            • address要素
            • nav要素

シンプルに書き直したものが以下。

  • html要素
    • head要素
      • meta要素
      • link要素
    • body要素
      • header要素
        • h1要素 id="banner-header"
        • p要素 id="banner-description"
      • main要素
        • article要素 id="alpha"
          • h1要素 (日付) class="date-header"
          • article要素 id="entry-????" class="entry"
            • h1要素 (記事タイトル) a00???? class="entry-header"
            • article要素 class="entry-body"
              • (実際の記事内容)
            • footer要素 class="entry-footer"
              • address要素 dl要素 (投稿者・日時)
              • nav要素 dl要素 (カテゴリリスト)
              • nav要素 dl要素 (タグリスト)
              • nav要素 dl要素 (パーマリンク等)
          • (次の記事のarticle要素 class="entry")
          • (次の日付のh1要素 class="date-header")
        • aside要素 id="beta"
          • nav/section/aside要素 class="module-****" または class="widget-****"
          • (複数のサイドバー用ウィジェット)
      • footer要素
        • address要素
        • nav要素

かなり階層構造が浅くなって、すっきりした印象になりそうだ。