HTML5のひな型/netkansai

2016/12/12

HTML5でサイトを作成する時のひな型を置いておきます。

あえて理由がない限り今だったらHTML5でサイト作成すると思います。 2016年11月1日にHTML5.1が勧告されましたが、HTMLのひな型的は影響ないと思われます。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ここにタイトル</title>
</head>
<body>
<p>Hello World</p>
</body>
</html>

こんな感じが最小のような気がします。最もhtml要素やhead,bodyは省略可なので

<!DOCTYPE html>
<meta charset="UTF-8">
<title>ここにタイトル</title>
<p>Hello World</p>

のようなものもhttps://validator.w3.org/のバリデータを通ってしまいますが、わかりにくいだけのような気もします。初めのHTMLにもう少し追記しまして独自のHTML5のひな型にしたいと思います。

html要素にはlang属性をつけておいた方がよいと思います。lang属性はheading要素やp要素などにも設定できるので該当する段落だけ英語ならばp要素にlang="en"などと設定するとよいでしょう。

jaのところはja-jpとして言語はja国はjpという風にすることもできるようです。ja-jpとするのが良いかどうかは、残念ながらわかりません。

meta要素としてはcharset="UTF-8"以外にも

<meta http-equiv="X-UA-Compatible" content="IE=edge">

があります。いまだにIEの呪縛解けずといった感じですが、Windows10 にもまだIE入ってますから。互換表示のボタンが表示されないようでIE互換表示で表示されないためには今しばらく必要なようです。

いわゆるスマホのブラウザに対してする設定でこれだけだとPC表示と同じような塩梅でスマホ画面に表示してくれる。なくても同じ表示になると思われます。ただこれを書いておくとCSSでスマホとPCのCSSの切り替えが可能になる。はやりのレスポンシブ対応ということができます。

CSSを使わないということはあり得ないと思いますので

 <link href="dammy.css" rel="stylesheet">

を入れておいて実際のCSSのパスと置き換えるのがいいでしょう。

さらにJavaScriptも読み込みますが、近頃は出来合いのものを複数とりこんでごにょごにょすることが多いようでファイルサイズもモバイル環境では馬鹿にならないようでheader内で読み込んでしまうとブラウザに何も表示されない時間が長くなってしまい、離脱率が上がるとかでbody要素の終了の直前で読み込むのがよさそうな感じとのことです。

<!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">
    <title>ここにタイトル</title>
    <link href="dammy.css" rel="stylesheet">
  </head>
  <body>
   <p>Hello World</p>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="dammy.js"></script>
  </body>
</html>

が出来上がりました。

IE対応がもっと必要な場合は

<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>

でHTML5の新しい要素に対応するhtml5shivとメディアクエリーにも対応するrespond.jsを読み込んでおけばいいと思います。

お名前
コメント