HTML5でマークアップする｜HTML5｜HTML－havin' a coffee break

＃

HTML5文書の基本

HTMLは必ず以下のパーツによって構成され、順番通りに記述しなければなりません。

任意で1個のBOM(U+FEFF)
任意の数のコメントとASCII空白文字
1個のDOCTYPE宣言
任意の数のコメントとASCII空白文字
1個の“html”要素
任意の数のコメントとASCII空白文字

HTML文書の“本体”となる部分は“html”要素とその中身であり、以下の2つの部分から構成されます。

HTML文書自身についての情報
“メタデータ(metadata)”と呼ばれるもので“head”要素の中に記述します。HTML文書のタイトル、スクリプトやスタイルシートなどの外部リソースへのリンクも含まれます。: ユーザーに見てもらうための内容
実際にブラウザに表示される内容で“body”要素の中に記述します。

この他にほとんどの場合は“meta”要素による文書の文字エンコーディングの指定と“title”要素による文書のタイトルの指定が必要です。



<!DOCTYPE html>

<html lang="ja">


<head>


<meta charset="UTF-8">

<title>文書のタイトル</title>



<!--HTML文書自身についての情報-->




</head>

<body>




<!--ユーザーに見てもらうための内容-->




</body>


</html>

＃

DOCTYPE宣言

DOCTYPE宣言(“<!DOCTYPE html>”)は文書の先頭に必要とされる前文で、その文書がHTML5で記述されたものであることを示す宣言です。



<!DOCTYPE html>

<html lang="ja">


<head>


<meta charset="UTF-8">

<title>文書のタイトル</title>



<!--HTML文書自身についての情報-->




</head>

<body>




<!--ユーザーに見てもらうための内容-->




</body>


</html>

DOCTYPE宣言を省略すると文書が互換モードでレンダリングされてレイアウトが崩れる可能性があります。

＃

ルート要素

“html”要素はHTML文書の“ルート要素(Root)”です。ルート要素はすべての基点となる最上位の要素で、他のすべての要素は“html”要素の子要素、もしくは子孫要素として配置されます。



<!DOCTYPE html>

<html lang="ja">


<head>


<meta charset="UTF-8">

<title>文書のタイトル</title>



<!--HTML文書自身についての情報-->




</head>

<body>




<!--ユーザーに見てもらうための内容-->




</body>


</html>

“html”要素には“lang”属性を使用して文書がどの言語で記述されているかを示すことが推奨されます。これは音声ブラウザや翻訳機能などが正しく文書を読み取るのを助けます。

“html”要素の中にはブラウザなどのユーザーエージェントが処理するための情報であるメタデータを内包する“head”要素と実際にユーザーに表示される文書の内容を表す“body”要素を1個ずつ順番に配置します。

＃

文字エンコーディング

ほとんどの場合、HTML文書では“meta”要素で文書の文字エンコーディングを指定しなければなりません。



<!DOCTYPE html>

<html lang="ja">


<head>


<meta charset="UTF-8">

<title>文書のタイトル</title>



<!--HTML文書自身についての情報-->




</head>

<body>




<!--ユーザーに見てもらうための内容-->




</body>


</html>

“meta”要素は“head”要素の中に配置します。

HTML5では文字エンコーディングはUTF-8を使用するべきであるとしています。

文字エンコーディングは実際に文書を保存した文字エンコードと同じである必要があります。文書を保存する際にUTF-8以外を選択した場合は文字化けする可能性があります。

＃

文書のタイトル

ほとんどの場合、HTML文書では“title”要素で文書のタイトルを示さなければなりません。

“title”要素は“head”要素の中に配置します。



<!DOCTYPE html>

<html lang="ja">


<head>


<meta charset="UTF-8">

<title>文書のタイトル</title>



<!--HTML文書自身についての情報-->




</head>

<body>




<!--ユーザーに見てもらうための内容-->




</body>


</html>

文書のタイトルはブラウザのタイトルバーやブックマークに登録した時の名前、検索エンジンの検索結果などに使用されます。

＃

HTMLの階層構造

HTMLの要素の中には他の要素を配置することができ、このことを“入れ子にする(Nesting)”と言います。

入れ子にしている要素と、入れ子にされている要素には親子関係になり、入れ子にしている要素は“親要素(Parent)”、入れ子にされている要素は“子要素(Child)”と呼ばれます。

複数の要素が繰り返し入れ子にされている場合には先祖と子孫の関係にもなり、その関係にある要素は“祖先要素(Ancestor)”、“子孫要素(Descendant)”と呼ばれます。

多くの要素が入れ子になることでHTML文書は“html”要素を最上位の階層とした階層構造を構成します。この階層構造はツリー構造としても表されます。

＃

空白文字

HTMLのコードを記述する際には複数の属性を区切る場合や属性値を区切る場合などに半角スペースやタブ文字、改行が使用されますが、これらの文字はまとめて“空白文字”、もしくは“ホワイトスペース(Whitespace)”と呼ばれます。

HTMLで使用できる空白文字については“ASCII空白文字(ASCII whitespace)”として定義されており、以下の5つがあります。

ユニコード	名称	説明
U+0009	CHARACTER TABULATION	タブ文字
U+000A	LINE FEED	行送り
U+000C	FORM FEED	頁送り
U+000D	CARRIAGE RETURN	復帰
U+0020	SPACE	半角スペース

一般的にHTML文書を記述する際にはコード自体の見栄えを整えるためにも空白文字が多用されますが、このような空白文字は“要素間の空白文字(Inter-element whitespace)”と呼ばれます。要素間の空白文字は要素と要素の間にはいつでも挿入することが認められます。

