HTML5への修正方法

ホームページを「xhtml」から「HTML5」へ修正するには、サイト全体のファイルを一括で置換できるツールを使うと便利です。

ここではDreamweaverの「検索/置換」機能を例にご紹介しますが、ネット上では無料ソフトなども公開されているので、何らかの置換ツールを利用することをおすすめします。

ただし、無料エディタの「Brackets」などにも複数のファイルに渡る置換機能はありますが、改行を含んだ複数の行の置換作業には対応していないようです。無料ツールでは限界があると感じますので、できるだけ有料のソフトを利用して対応されるとよいでしょう。

HTML5に修正する前の事前準備

実際にホームページを修正する前に、まずはファイルをフォルダごとコピーしてバックアップしておくことをおすすめします。また、必要のないページまで修正してしまわないように、修正対象となるファイル数を確認しておきましょう。

昔のフィーチャーフォン向けの携帯ページなどはHTML5には対応していないため、そのようなフォルダがある場合にはあらかじめ修正対象から除外しておきます。また、sitemap.xmlなどの「xmlファイル」についても除外しておくとよいでしょう。

修正するファイル数の確認

修正漏れを防ぐために、まずはサイト内のファイル数を確認しておきます。

各ページで一つしか使用されていない<body>タグなどで検索すると「~個ヒットしました」と出ますが、その数がHTML5に修正すべきサイト内のページ数になります。

例えば、当ホームページではDreamweaverを使用してますが、<body>で検索すると「201件」がヒットします。

「201件」の検索結果

一方、DTDの部分などで検索すると「202件」で数が合わないのですが、これは<body>タグのないsitemap.xmlのページもヒットしたためで、このようなページは除外しておきます。そのほか、ヘッダー部分やフッター部分などでも検索して修正すべきファイル数を確認しておきましょう。

結局、当ホームページでは以下のファイル数になりました。

  • DTD部分の修正:201ページ(sitemap.xmlを除外)
  • <header>、<footer>、<main>、<aside>への修正:201ページ

そのほか、<article>や<nav>などもありますが、これらはページ内で複数回修正するページもあるかと思います。一括して置換していく際、修正結果がこの数にならないと修正漏れのページが発生するので注意しましょう。

無料エディタのBracketsの場合

ちなみに、無料ツールのBracketsでもここまでは同様の結果がでます。

Bracketsでの結果

けれども、以下の実際の置換作業をする際に、改行を含んだ複数行での置換作業や「特定のタグ」を指定しての複雑な置換には対応していません。複数行での置換ができる無料ツールなどもネット上ではいくつかあるので、それらを組み合わせて修正されるとよいでしょう。

DTDやmetaタグなどhead部分の修正方法

以下、当ホームページを例に実際のHTML5への修正方法をご紹介します。

まずはDTDやメタタグなどheadタグの部分の修正になりますが、このhead部分はサイト運営者によるタグの使い方にそう大きな違いはありません。

このあたりは機械的に修正していくとよいでしょう。

DTDの箇所の修正

HTML5のDTDについてですが、Dreamweaverのテンプレートで「HTML5」を選択すると<!doctype html>のDTDが自動で挿入されます。

けれども、ネット上で大手メディアをチェックしてみますと、概ね「doctype」は大文字で書いているサイトが多数派かと思います。また、「html」の部分は小文字の<!DOCTYPE html>と大文字の<!DOCTYPE HTML>の二つのパターンがあると感じています。

xhtmlとは違い、このDTDの大文字と小文字はどちらでもかまいませんが、当サイトではこのように設定することにしました。

<!DOCTYPE html>

まずはDTDの箇所をこのタグに一括で置換するとよいでしょう。修正する箇所は<?xml version="1.0" encoding="UTF-8"?>も含めた以下の箇所になります。

DTDの一括置換


<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

  ↓一括置換

<!DOCTYPE html>


Dreamweaverの「検索/置換」機能ではこのようになります。「テキスト」ではなく、「ソースコード」で置換するようにしましょう。

Dreamweaverでの検索と置換

置換結果が「201件」となりましたので、漏れなく修正することができました。

以下、同様に他のタグについても修正していきます。

<html>の箇所の修正

<html>の部分も簡略化されており、書き方にはいくつかのパターンがありますが、一般的には以下のように修正するとよいでしょう。


<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">

   ↓一括置換

<html lang="ja">


ここで置換結果が「201件」のはずが「203件」となってしまったのですが、フィーチャーフォン携帯サイト用のモバイルページも置換されていたようです。その2ページについては元に戻しました。

metaタグ「文字コード」の修正

メタタグの文字コードの部分も簡略化されています。文字コードは「utf-8」が一般的ですが、以下のように修正するとよいでしょう。


<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

   ↓一括置換

<meta charset="UTF-8">


