各業界のプロに学ぼう「本じゃ読めないアフィリエイト講座」
こんにちは。All About ホームページ作成ガイドの西村文宏です。
前回は「HTML5」の概要を簡単にお話しましたので、今回はもう少し具体的な書き方をご紹介いたします。以下に記した12行のHTMLソースをご覧ください。
ブラウザの描画領域に表示される「本文」は1行しかありませんが、HTML5として成立するHTMLソースです。
<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>HTML5サンプル</title>
<meta name=”description” content=”HTML5のサンプルページです。”>
<meta name=”keywords” content=”HTML5,サンプル”>
</head>
<body>
<p>HTML5で記述しています。</p>
</body>
</html>
HTMLソースのhead要素内(<head>~</head>の中身)には、タイトルや文字コードなど、そのページに関する様々な情報を記述できます。
この部分に関して、従来のHTML・XHTMLと比較すると、HTML5ではいくつかの点が変更(改良)されています。
それらについて、簡単に解説いたします。
◆DOCTYPE宣言が簡単になった
これまでのHTMLやXHTMLでは、先頭に記述する「DOCTYPE宣言」は、以下のような長いものでした。バージョン番号などが含まれています。
<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN” “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”>
上記は、HTML4.01 と XHTML1.1 でのDOCTYPE宣言の例です。HTML5では、もっと短くなり、
<!DOCTYPE html>
という、わずか15文字を書けば良いだけになりました。
◆文字コードの記述が簡単になった
meta要素を使うと、そのページで使われている文字コードを明示できます。
省略もできますが、文字化けを防ぐためには書いておく方が良いでしょう。
従来のHTMLでは、例えば下記のように書いていました。(UTF-8の場合)
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″>
しかし、HTML5では、もっと短く、
<meta charset=”UTF-8″>
このように記述できるようになりました。
(従来の書き方をそのまま使い続けることもできます。)
もしSHIFT-JISを使う場合は、
<meta charset=”Shift_JIS”> と記述します。
大文字・小文字は区別しないので、Shift_JISでもshift-jisでも構いません。
◆スタイルシートやスクリプトで使われる言語名の指定は不要
従来は、そのHTML内で利用しているスタイルシートやスクリプトの言語が何なのかを、以下のようにmeta要素を使って記述していました。
<meta http-equiv=”Content-Script-Type” content=”text/javascript”>
<meta http-equiv=”Content-Style-Type” content=”text/css”>
HTML5では、スタイルシートは標準で「text/css」、スクリプトは標準で「text/javascript」だと解釈されるため、上記のような記述を書く必要はありません。
◆SEO面を気にした記述などはそのまま使える
HTML5は、従来のHTML・XHTMLと互換性があります。
より簡潔に書ける新しい書き方が用意されている場合でも、従来の書き方をそのまま利用することが(ほぼ)可能です。
検索サイトなどで活用される可能性のある「概要」や「キーワード」を記述しておく方法として、以下のようなmeta要素の書き方があります。
これらの記述は、HTML5でもそのまま使えます。
<meta name=”description” content=”HTML5のサンプルです。”>
<meta name=”keywords” content=”HTML5,サンプル”>
◆開始タグだけで終了タグがない要素の書き方
meta要素やimg要素のように、「開始タグ」はあるものの「終了タグ」がない要素は、XHTMLでは最後に / 記号を加えて
<img src=”image.png” /> のように記述する必要がありました。
HTML5では、最後の / 記号は、あってもなくても構いません。
ですから、 <img src=”image.png” /> と書いても
<img src=”image.png”> と書いても大丈夫です。
どちらも正しいHTML5として認識されます。
次回は、HTML5で追加された新しい要素(タグ)についてご紹介いたします。
【ご注意ください】
このコンテンツで紹介されているサイトおよびサービス(ツール)は、
アクセストレードが運営するものではありません。必ず使用方法や注意
事項等をよく理解した上で、ご自身の判断のもとでご利用ください。
万が一、損害・トラブル等が生じた場合も、執筆者およびアクセス
トレードは責任を負いかねますので、あらかじめご了承ください。