通常、HTML文書がウェブページとしてブラウザによって描画されるときにはコードを整える目的で使用されるホワイトスペースがレイアウトに影響を与えないようするため、まとめられたり、除去したりするなどの処理が行われます。ホワイトスペースがどのように処理されるかはCSSの仕様で定義されています。

ホワイトスペースの処理は複雑な規則に基づいて多くの段階を経て行われますが、一言でいえばHTMLのコード上にある複数のスペースやタブ文字でできた字下げと改行はブラウザに表示される時には除去されるか1個の半角スペースに置き換えられます。



<p>


なまめかしきもの。
    簀子の高欄のわたりに、
        いとをかしげなる猫の、
            赤き首綱に白き札つきて、
                    いかりの緒くひつきて、
                        引きありくも、
                            なまめいたる。


</p>

なまめかしきもの。簀子の高欄のわたりに、いとをかしげなる猫の、赤き首綱に白き札つきて、いかりの緒くひつきて、引きありくも、なまめいたる。

＃

基本の形

以下がHTML5文書の基本形です。



<!DOCTYPE html>

<html lang="ja">


<head>


<meta charset="UTF-8">

<title>文書のタイトル</title>


</head>

<body>




<!--ユーザーに見てもらうための内容-->




</body>


</html>

内容を記述すると以下のようになります。



<!DOCTYPE html>

<html lang="ja">


<head>


<meta charset="UTF-8">

<title>黄色いフルーツバナナ</title>


</head>

<body>


<!--ここからが実際にブラウザに表示されます-->



<h1>黄色いフルーツバナナ</h1>

<p>バナナについての解説。</p>



<h2>バナナの特徴</h2>

<p>「バナナ」はバショウ科バショウ属の多年草及びその果実のことである。</p>



<h3>バナナの木</h3>

<p>バナナは「バナナの木」と呼ばれるように高さが数メートルまで成長するが草本に分類される。高く伸びる茎のような部分は葉鞘が幾重にも重なりあっているものであり、本当の茎は地中にある。</p>



<h3>バナナの果実</h3>

<p>バナナの果実は一般的には緑色、熟成したものは黄色であると思われがちだが、実は紫色や桃色のものなどいろいろなものがある。</p>



<!--ここまでが実際にブラウザに表示されます-->


</body>


</html>

＃

セクショニング

HTML文書の内容となる文章も階層構造をつくります。この文章の階層構造を“アウトライン(Outline)”と呼びます。

“h1~h6”要素だけでも階層構造を表すことができますが、HTML5で新しく追加された“article”要素、“nav”要素、“section”要素、“aside”要素などのセクショニング要素を使用することでより明確に文章の構造を示すことができます。



<!DOCTYPE html>

<html lang="ja">


<head>


<meta charset="UTF-8">

<title>黄色いフルーツバナナ - 果物を食べる</title>


</head>

<body>




<header>


<h1>果物を食べる</h1>

<nav>


<ul>


<li><a href="index.html">トップ</a></li>

<li><a href="apple.html">りんご</a></li>

<li><a href="peach.html">もも</a></li>

<li><a href="banana.html">バナナ</a></li>

<li><a href="mangosteen.html">マンゴスチン</a></li>


</ul>


</nav>


</header>



<article>


<header>


<h1>黄色いフルーツバナナ</h1>

<p>バナナについての解説。</p>

<nav>


<ul>


<li><a href="#section1">バナナの特徴</a></li>

<li><a href="#section2">バナナの産地</a></li>

<li><a href="#section3">バナナの保存方法</a></li>

<li><a href="#section4">バナナの栄養素</a></li>


</ul>


</nav>


</header>



<section id="section1">


<h2>バナナの特徴</h2>

<p>「バナナ」はバショウ科バショウ属の多年草及びその果実のことである。</p>

<section>


<h3>バナナの木</h3>

<p>バナナは「バナナの木」と呼ばれるように高さが数メートルまで成長するが草本に分類される。高く伸びる茎のような部分は葉鞘が幾重にも重なりあっているものであり、本当の茎は地中にある。</p>


</section>

<section>


<h3>バナナの果実</h3>

<p>バナナの果実は一般的には緑色、熟成したものは黄色であると思われがちだが、実は紫色や桃色のものなどいろいろなものがある。</p>


</section>


</section>



<section id="section2">


<h2>バナナの産地</h2>

<p>バナナの生産量の世界一はインドで、中国、フィリピン、エクアドル、ブラジルが続く。日本は124位であり、沖縄や奄美大島、鹿児島などで栽培されている。</p>


</section>



<section id="section3">


<h2>バナナの保存方法</h2>

<p>果肉の柔らかいバナナはテーブルなどに置いておくと接触した部分が黒ずみ、傷みやすくなるので房の根元を引っ掛けて吊るして、風通しの良い場所に常温で保存する。茶色い星が出た完熟バナナは冷やして保存する。</p>


</section>



<section id="section4">


<h2>バナナの栄養素</h2>

<p>ビタミンB群や、ビタミンCなどのビタミン、カリウム、マグネシウム、カルシウムなどのミネラル、食物繊維などがバランスよく含まれる。また1本(約100g)約86kcalと、ごはんやパンと比べて低カロリーである。</p>


</section>


</article>



<footer>


<ul>


<li><a href="contact.html">お問い合わせ</a></li>

<li><a href="link.html">リンク集</a></li>


</ul>

<p><small>&copy; copyright 2015 Frouts wo taberu</small></p>


</footer>



<!--ここまでが実際にブラウザに表示されます-->


</body>


</html>