こんにちは。中村です。HTML5が2014年10月28日に正式に勧告されてから、はや１年が経ちました。
そこで振り返りも兼ねて、Webページを作るときに最低限必須なHTMLの記述と、その意味を記します。
この記事の目次
HTMLの必須要素とその意味について
最低限必要なHTMLの記述
HTML5を使ってWebページを作るときに、最もシンプルなHTMLの記述は、下記のようなものになります。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> </body> </html>
ググればすぐ出てくるので、覚えなくても問題ないです。HTMLのコーディングを行うソフトウェア（Dreamweaverとか）なら、テンプレートとして保存されているので、そちらを利用するのも手ですね。
DOCTYPE宣言
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> </body> </html>
DOCTYPE宣言とは・・・
DOCTYPE宣言とは、文書がHTMLであり次にはじまるHTML文書（HTMLソース）がどのバージョンを利用して、どのDTD（文書型定義）に従って記述されているかを文頭に宣言することです。
【出典：DOCTYPE宣言って？・http://www.d3.dion.ne.jp/~tiyoko01/sitoku/doctype.html・2015/11/07】
今回、記載したDOCTYPE宣言は「HTML5のDTDにしたがってHTMLを記載していますよ。」という意味になります。
DOCTYPE宣言が無いと、ブラウザ側がどの形式で記述しているのかがわからず、CSSが実装される以前のWebサイト/ブラウザとの互換のための「互換モード」でHTMLを表示させてしまいます。
互換モードではCSSの記述がうまく読み込まれず、レイアウトが崩れてしまう場合があります。気をつけましょう。
ブラウザからしたら「現代文かな、古文かな。。わかんないからとりあえず音読みしよう。」みたいな感じかな と勝手に認識してます。
HTML と lang属性
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> </body> </html>
HTML要素は、文字通りHTMLの記述を包含する要素になります。「ここから(<html>)ここまで(</html>)がHTMLだよ！」というのをブラウザに伝えている要素です。
よく「DOCTYPE宣言はHTML要素の外側で良いの？」と聞かれるのですが、いいんです。
DOCTYPE宣言 = 「ここからHTMLで書くよ！」
HTML要素 = 「僕の中の記述はすべてHTMLだよ！」という感じの認識でいてください
lang属性は必須の項目ではないので、ユーザーの為の属性だと思ってください。Lang属性とはLanguageの略で、どこの国の言語で記述されているかを明示する属性になります。今回の例ですと ja = Japanese となっています。
lang属性はどの要素に対しても付与することができる属性になっています。ユーザーに適したサイト作りを行うのであれば、英文を記載する場合はlang属性をenに設定するようにしておくと、よりユーザーへ配慮したサイトだとgoogleから評価されます。
<p lang="en">hello world!!</p>
Head要素
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> </body> </html>
<head>タグは、文書のヘッダ情報を表す際に使用します。 ヘッダ情報とは、その文書に関する情報のことです。 head要素を正確に定義するなら、「そのHTML文書に関するメタデータを集めたもの」ということになります。
【出典：<head>文書のヘッダ情報を表す・http://www.htmq.com/html5/head.shtml・2015/11/07】
head要素の中には1つだけ、必ず明記することが義務つけられている要素があります。それがtitle要素です。
Title要素
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> </body> </html>
タイトルです。そのままですね。何のタイトルかというと、一枚のユーザーが閲覧するページのタイトルになるわけです。
body要素
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> </body> </html>
ユーザーのUA上で確認が可能なメインのコンテンツを記述するエリアになります。ユーザーから見るとここがwebページの全てですね。Body要素の内部構造に関しては、W3Cの細かな規定がありますのでユーザーの満足度を上げSEO効果を最大化させるためにも規定にしたがって記述することをオススメします。
おわりに
HTMLの基本的な書き方でした。
すごく単純ですが、深掘りするといくらでも情報がでてくるので最小限にとどめました。