各業界のプロに学ぼう「本じゃ読めないアフィリエイト講座」

All About ホームページ作成ガイド 西村 文宏
All About ホームページ作成ガイド
西村 文宏 (ニシムラ フミヒロ)
2001年より、その道のプロ(専門家)が情報発信する生活総合情報サイトAll About内で、「ホームページ作成」ガイドサイトを担当。ウェブ製作に関して毎月数本の記事を連載。HTMLの記述方法から、スタイルシートやJavaScriptの活用方法、アクセス数向上テクニックなど、2011年現在までに300本近くの記事を公開している。著書として、「プロ顔負けのホームページ作成術」・「SEO・SEM使いこなしテクニック」などがあり、最近は作家デビューも果たしている。
コーポレートサイトhttp://allabout.co.jp/gm/gt/1053/
講師PR
RSSフィードを自動生成するフリーソフト「Fumy RSS & Atom Maker」が人気です!『にししふぁくとりー』
http://www.nishishi.com/

HTML5の書き方(第1回)~head要素について~

  • publish_advertise
2013/03/14

こんにちは。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で追加された新しい要素(タグ)についてご紹介いたします。

 

 

【ご注意ください】

このコンテンツで紹介されているサイトおよびサービス(ツール)は、
アクセストレードが運営するものではありません。必ず使用方法や注意
事項等をよく理解した上で、ご自身の判断のもとでご利用ください。

万が一、損害・トラブル等が生じた場合も、執筆者およびアクセス
トレードは責任を負いかねますので、あらかじめご了承ください。

 

 

 

Loading...
このエントリーをはてなブックマークに追加      mixiチェック
続きを読む>>
続編
2013.03.19
HTML5の書き方(第2回)~新要素について~
2013.03.21
HTML5の書き方(第3回)~テンプレート紹介~

▲ページトップへ戻る

1CLICKアンケート!!
Loading...
1CLICKアンケート!!
アフィリエイトで稼ぐための心構え3カ条
1.「稼ぐ気持ち」を出しすぎない
稼ぎたい気持ちが全面に出ていると、ユーザーはサイトに対し良い印象を持ちません。
2.「納得できる方法」で稼ぐ
報酬額ばかりで選ばず、自分自身がお薦めできるプログラムを心が伝わるように紹介しましょう。
3.実績のある方法や考え方などを「学ぶ」
「成功者のノウハウ」、「今盛り上がっている市場は?」など、常に最新情報をキャッチし、実践できているかどうかが、アフィリエイト成功のカギ。アフィ大では、アフィリエイトで稼ぐためのお役立ち情報を数多くの成功者が発信しています。ぜひご活用ください!

▲ページトップへ戻る