最近作ったwebサイトのマークアップがボロボロだと、師匠的なプログラマーさんに言われたので、もう一度最初から勉強しなおし。
参考
よくわかるHTML5+CSS3の教科書を参考にしてみました。
要素
<!DOCTYPE html>
DOCTYPE宣言、本来htmlのバージョンを記述していたのだが、実は現在においてはバージョンを示すためには使われていない。
2000年ごろはDOCTYPE宣言を指定ないhtmlが多かった為、MacのInternet Exproloerを筆頭に各ブラウザが宣言のあるhtmlとないものでブラウザの表示モードを変えた、「宣言あり→標準仕様準拠の新しいページ」、「なし→旧式ページ」そのため、現在でもブラウザの制御のためにDOCTYPE宣言はつける必要がある。
html
全ての親要素、そのためルート要素とも呼ばれる。
head
ページに関する情報、タイトル、日本語（文字コード）や、css、js、スマホ対応（viewport）や、fb・twitterでのシェアされた時の写真やテキストの設定等。
meta
<meta charset="utf-8">で、任意の文字コードの指定。<meta charset="utf-8">でも<meta charset="utf-8" />でもOK。
body
この中の要素がページに表示される。
必ず、bodyとheadはページに一つづつ必要。
link
外部cssファイルの読み込み。
<link rel="stylesheet" href="style.css">
relで形式指定、hrefで読み込みファイルを指定。
style
head内にを配置すると、直接cssを書ける。
この方法は、そのhtmlにしかcssが効かなくなるので特別な理由がない限り使用しない。
任意の要素に
@import "style.css"と記述することで、cssファイルの中から、別のcssを読み込むこともできる。
グローバル属性
どんな要素にも指定できる属性。
一覧↓
id属性
固有の名前をつける。1ページに一つしかつけれない。
その要素固有の表示指定をするために活用。もしくはページ内リンク用。大文字小文字の区別あり。
class属性
要素の種類を示す場合につける。他でも使い回す表示指定の時活用。特にその表示機能ごとにclassの名前をつけると読みやすい。大文字小文字の区別あり。
title属性
補足情報を加えるときに必要。これに値を指定するとマウスオーバー時のツールチップとして出てくる。
lang属性
要素内容の言語を示す。日本はja、英語はen。
HTMLのカテゴリ
1.自由配置コンテンツ
div等？(body要素内であればどこにでも配置可能)
2.見出しコンテンツ
h1、h2等？
3.セクションコンテツ
section,header、nav、article等？
4.文章内コンテンツ
span等？
5.組み込みコンテンツ
iframe等？
6.インタラクティブコンテンツ
?
7.メタデータコンテンツ
meta等＞
8.その他コンテンツ
HTML5ではどの要素をどこに配置できるか、どの要素にはどの要素を入れられるかを示すのにこのカテゴリーを使う。
しかし、
もっと簡単なカテゴリーもある。
ブロックレベル要素
div、p等、まとまった単位
必ず改行される。
h
見出し。(headingの略)
h1~h6まである。
hgroup
見出しのグループ化。
要素内容として入るのは「h1~h6のみ」。
普通見出しが2つ続くと新しい章が始まったとブラウザには認識される。
しかし、主題と副題のように2つまとめて1つの見出しと認識して欲しいときには、hgroupでかこう。
※コメントでも指摘いただいたのですが、W3CのHTML5 勧告候補 (2013年8月6日)からは削除されているのでこのタグは使わない方が良いかと思われます。
<hgroup>
<h1>htmlの教科書</h1>
<h2>楽しいよー</h2>
</hgroup>
p
パラグラフ(paragraph)
中に入れられるのは、インライン要素のみ。
blockquote
引用文であると示すときに使う。
<blockquote cite="http://example.com(引用先のURL)">
<p>ローマは1日にして成らず。</p>(blockでもinlineでも自由に入れれる)
</blockquote>
ただ、文章内の一部(インライン要素)として引用文を含める場合は、q要素を使う。
pre
整形済みテキスト（preformatted text）半角スペースや、段落が入力したままの状態で表示される。brとかを含めたくないソースコードをコピペする時に使うと楽。
インライン要素
(inline = 行内)要素は、ブロックレベル要素の中に入っているテキストの一部分となる要素。
span、strong、そして普通の文章
改行されない。
em
その部分の強調。(emphasis)
strong
その部分が重要であると示す。
emの強調とstrongの重要性の違いは、emの強調は文章の意味を変えてしまうことがある。
例えば、<em>僕は</em>彼女が好きは、他の人は知らないけれど、”僕”は好きという意味になるので、音声で読み上げる場合はアクセントに影響を与える。strongは文章の意味を変えない。
表示はブラウザではemはイタリックに、storngは太文字で表示される。
q
その部分が引用文（quotation）であることを示すインライン要素。
ただ日本語の場合は「」を使ってもOK。
使うと表示は、"僕"のようにダブルクオーテーションで囲まれる。
cite属性も指定できる。
cite
引用した作品のタイトル。人名には使用不可。
code
ソースコードに使用。
改行やインデントをそのまま表示使うときは、preで囲って使う。
<pre>
<code>
#hello{
color:white;
}
</code>
</pre>
small
著作権、注意書き、免責事項等、付帯情報を書くのに使う。
小さく表示される、
<p>
<small>© 2017 しくみづくり</small>
</p>
© は、©のマーク。
span
インライン要素であることを示す。
それだけ。
その他あまり使われないインライン要素
abbr : 略語
dfn : 定義の対象用語
sup : 上付き文字 例 co2
sub : 下付文字 例 co 2
i：元々イタリック学名、外国語等。
b :は太文字。
mark : ユーザーに注目して欲しい。背景色黄色でハイライトされる。
リンク
<a href="http://exapmle.com" target="_blank">こちらからリンク</a>
target="_blank"でリンクを別タブで開く。
target="_self"で現在のタブで開く。
フォームや、リンクの中にリンク等、インタラクティブコンテンツ以外であればblock要素も入れられる。
特定の場所へリンクする
#をつけて、特定のidを指定することで、特定の場所へリンクを張ることもできる。
ルビ
<p>
こんにちは、<ruby>どらえもん<rt>青いたぬき</rt></ruby>だよ。
</P>
こんにちは、どらえもんだよ。
セクションについて
html5から章（しょう）、節（せつ）、項（こう）などの範囲が定義された。
「セクションの範囲が明確に分かる」 + 「セクションの親子関係がわかる。」(「章」の中に別セクションがあれば、「節」と判断できる。)
セクション見出しのルール
セクションの、先頭にある見出し(<h1>等)はこのセクションの見出しになる。
・次の見出しが現れたとき、前の見出しと同階層(hの数字の大きい小さい？)、もしくは上の階層であれば、新しいセクションが始まる。
・前の見出しより下であれば、前のセクションの下位セクション（サブセクション）として扱われる。
※だからh1を主題、h2を副題として扱いたいときは、<hgroup></hgroup>を使う。
※ただ一般的に、セクションの範囲にはセクションタグをつけて、それにあった階層の<h?>をつける。もしくは<h1>だけをつけることが推奨されている。
セクション要素
section：この範囲が一般的な章・節・項などの普通のセクションであることを示す。
article ：セクションの中でもそれだけで独立している。ブログの中の各記事等。
aside：メインコンテンツに含まれない、補足記事、広告、一部抜粋した記事の説明文等。
nav ：ナビゲーションを示すセクション。ただ、全てのナビゲーションに使うのではなく、グローバルナビゲーションのようにページ内での主要なナビゲーションに対してのみ使用する。
他にもセクションではないが、基本構造を示すタグとして、
header:ヘッダー的な部分を示す時に使う。
main:メイン的な部分を示すのに使う。
footer:フッター的な部分を示す時に使う。
address:多くの場合footer要素の中で使う。連絡先をのみを囲う。(copyrithなどは入れない）
article要素で使われているときはその記事の連絡先を示す。
画像・動画・音声関連要素
img ：画像の読み込み。
<img src="picture.png" alt="">
altには画像の代わりに機能するテキストを入れる。
【注意】：画像の説明ではない。
altはhtml5以前では必須だったが、html5では不要と思われる場面では必要ない。
video:動画読み込み
指定可能な属性
・poster="画像のURL"
サムネイル画像の指定。
・controls
コントローラーの表示
・autoplay
途中で止まらずに再生できる程度のデータを読み込んだ段階で、再生を自動開始。
・loop
ループ再生
・muted
ミュート再生
audio：音声読み込み
・poster以外上記のvideoタグと同じ。
source：動画や音声の代替データを指定する。
上記2つのタグは、src属性でデータを指定するときは、一つのデータしか指定できない。
ただ予備として他の形式のデータを指定したいときはsourceを使う。
sourceを使うと「いくつでも指定可能」、「より先に指定されているものが先に再生される」、「audioやvideoタグ内で記述、他のデータよりも前に配置する」
・src= "データのURL"
・type = "MINEタイプ"
MINEタイプとは、サーバーにxxx.gifのリクエストをしたとき、サーバーはWEBサーバーはxx.gifの内容(データ)を「これは image/gif タイプのデータです」返してくれる。この指定形式のこと。他にもあり、htmlは「text/html」となる。
<video>
<source src="bear.mp4" type="video/mp4">
<source src="bear.ogv" type="video/ogg">
<p>HTML5対応のブラウザで動画再生できます。</p>
</video>
リスト要素
・ul：箇条書きタイプのリスト
・ol：番号付のタイプのリスト
・li：リスト内の一項目
<ul>
<li></li>
<li></li>
</ul>
<ol>
<li></li>
<li></li>
</ol>
リストの入れ子
ulやol要素の子要素として入れることができるのはliだけです。
その為、子要素としてはli要素を一度入れliを要素の中に、ul/ol要素を入れる。
※li要素の中には、inline要素、block要素どちらも入れれる。
<ul>
<li>ul要素の項目1</li>
<li>ul要素の項目2
<ol>
<li>ol要素の項目1</li>
<li>ol要素の項目2</li>
</ol>
</li>
</ul>