この文字コード指定の箇所の修正ですが、「Shift_JIS」から「utf-8」などへ以前と違う文字コードに一括置換する場合、文字化けしてしまうかと思います。これは文字コードの指定だけではなく、実際にファイル自身の文字コードも保存しなおす必要があるからです。

無料ツールを使えば、全てのファイルを一括で違う文字コードに保存しなおすことも可能ですが、間違えると文字化けが修正不能となってしまうかもしれません。

もし以前と違う文字コードに変更する場合、必ずバックアップを取っておくことをおすすめします。

当サイト運営者の場合、まずはDreamweaverにてHTMLファイル上の文字コードの指定を「UTF-8」へ一括置換しました。次に、文字コードの変換の無料ツールを使い、実際のファイルの文字コードについても「UTF-8」へ一括変換するとうまくいきました。

このUTF-8へ変換する際の「BOMあり・なし」ですが、通常は「BOMなし(UTF-8N)」で変換するのが一般的です。

metaタグ「http-equivの指定」の削除

type属性の初期値が「text/css」や「text/javascript」となりましたので、metaタグで記載していたstyleタイプの「Content-Style-Type」とscriptタイプの「Content-Script-Type」の記述はできなくなりました。

そのため、以下の2つの行は削除します。


<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />

   ↓

  削除する


この削除する場合の置換方法ですが、そのまま何も指定しないで置換すると改行が入ってしまうため、直下のタグも含めて改行するとうまくいくはずです。

例えば、<meta>を削除する場合、直下の<title>も含めて<meta><title>を<title>などと置換すれば、必要のない改行が入らずに<meta>の部分だけがそのまま削除されます。

metaタグとlinkタグの閉じタグの修正

HTML5での空要素は半角スペースとスラッシュなしで書くのが一般的です。

かなり昔の「HTML4.01」の場合、改行タグなどの空要素は<br>と書く必要がありましたが、その後に主流となった「xhtml」では半角スペースとスラッシュを入れて<br />のように閉じる必要がありました。

ただし、「HTML5」は実質的に「HTML4」の後継版になるため、「HTML5」での空要素については昔の「HTML4.01」と同様、<br>と書くのが本来の正しい書き方になります。

けれども、既に主流となっている「xhtml 1.0」からの移行がしやすいように配慮がされており、「HTML5」では<br />と書いても問題はありません。

「HTML4」→ <br>
「Xhtml」→ <br />
「HTML5」→ <br>でも<br />でも可

そのため、メタタグの<meta />や<link />も半角スペースとスラッシュは必要なくなりましたが、あっても問題はないため、特に修正する必要はないかと思います。

とはいえ、一応修正して統一する場合には直後のタグを含めて「 "><meta 」を「><meta」などと置換するとうまくいくはずです。

空要素の閉じタグの修正

metaタグのキーワードや説明文の箇所はページによって個別に違うため、うまい具合に修正されるように置換作業を繰り返すとよいでしょう。

linkタグの「type="text/css"」の削除

上記のように、type属性の初期値が「text/css」となりましたので、スタイルシート指定の「type="text/css"」の部分も省略が可能になっています。


<link rel="stylesheet" href="" type="text/css" />

   ↓一括置換

<link rel="stylesheet" href="">


linkタグの「shortcut icon」の修正

ファビコンを指定する「shortcut icon」も「icon」に変更となりました。


<link rel="shortcut icon" href="/favicon.ico" />

  ↓一括置換

<link rel="icon" href="/favicon.ico">


HTML5への修正前後の違い

上記をひととおり修正して、その前後を比較するとHTMLソースがすっきりしているはずです。

BEFORE

HTML5修正前のHTMLソース

AFTER

HTML5修正後のHTMLソース

W3CのValidチェックでも特にエラーはありませんでした。

以上がヘッダー部分の修正になりますが、コンテンツ部分とは違い、このヘッダー部分は機械的に修正できるため特に迷うことはないかと思います。

一方、次のコンテンツ部分の修正については、サイト運営者による意図の違いでタグの使い方に違いが出てくるかもしれません。

HTML5の新しいタグによるコンテンツ部分の修正方法

次はコンテンツ部分の修正になりますが、新しく追加された「HTML5のタグ」を使って修正していきます。

  • <header>
  • <main>
  • <article>
  • <nav>
  • <aside>
  • <footer>
  • <section>

これらの新しいHTML5のタグの使い方については、サイト運営者の意図によって使い方にかなり違いがあります。

例えば、サイトバーを主要なナビゲーションと考えれば<nav>で囲むことになりますし、補足情報と考えれば<aside>になります。また、<article>や<aside>などはまったく使用していないサイトも多いです。

この新しいHTML5タグの使用は必須ではないため、もし使い方の判断が難しい場合には特に修正はせず、既存の<div>のままにしておくのもよいでしょう。

ヤフーニュースなどがそうですが、新しいHTML5のタグを使用していない大手サイトも多く、バラバラな印象があります。

