ここでは、HMTL5の基本的な記述方法について説明します。レイアウトやCSSのテクニックを学ぶ前に、基本となる正しいHTMLの書き方を学びましょう。
HTMLの基本構造
HTML文書の基本構造は次の通りです。
<!DOCTYPE html>
<html>
<head>
ヘッド要素を記述
</head>
<body>
ボディ要素を記述
</body>
</html>
HTMLの基本構造は、html要素をルート要素とした木構造（ツリー構造）となっています。
DOCTYPE宣言
DOCTYPE宣言とは、以降に続くHTMLのバージョンを示すもので、HMTL文書の先頭に記述します。
<!DOCTYPE html>
上記は、HTML5におけるDOCTYPE宣言で、HTML文書の先頭に記述しておきます。HTML5におけるDOCTYPE宣言は、ブラウザの表示モードを標準モードにするという目的で利用されます。
DOCTYPE宣言を記述しないと、ブラウザの表示モードが切り替わり、意図した解釈がなされない場合がありますので、必ず記述しておきましょう。詳細はDOCTYPE宣言とレンダリングモードにて説明しています。
HTMLタグの記述方法
HTMLタグは、山括弧 < > で囲み、<要素名>(開始タグ)〜〜</要素名>(終了タグ)のように開始タグと終了タグで囲んで使います。また、終了タグは開始タグと区別する為、要素名の先頭にスラッシュ（/）を付けます。ただし、画像を挿入する為のimgタグや、改行させるbrタグなど、終了タグを必要としない要素（空要素と呼びます）もありますので注意して下さい。また、HTMLタグ内に全角文字を入れることは出来ません。必ず半角文字を入れるようにして下さい。
要素と属性
HTMLタグには要素の他に、属性を記述することが可能です。HTMLタグには、要素毎に要素を特徴付ける為の属性が用意されており、要素に属性を付加することで、要素に特定の効果を与えることが出来ます。
属性名は開始タグの要素名の後に半角スペースを入れ、属性名と属性値の間にイコール[=]を入れます。属性値はダブルクォーテーション[“]もしくはシングルクォーテーション[‘]で括ります。また、複数の属性を指定する場合は、それぞれを半角スペースで区切って記述します。
要素の入れ子
要素は入れ子にすることが可能です。例えば、段落を表すp要素の中に、強調を表すem要素を含めることが出来ます。
<p>p要素の中に<em>em要素</em>を含めることが出来ます。</p>
このとき、p要素内のem要素を(p要素から見たときの)子要素と呼びます。
また、要素によっては入れ子に出来ない要素の組み合わせもあります。例えば、p要素の中にdiv要素を含めることは出来ません。
<!-- OK -->
<div>div要素の中に<p>p要素</p>を含めることは出来ます</div>
<!-- NG -->
<p>p要素の中に<div>div要素</div>を含めることは出来ません</p>
グローバル属性
グローバル属性とは、全ての要素で利用出来る属性です。ここでは、class属性, id属性, lang属性, style属性, title属性について説明します。
class属性
要素に対してクラス名を指定します。半角スペースで区切って複数のクラス名を指定する事も出来ます。また、同一文書内の複数の要素に対して同じクラス名を指定することが出来ます。主に、スタイルシートのセレクタとして利用されます。
<div class="box first<">複数のクラス名を指定する場合、クラス名を半角スペースで区切って指定します</div>
<div class="box second">複数の要素に同じクラス名（ここでは"box"というクラス名を指します）を指定出来ます</div>
id属性
要素に対して識別子(id)を指定します。class属性と違い、同一文書内でid属性を重複して使うことは出来ません。スタイルシートのセレクタ、リンク先などに利用されます。
<div id="section1">id属性は同一HTML文書内で重複して使用することは出来ません</div>
lang属性
要素内の使用言語を指定します。日本語の場合は、lang=”ja” と記述します。
style属性
要素にCSSを直接指定出来ます。詳細はスタイルシートの適用方法にて説明しています。
title属性
要素の補足情報を記述出来ます。また、title属性に記述した内容は、マウスカーソルを当てた時にふきだしのように表示されます。
<a href="http://gratife.com/" title="HTMLとCSSをマスターするなら">gratife.com</a>
例:ここにマウスカーソルを当ててしばらくすると
html要素
html要素は、HTML文書であることを示し、子要素の1番目にhead要素、2番目にbody要素を含める必要があります。また、html要素に、
<html lang="ja">
と、lang属性に “ja” を指定することで、日本語で書かれたHTML文書であることを表すことが出来ます。
head要素
head要素は、文書のヘッダー情報を示し、html要素内の最初に記述します。head要素内に記述出来る使用頻度の高い要素は以下の通りです。
文字エンコーディングの指定
文字エンコーディングの指定は、meta要素のcharset属性で記述します。例えば、文字エンコーディングにUTF-8を使用する場合は、
<meta charset="UTF-8" />
と記述します。ここで、meta属性は空要素なので終了タグは必要ありません。また、ブラウザによる文字エンコーディングの誤認識を防ぐため、文字エンコーディングの指定はhead要素内の先頭に記述した方が良いでしょう。
（当サイトでは、空要素の最後に /を入力してタグを閉じていますが、HTML5では空要素の[ /]は省略して構いません。しかしながら、XHTMLでは[ /]の入力が必須となっており、まだまだXHTMLで記述されているサイトも多数あるため、個人的にHTML5の空要素にも[ /]を入力しています。）
ページタイトル
ページタイトルは、title要素で記述します。
<title>金魚について</title>
title要素は、検索結果のページタイトルやブックマーク時のタイトルなどに利用される非常に重要な要素となりますので、ページの内容を的確に表してみましょう。
外部CSSファイルの呼び出し
CSSを外部ファイルとして呼び出すために link要素を使用します。type属性にてMIMEタイプ（簡単に言うとファイルの種類）を “text/css” と記述し、リンクさせる外部ファイルとの関連性を表す rel属性で “stylesheet” を指定し、href属性にリンクさせる外部ファイル、つまりCSSファイルのパスを記述します。
<link type="text/css" rel="stylesheet" href="style.css">
外部CSSファイルの呼び出しについては、スタイルシートの適用方法で説明するとして、以上をまとめると、head要素は以下のように記述できます。
<head>
<meta charset="UTF-8" />
<title>金魚について</title>
<link type="text/css" rel="stylesheet" href="style.css">
</head>
次に、HTML文書の本文となる、body要素内の記述方法について説明します。
body要素
body要素は、文書のメインコンテンツを示し、html要素内のhead要素の次に記述します。body要素内に記述出来る使用頻度の高い要素は以下の通りです。
見出し
見出しを表すh（Headingの略）要素は h1～h6 までの６段階用意されています。文章のボリュームに合わせて、適宜、見出しを使用して下さい。
<h1>金魚について</h1>
<h2>和金（ワキン）型</h2>
<h2>琉金（リュウキン）型</h2>
段落
最も使用頻度が高いHTMLタグが、段落（Paragraph）を表すp要素で、文章のまとまりごとにpタグで区切ります。
<p>キンギョ（金魚、学名: Carassius auratus auratus）は、フナの突然変異であるヒブナを観賞用に飼育、交配を重ねていった結果生まれた観賞魚。</p>
<p>金魚の品種は主に、和金と琉金に分類されます。</p>
ここで注意したいのが、段落と改行の違いです。ソースコードでp要素内に改行を入れてもブラウザでは改行されませんので、改行を入れるには、br要素を使います。ただ、p要素が文章のひとつのまとまりを表すのに対し、br要素は単なるブラウザでの表示上の改行を表しており、文章の区切りには使用しません。W3Cの仕様書にも、
br要素は、詩やアドレスのように、実際にコンテンツの一部である改行のためにのみに使用されなければならない
と記載されていますので注意して下さい。
ついでに説明しておくと、HTMLソースコード上の改行がブラウザに反映されるのは、pre要素のみです。また、半角スペースもpre要素以外の要素内では連続で入力しても半角スペース一文字として解釈されますし、HTMLタグ外では、改行も半角スペースも無視されます。
ハイパーリンク
World Wide Webの神髄、ハイパーリンクを表すにはa要素を使用します。href属性でリンク先を指定します。また、taget属性でリンクをどのように開くか指定でき、デフォルトでは現在のウィンドウでリンク先を開くのですが、target=”_blank” とすると、新しいタブやウィンドウでリンク先を開くことが出来ます。
<a href="http://ja.wikipedia.org/wiki/%E3%82%AD%E3%83%B3%E3%82%AE%E3%83%A7" target="_blank">キンギョ - Wikipedia</a>
また、href属性にはページ内の特定の場所へのリンクを指定することも可能です（ページ内リンクと呼ばれます）。あらかじめ、HTML内にid属性を付与させておいて、そのidを持つ要素位置へリンクさせることが可能です。
id属性の付与
<p id="top">ここはページトップです</p>
id属性へのリンク
<a href="#top">ページトップへ戻る</a>
強調
強調を表すには、em要素やstrong要素を使用します。em要素は文章の特定部分の強調を表し、文章の持つ意味合いを変化させます。また、strong要素は強調させる内容自体の強い重要性を表します。
強調する箇所によって内容の意味合いが異なるem要素
<em>猫</em>はかわいい動物だ
猫は<em>かわいい</em>動物だ
猫はかわいい<em>動物だ</em>
強調する内容自体が重要なstrong要素
<strong>まぜるな危険！</strong>
リスト
順序付きリストを表すにはol要素、順序無しリストを表すにはul要素を使用し、それらの子要素にはli要素を使用します。ol要素はデフォルトでリストの先頭に数字が、ul要素はデフォルトで黒丸が付きます。
<p>炒める手順</p>
<ol>
<li>火をつけます</li>
<li>油を入れます</li>
<li>野菜を炒めます</li>
</ol>
<p>必要なもの</p>
<ul>
<li>フライパン</li>
<li>油</li>
<li>野菜</li>
</ul>
炒める手順
- 火をつけます
- 油を入れます
- 野菜を炒めます
必要なもの
- フライパン
- 油
- 野菜
画像の挿入
画像を挿入するには、img要素を使用します。src属性で画像ファイルを指定し、alt属性で画像を読み込めない環境に配慮した代替テキストを記述します。
<img src="logo.gif" alt="サイト名" />
引用
引用を表すには、blockquote要素を使用します。
<blockquote>キンギョ（金魚、学名: Carassius auratus auratus）は、フナの突然変異であるヒブナを観賞用に飼育、交配を重ねていった結果生まれた観賞魚。</blockquote>
コメントアウト
制作者のメモ等、HTML文書内にブラウザで表示されないコメントを入れることが出来ます。コメントは<!-- と --> で括ります。
<!-- ここにコメントを入力出来ます -->
ここまで説明したHTMLタグのみを使ってHTML文書を作ると、以下のようなページが出来上がります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>金魚について</title>
</head>
<body>
<h1>金魚について</h1>
<p>キンギョ（金魚、学名: Carassius auratus auratus）は、フナの突然変異であるヒブナを観賞用に飼育、交配を重ねていった結果生まれた観賞魚。</p>
<p>金魚の品種は主に、<strong>和金</strong>と<strong>琉金</strong>に分類されます。</p>
<h2>和金（ワキン）型</h2>
<p>キンギョの中では、もっともフナに近い形態で、平たく細長い流線型の体を持ち、泳ぐのも速い。</p>
<h2>琉金（リュウキン）型</h2>
<p>ふっくらとした体つきで大きな尾ビレを持つ。現代では尾びれを鑑賞するために横から見るのがよいとされることが多い。</p>
<p>参考: <a href="http://ja.wikipedia.org/wiki/%E3%82%AD%E3%83%B3%E3%82%AE%E3%83%A7" target="_blank">キンギョ - Wikipedia</a></p>
</body>
</html>
デモページにはCSSが適用されていません（正確にはブラウザのデフォルスタイルシートが適用されています）。CSSの記述方法、適用方法については次ページ以降で説明します。
さて、ここで紹介した内容はHMTL5のほんの一部に過ぎず、注目されているWebアプリケーションに関する説明は省略していますが、テキストメインのWebサイトを作成する上で重要なhtml要素について一通り説明していますので、Webサイト作成に是非とも活用して下さい。