HTML5とXHTML 1.0の違い

以前までは「XHTML 1.0」のDTDが主流でしたが、現在では最新バージョンの「html5」でホームページを作成する人が多くなってきました。

この「html5」ではタグに意味的な要素が加えられており、よりセマンティックなホームページの作成が可能になっています。この「セマンティック」というのは「意味の」とか「意味論的な」を表す言葉ですが、htmlタグが何を意味するものなのかを明確に示すことができるようになりました。

例えば、XHTML 1.0では<div>で囲んだ領域が何を意味するのかは中身を見ないとわかりませんが、HTML5で追加された新しいタグの<header>タグを使えば、その領域がヘッダー部分であることを明示することができます。

他にもコンテンツ部分の<main>や<article>、あるいはナビゲーション部分の<nav>の要素などが追加されており、これらの新しいタグを使用することにより、検索エンジンにサイト制作者の意図を正確に伝えることができます。

実際に既存サイトをHTML5に修正する際の手順については、こちらのページもご参照ください。
→ HTML5への修正方法

さらに、html5ではタグが簡略化されており、htmlソースがすっきりと軽量化されています。今後、ホームページを作成する際には「HTML5」で作成していくとよいでしょう。

HTML5で追加された新しいタグ

当サイトではテンプレートのサンプルを「XHTML1.0」で作成していましたが、ヘッダー部分やコンテンツ部分、サイドバー、あるいはフッターなどの<div>領域のID属性を何にするかで迷うことがありました。

例えば、ヘッダー部分は<div id="header">とか<div id="head">などのID属性が一般的に使用されていましたが、ID属性は任意の文字列のため、<div id="abc">などと書いても特に問題はなく、どのようなID属性を付けるべきかは統一されていませんでした。

けれども、<div id="abc">などと書かれていた場合、それがヘッダー部分なのか、コンテンツなのか、あるいはフッターなのかは分かりません。ID属性が任意の状態では、どこが重要なコンテンツの部分であるかを検索エンジン側へ伝えづらい面がありました。

その点、「html5」ではヘッダー部分には<header>、フッター部分には<footer>、あるいはコンテンツの部分には<article>の新しいタグを使用することになりましたので、「header」などの文字列は機械的な記号ではなく、そのタグ自体に意味を持つようになっています。

この<div id="header">と<header>でよく似ていますが、前者が単なる<div>タグであるのに対し、<header>タグはHTML5から新しく出来たタグです。

  • <div id="header"> → <div>タグ→ 「入れ子」で意味を持たない
  • <header> → <header>タグ → 「ヘッダー部分」の意味を持つ

つまり、<div id="header">の場合はID属性に「header」の文字列があったとしても、それは単なる入れ子の<div>要素に過ぎませんでしたが、html5の<header>タグはそれがヘッダー部分であるという意味的な役割を持つようになっています。

ほかにも、以下のような新しいタグがHTML5で追加されています。

■HTML5で追加された主な新しいタグ

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

例えば、ヘッダー部分とフッター部分を<header>と<footer>で囲み、コンテンツ部分を<main>と<article>で囲みます。その他、グローバルナビゲーションがあれば<nav>で囲み、サイドバーがあれば、<aside>や<nav>などで囲む使い方になります。

→ HTML5の新しいタグの使い方

これにより、検索エンジン側でコンテンツ部分を探すには<main>や<article>の部分を探せばよくなりましたし、サイドバーやナビゲーションなどに含まれる無関係なキーワードを除外することができますので、ページ内容をより正確に認識しやすくなったものと思われます。

加えて、サイト運営者側でも検索エンジン側にどの部分が重要なコンテンツであるのかを明示することが可能になったため、より検索エンジンフレンドリーなサイト作成が可能になっています。

当ホームページではタイトルタグの付け方を最適化する方法についてご紹介してましたが、新しい<header>や<main>タグを使用することで、あまりこだわる必要はなくなったと感じています。

このサイト運営者の意図を反映した「セマンティックなサイト作成」が可能になった点が、HTML5の大きなメリットのひとつといえるでしょう。

HTML5ではDTDなどのhtmlソースが簡略化

HTML5の実際の書き方についてですが、XHTML 1.0と比較すると省略できるタグが多くなっており、htmlソースがシンプルですっきりしました。

DTDの指定

まず、DTDになりますが、単にhtmlと書くだけですみます。以前までのXHTML1.0と比較するとかなり簡略化されました。

XHTML 1.0の場合

<?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">

　　　↓

HTML5の場合 NEW！

<!DOCTYPE html>

html要素の指定

html要素の指定についてもシンプルになりました。

XHTML 1.0の場合

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

　　　↓

HTML5の場合 NEW！

<html lang="ja">

metaタグの文字コードの指定

文字コードの指定も簡略化されています。

XHTML 1.0の場合

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

　　　↓

HTML5の場合 NEW！

<meta charset="utf-8">

「style」や「script」のtype属性の指定

style要素指定の<link rel="stylesheet">のtype属性の初期値は「text/css」となりましたので、「type="text/css"」を省略することができます。

XHTML 1.0の場合

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

　　　↓

HTML5の場合 NEW！

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

同様に<script>のtype属性の初期値も「text/javascript」となりましたので、<script type="text/javascript">を使用する場合には「type="text/javascript"」の記述を省略することができます。

<meta http-equivの指定

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

XHTML 1.0の場合

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

　　　↓

HTML5の場合 NEW！

記載しない

HTML5では新しく追加されたセマンティックな<header>要素や<article>要素などを使用することが重要なポイントになり、HTML5の肝ともいえますが、かといってこれらのタグの使用は特に必須なわけでもありません。

とりあえず、上記の部分の変更をするだけでもHTML5に対応することができます。

HTML5はIE8以下のブラウザでは非対応

HTML5はIE8以下のブラウザでは非対応となっており、新しく追加されたセクション要素などを認識せず、CSSの指定が反映されずにそのままの状態で表示されてしまいます。

ただし、「IE8」は2009年に公開され、その後、2013年には「IE11」が公開されたのち「Microsoft Edge」に移行しましたので、現在ではIE8以下を利用しているユーザーはかなり少ないです。

2015年あたりではまだ時期尚早という気もしていましたが、2018年の現在、自サイトのアクセス解析上の割合では「コンマ数％」以下まで下がってきました。また、既に公式サポートも終了しており、サポートが継続しているのはIE11のみですので、HTML5への対応・非対応のほかにもセキュリティー上の問題があります。

さらに、主要メディアでHTML5へ移行済みのケースが多くなってきており、日経や朝日などの大手メディアではまだXHTML1.0ではあるものの、ロイターや時事通信、読売、毎日、産経、ブルームバーグ、ハフポスト、あるいはCNNなどのサイトは既にHTML5となっています。

加えて、首相官邸や財務省などの公官庁ホームページではXHTML 1.0のままではあるものの、国税庁や米国ホワイトハウス、NASA、FBIなどはHTML5となっています。

現在では主要なホームページでHTML5に移行しているケースが多くなってきており、IE8以下のユーザーは様々な非対応を承知の上でネットを閲覧しているはずですので、個人サイトでHTML5に移行しても特に問題はないといえるでしょう。

次のページ → HTML5への修正方法

トップページ　⁄　htmlタグ　⁄　HTML5とXHTML 1.0の違い
関連ページ