特に<article>などのタグはアウトラインといわれる文章構造へ影響を与えるタグになるため、従来通り、シンプルにh1やh2だけで暗黙的にアウトラインを作成していった方が綺麗に仕上がる可能性があります。SEO対策上、どちらが有利なのかは分かりませんので、この辺りの判断はサイト運営者によるものと思われます。

<header>部分の修正

<header>部分については、既存のID属性をそのまま利用して置換することをおすすめします。

例えば、既存サイトで<div id="abc">がヘッダー部分の場合、このID属性をそのまま利用して<header id="abc">と修正するだけです。こうすれば、既存のスタイルシートをそのまま利用できます。

当サイトでは<div id="header">がヘッダー部分のため、どちらもheaderで紛らわしくはなりますが、これを<header id="header">へと一括で置換しました。


<div id="header"></div>

  ↓「特定のタグ」で一括置換

<header id="header"></header>


Dreamweaverの場合、「特定のタグ」で「div」を選択し、属性も「id」で「header」を指定します。次に、「タグを変更」を選択し、変更後のタグを「header」に指定すれば、閉じタグまでを含めて一括で置換することができます。

特定のタグを置換

<footer>部分の修正

次に、こちらも運営者によるタグに使い方にあまり違いがない<footer>部分を修正するとよいでしょう。このフッター部分についても、既存のID属性をそのまま利用して置換することをおすすめします。


<div id="footer"></div>

  ↓「特定のタグ」で一括置換

<footer id="footer"></footer>


<nav>部分の修正

グローバルナビゲーションがある場合には、この部分を<nav></nav>に置換します。

<nav></nav>

この<nav>の部分は判断が分かれる点があるかと思いますが、「主要なグローバルナビゲーション」についてはこの<nav>タグを使って間違いありません。また、パンくずリストについても使用しても特に問題はないかと思います。

ただし、関連記事についてはどちらかというと「補足情報」を意味する<aside>を使用した方がいいのかなという気もしております。

また、サイドバーについても、一般的には<aside>を設定するかと思いますが、グローバルナビゲーションがないサイトの場合、サイドバーが主要なナビゲーションになるはずなので、<nav>で設定してもよいかと思います。

<main>と<article>の違い

<main>と<article>の使い方に微妙な違いがありますが、<main>は主要なコンテンツ部分であることを意味するタグで1ページに1回しか使えません。一方、<article>は何度でも使えます。

また、<main>はセクションを生成しないのに対し、<article>はセクションを生成します。

カテゴリーページなどでの記事一覧がある場合、それぞれの個別記事を<article>で囲い、そのコンテンツ部分の全体を<main>で囲むといった使い方になるかと思います。

  • <main></main> → 1ページに1回だけ → セクションしない
  • <article></article> → 何回でも使える → セクション生成でアウトラインへ影響

ちなみに、Dreamweaverの古いバージョンでは「タグを変更」の箇所で「main」がありませんので、「任意」の箇所に直接記入するとよいでしょう。

当サイト運営者の主観になりますが、1ページをヘッダーとコンテンツ、サイドバー、フッターの領域に分け、それぞれを<header>と<main>、<aside>、<footer>に割り当ててしまうのがシンプルかと感じています。

そして、<main>内の個別の記事にそれぞれ<article>を設定するのかどうかでアウトラインへ影響してしまうため、このあたりはサイト運営者によって判断が分かれるかもしれません。

「main」への「display:block;」の指定

この「main」については、FirefoxやChromeではデフォルトで「display:block;」ではあるものの、IE11ではデフォルトで「display:inline;」となっています。そのため、IE11で表示した際、main要素のpaddingが効かないはずです。

当サイトでもコンテンツ部分のpaddingが効かず、IE11では余白が空いていませんでした。

main要素のpadding

これを回避するために、main {display:block;}を指定しておくとよいでしょう。

<aside>部分の修正

サイドバーについては、補足情報を意味する<aside>かナビゲーションを意味する<nav>を利用するかで迷う箇所かもしれません。

<nav>は主要なナビゲーションリンクに使うものですが、当サイトではサイドバーも主要なリンクと考えてますので、以下のような形でもよい気がしております。

<aside>
<nav>
サイドバー全て
</nav>
</aside>

ただし、サイドバーを広告表示や新着情報の一覧などで使用している場合、単に<aside>だけの方がぶなんかと思います。

また、関連記事については各個別記事についての補足情報になるかと思いますので、<nav>ではなく、<article>タグ内に内包する形で<aside>で囲んでおく方がよい気もします。

<main>
<article>
<h1>記事タイトル</h1>
記事内容
<aside>
関連記事
</aside>
</article>
</main>

当サイトでは、極力、html5の新しいタグは使わないようにしていますので、<header>や<footer>などの必要最低限なものだけを使用するようにしています。サイト運営者によって、これらHTML5タグの使い方に違いがありますので、主要メディアでの使い方も参考にしてみるとよいでしょう。