もくじ
全体
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content=IE=edge"> <meta name=”viewport” content=”width=device-width,initial-scale=1.0″> <title>ページのタイトル</title> <link rel=”stylesheet” href=”/style.css”> </head> <body> Hello world! </body> </html>
これをもとに、それぞれを意味を理解しましょう！
<!DOCTYPE html>
DOCTYPE宣言と呼ばれるもので、HTML文書では必ず最初に「DOCTYPE宣言」を記述する必要があります。脳死で記述しましょう。
<html>タグ
HTML文書であることを示します。
<html lang="ja">
<html>だけでも問題はありません。
lang="ja"は言語設定みたいなもので、jaにすると「このページは日本語で書かれていますよ」という意味になります。英語ならlang=”en”です。
<head>タグ
文書のヘッダ情報を表します。
ヘッダ情報とは、<title>（タイトル）、<link>（リンク情報）、<style>（スタイルシート）や<meta>（メタデータ）など、その文書に関する情報のことです。
要素の記載順について文字コードを指定するmeta charset以外はどんな順番で書いても差し支えありません。meta charsetは真っ先に記述しましょう。
<meta>タグ
その文書に関する情報（メタデータ）を指定します。
<head>タグの中に記述します。
<meta charset=”UTF-8″>
文字エンコーディングの指定をします。指定しないと、文字化けが起きる可能性もあるので、必ず指定しましょう。
「UTF-8」の他に「SHIFT_JIS」や「EUC-JP」もよく使われるエンコードです。
<meta http-equiv="X-UA-Compatible" content=IE=edge">
Internet Explorerを使用している人が、利用できる中で互換性のモードを設定できるようになります。
IE6を使用のユーザでもIE7以上想定して作られたサイトのレイアウトが崩れたり違う動きにならないようにするためにあるようです。
とはいえ、不要だいう人もいるので、お好みで、といったところ。必要に応じて判断してください。あってもなんら問題ないので、あってもいいかなとは思います。
<meta name=”viewport” content=”width=device-width,initial-scale=1.0″>
各種ブラウザのウィンドウサイズにデザインを最適化させるための設定です。
「width=device-width」を指定するとviewportの幅は端末や各種ブラウザのウィンドウの横幅に依存します。
<title>タグ
ページのタイトルをつけられます。
一つの文書内で複数の<title>を指定することはできません。
chromeなどブラウザで開いた時に、タブ部分に表示されるのでページにあったタイトルをつけましょう。
また、title要素はSEO対策としても大変重要な意味を持ちます。 検索結果で上位表示させたいキーワードがある場合には、 <title>～</title>の中にキーワードを配置しても効果的です。
<link>タグ
リンクする外部リソースを指定する際に使用します。
よく使われるのはスタイルシートを読み込む場合でしょう。他には、bootstrapのような外部ライブラリを読み込んだりする場合にもここに記述します。
<link>タグを指定する場合には、href属性とrel属性が必須です。
<link rel=”stylesheet” href=”/style.css”>
読み込むスタイルシートを指定します。
href属性は、スタイルシートがあるディレクトリを指定します。
<style>タグ
スタイルシートを記述する際に使用します。
なくても問題ありません。初めに書いたサンプルコードにも記述していません。
<style>～</style>のようにくくって記述します。
<style> p.sample {font-weight:bold; color:orange;} p.sample cite {background:orange; color:white; padding:4px;} p.sample em {background:yellow;} </style>
しかし、cssファイルを作成して <link rel=”stylesheet” href=”/style.css”>で読み込む方法が多いと思います。
このページだけ特別指定したい場合などには有効です。
なぜなら、コードは上から読み込まれ、同様のコードがあとにあると上書きされるからです。<link>タグの後に<style>タグで指定すれば、読み込んだ<link>ファイルのスタイルを上書きすることができます。
<body>タグ
文書のメインになります。ここに、ブラウザに表示させたい内容をすべて記述します。
<body>～</body>の中には見出し・段落・表・フォームなどの要素を配置します。
