全体構成
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>タイトル</title> [CSS設定] </head> <body> ..... </body> </html> |
- DOCTYPE宣言で始める
html要素の中にhead要素とbody要素を記述head要素の中には、meta要素、title要素と、必要に応じてスタイル設定のための要素を記述
DOCTYPE宣言
|
1 |
<!DOCTYPE html> |
- XHTMLに比べて簡略化
- ブラウザなどにHTML5であることを明示
- DOCTYPE宣言がないと、ブラウザによってはレンダリングモードが互換モードとなりCSSの解釈が意図と異なるレイアウトとなる場合がある
- DOCTYPE宣言によって、主要なブラウザは標準モードとなる。
html要素
lang属性による言語の指定
|
1 |
<html lang="ja"> |
htmlタグのlang属性で言語を指定し、ブラウザ・検索サイトなどに伝える。
head要素
文字コード指定
|
1 |
<meta charset="utf-8"> |
head要素内のmeta要素で文字コードを指定する- HTML4以前の記述も可能だが、HTML5ではより簡略な表現が可能
- この宣言より前のものは文字化けの可能性があるため、
head要素の冒頭に記述
title
|
1 |
<title>[タイトル]</title> |
head要素内のtitle要素で指定- [タイトル]がブラウザのタイトルバーに表示される
- 検索サイトでの検索結果のタイトルにも使われる
CSS設定
外部ファイル指定
|
1 |
<link rel="stylesheet" type="text/css" href="[ファイル名]"> |
head要素内のlinkタグの属性で指定- HTML5ではrel属性の値が”stylesheet”の場合のtype属性の値は”text/css”として設定されているので省略可能
CSSの直接記述
|
1 2 3 4 5 |
<style type="text/css"> <!-- ..... --> </style> |
head要素内のstyle要素の中にCSSの文を直接記述