さくらサーバのレンタルスペースにlaravelを導入したので色々触りがてら
HTML5だとかで変わったことを調べながらメモしてゆく。
#構造
まず基礎の基礎、HTML5の構造について。
これは特に変化は無いようだけれど念の為メモ。
<!DOCTYPE...>
<html>
<head>
ヘッダ情報
</head>
<body>
コンテンツ内容
</body>
</html>
タグに使用する文字はXHTMLは特定の部分を除き小文字で記述する決まりがあるが、
HTMLは特定の部分を除き大文字小文字どちらでも良い。
将来を見据えてHTMLも小文字で統一しておくのがよさそう。
ちなみにhtml5でのDOCTYPEは<!DOCTYPE …と記述することが多いが、実際は大文字小文字どちらでも構わない。
しかしSGML/XMLではDOCTYPEを大文字で記述する必要があるため、HTML5でも大文字で書かれることが多い。
#DOCTYPE(DTD)宣言
一行目には、HTMLバージョンのDOCTYPE(DTD)宣言を記述し、その仕様での文法を利用しなくてはならない。
HTML4以前では上手に読んでもらうため長々とした（しかし必要な）記述が必要だったが、
HTML5では下記の様に簡略化され、必須だがほとんど意味のないものとなっている。
///HTML 4.01 Transitional DTD のDOCTYPE宣言
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
///HTML5 のDOCTYPE宣言
<!DOCTYPE html>
#lang属性
ブラウザや検索サイトなどに当該要素の言語を伝えるために記述する。
これも特に変化は無く、以下のように記述する。
<html lang="ja">
#HEAD構造
文字コードやタイトル情報、CSSやJSのリンクなどを<head>～</head>内に記述する。
必須なわけではなく、head自体省略しても問題は無いが、文字化けなどの原因にもなるため基本的には省略しない。
<head>
<meta...> //文字コード
<title>...</title>
<meta...> //meta情報
<link...> //CSSやjavascriptのlink
</head>
##文字コード
このmeta宣言より上部のものは文字化けの可能性があるため、必ず<head>～</head>内最上部に記述すること。
HTML4以前の記述のままでも使用可能だが、<meta charset="～を使用することで簡略化出来るようになった。
//HTML4以前のUTF-8指定
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
//HTML5のUTF-8指定
<meta charset="UTF-8">
##タイトル
検索サイトでの検索結果のタイトルや、ブラウザのタイトルバーに表示されるタイトルとなる。
これも特に変化は無し。
<title>タイトル</title>
ただしタイトルが全角32文字を超えるとGoogleでは省略されてしまうため、なるべく32文字以内が好ましい。
##meta情報
###description
検索サイトでの検索結果のタイトルの下の説明文になる事が多い。
<meta name="description" content="説明文">
Googleなどでは全角80文字程度まで表示される（らしい）。
###keywords
当該ページに関係の深いワードを10個以内で記述する。
現在はあまり使われていないらしいので使わない方針で進める。一応メモ。
<meta name="keywords" content="単語,単語,単語">
HTML5タグリファレンスにも
ユーザーエージェントは、この値の信頼性において、十分に確信を得られなければ、この情報を使うべきではありません。
とある。
###その他
作者やジェネレータなど下記内容の他にも記述可能なmetaはあるが、必要そうなものだけ抜粋。
//スタイルシート言語 （CSS利用時に記述）
<meta http-equiv="Content-Style-Type" content="text/css">
//スクリプト言語 （javascript利用時に記述）
<meta http-equiv="Content-Script-Type" content="text/javascript">
##リンク
CSSや他のページなど、他のリソースにリンクする。主に使用するのはCSS。
これも特に大きな変化な無いよう。
//CSS
<link rel="stylesheet" href="stylesheet.css" type="text/css">
#なんかすごいタグ増えた（ざっくり）
今までは何でもかんでも<div>でヘッダ、フッタ、メニュー、ナビゲーションなど分けていたが、
より明確に文書構造を示すことができるよう様々なタグが追加された。
例:(参考サイトより)
（※注:この画像sectionとarticleの使い方おかしい気がする）
#まとめ
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title></title>
<meta name="description" content="">
<meta http-equiv="Content-Style-Type" content="text/css">
<link rel="stylesheet" href="stylesheet.css" type="text/css">
</head>
<body>
<header>
</header>
<article>
</article>
<footer>
</footer>
</body>
</html>
これが大まかにHTML5！って感じのテンプレートになるのかな。
#参考にしたサイト