【HTML5】網羅的に1から学び直してみる


プログラミングを勉強し始めて半年。HTMLをなんとなーくしか勉強せずNuxtやらLaravelやらフレームワークまで手を出してしまっていたので、一度1から学び直してみました。

**「もうHTML5の本を開かない！！」**というモチベーションの元、全ての要素(タグ)を網羅しているはず。今改めて重要そうだな、使えそうだなと思う所はちょっと詳しめに調べてみました。



##バージョンについて

現在のHTML最新バージョンはHTML5.2(2019年5月現在)。

- HTML5が2014年に勧告。HTMLの世界規格を制定するW3C(World Wide Web Consortium,1994年設立)がHTML, CSSなどへの規格を決定している。
- 以前のHTML4.01(1999年制定)やXHTML1.0は長年使われ、その当時、動きを出すのに利用されていたのがFlash。Flashが爆発的に普及したが、それによる問題点も多く、Flashに依存しないウェブサイトを構築するためHTML5が検討された。
- HTML5の特徴は動きのあるサイトを実現できるように、要素(タグ)が拡張された事。


##基礎

- HMTL5以前では、要素はブロック要素とインライン要素の２つに区分されていた。しかしHTML5では、これらの区分を下記のカテゴリーに分け直された。
    - **メタデータコンテンツ**：文書内コンテンツの表示や動作の指定、ドキュメントの感rネイせい、文書のメタ情報を指定する要素。ex. script, style, title, link, meta
    - **セクショニングコンテンツ**：明示的にアウトラインを生成する要素。ex. article, nav, section
    - **ヘディングコンテンツ**：セクションの見出し。ex. h1, h2..
    - フローコンテンツ：body要素で使われるほとんどの要素がここに分類される。
    - **エンベデッドコンテンツ**：文書にメディアリソースを埋め込むもの。ex. video, img, canvas, picture
    - **インタラクティブコンテンツ**：閲覧者が操作する要素。ex. a, iframe, img, input, textarea, button, etc.
    - **フレージングコンテンツ**：文書を構成すテキストを表す要素。従来のHTMLでインライン要素と呼ばれていた。ex. span, template, etc.(??)
![](https://paper-attachments.dropbox.com/s_8AAD80A74752BD65E7B939F3809B0955C83FA261AC5CD0493A15E589D1595FE2_1557972438030_+2019-05-16+11.06.59.png)

- **コンテンツモデル**：要素がどの要素を子要素として持つ事が出来るかを定義したルール。
- **トランスペアレントコンテンツ**：aタグのような親要素のコンテンツモデルを受け継ぐ要素の事
- **アウトライン**：HTMLの階層構造の事。以前はsectionタグ等が存在せず、階層構造をヘディングコンテンツで暗黙的に現してきたが、HTML5ではセクショニングコンテンツにより明示的にアウトラインを明示する事が出来る。むしろそれが推奨されるという意味かな。
- **セクショニングルート**：bodyタグなど。


- **グローバル属性**：全ての要素に指定できる共通の属性。
    ex. class, hidden, id, style, title 
 - data-* : カスタムデータ属性。Javascriptでするための独自属性を指定。
  - draggable：Drag and Drop APIを使用して要素のドラッグ可否を指定。値：true, false。


##基本構造

`<!DOCTYPE html>`：htmlタグの外側に記述し、このドキュメントがHTML5であることを宣言する。
`<html 属性=``"``属性値``"``> ~ </html>`：全ての要素を入れる箱。よく使う属性はlang。ex. lang=”en”や”ja”。
**meta要素：**
`<meta name="メタデータ名"content="内容">`
`<meta http-equiv="キーワード"content="内容">`
`<meta charset="文字コード">`

```html:例
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    ↑ピンチ操作による拡大・縮小が出来る指定
    <meta http-equiv="X-UA-Compatible" content="ie=edge"> 
    ↑Internet explorerの最新バージョンの標準モードを指定。
```

**link要素：**指定した外部リソースを参照。
`<link href="属性値" rel="属性値" その他の属性="属性値">`

- href, relは必須。
- href：参照する外部ファイルのURLを指定。rel：href属性で指定したファイルの用途を指定。
- relでよく使うのは、stylesheet, icon, index, next, prev, authorなど。
- その他属性として指定できる属性：type, media, crossorigin, sizes, title, グローバル属性。
- crossorigin：クロスドメイン通信によるサーバーとの通信方法を指定。

`<base 属性="属性値">`：相対パスの基準となるURLを指定。href属性は必須。**target属性にて_blankを指定する事で、リンクに飛ぶ際、新しいウィンドウで立ち上げることをデフォルトにする事が可能(便利)。**

##セクション

`<main>~</main>`：bodyタグ内に配置され、この部位が主要なコンテンツである事を明示。
`<article> ~ </article>`：ブログやメディアサイトの記事などHTML文書の中で独立した記事の箇所を示す。入れ子にする事も可能。
`<section> ~ </section>`：文章中のセクション(章や節といったまとまり)を明示する。後述するheader, footer, nav, asideなどを包括する汎用的なセクション分け。
`<header> ~ </header>`
`<footer> ~ </footer>`
`<nav> ~ </nav>`：HTML文書内の他ページへのリンクを示す。
`<aside> ~ </aside>`
`<address> ~ </address>`：HTML文書または記事の作者への連絡先・問い合わせ先を明示。
div要素：
`<div> ~ </div>`：汎用的な範囲分け。似た要素にspanタグがある。
正しい使い方：一部分だけデザインを変える。
誤った使い方：article, header, footerなど他に適切な要素がある場合は、そちらを優先して使う。


##テキスト

`h1~h6要素まで <h1> ~ </h1>`
`<p> ~ </p>`：文書内の段落を示す。
`<ol 属性="属性値"> ~ </ol>`：ordered listの略。順序のあるリストを表示。type属性でリスト項目表記が指定可能。ex. 初期値→数字、a→英小文字、i→小文字のローマ数字。start属性でリスト項目の開始番号を整数で指定可能。
`<ul> ~ </ul>`：unordered listの略。順序の無いリスト。初期スタイルは黒丸(disc)。マーカースタイルを変更する場合は、cssでlist-style-typeプロパティを使用。
`<li 属性="属性値"> ~ </li>`
`<dl> ~ </dl>`：definition listの略。定義リスト。
`<dt> ~ </dt>`：definition termの略。定義する用語。
`<dd> ~ </dd>`：definition descriptionの略。定義の説明。
`<blockquote 属性="属性値"> ~ </blockquote>`
`<pre> ~ </pre>`：ソース中のスペースや改行をそのまま表示する。
`<hr>`：区切りを示す。


##テキストの装飾と強調

####a要素：
`<a 属性="属性値"> ~ </a>`：リンクを示す。
**href属性**：リンク先のURLを指定。続けて「#」でid属性の値を指定する事でジャンプ先の位置も指定可能。
**target属性**：リンク先を表示に使用するウィンドウを指定。_blankで新しいウィンドウで表示させる事ができる。
**download属性**：指定のファイルをダウンロードするよう指示。属性値がファイル名となる。

HTML５からa要素はトランスペアレントコンテンツとなった為、親要素のコンテンツモデルを引き継ぐ事が可能になり、divやsectionを子要素に持つ事が可能になった。これによりsectionやdivを丸ごとリンクにする事が可能。

`<em> ~ </em>`
`<strong> ~ </strong>`
`<b> ~ </b>`：ボールド
`<i> ~ </i>`：イタリック
`<u> ~ </u>`：アンダーライン
`<mark> ~ </mark>`：ハイライト
`<small> ~ </small>`：細目。免責事項、警告、法的制約、著作権表示などに用いられる。
`
 ~ 
`：ストラックアウト(取り消し線)。
`<cite> ~ </cite>`
`<q 属性="属性値"> ~ </q>`
`<dfn 属性="属性値"></dfn>`：definitionの略。定義語である事を示し、title属性と属性値に定義を記述する事でマウスオーバーでポップアップさせる事が出来る。
`<abbr 属性="属性値"> ~ </abbr>`：略語や頭文字を表す。動作はdfn要素とほぼ同じ。
`<ruby> ~ </ruby>`：ルビを振る。ruby要素で囲い、rbで対象を指定、rtでふりがなの内容を指定、rpで括弧を指定、rtcで複数ルビの表示。
`<rb> ~ </rb>`
`<rt> ~ </rt>`
`<rp> ~ </rp>`
`<rtc> ~ </rtc>`
`<time 属性="属性値"> ~ </time>`
`<data 属性="属性値"> ~ </data>`
`<sub> ~ </sub>`：下付き文字。
`<sup> ~ </sup>`：上付き文字。
`<span 属性="属性値"> ~ </span>`：汎用的な範囲を示す。class属性、id属性やstyle属性を使い、CSSでのスタイル指定をする時に頻繁に使われる。インラインでスタイルを付与する事ができる。
`<br>`：改行。注意：余白を作る目的で複数回使用してはならない。
`<wbr>`：改行が可能な位置を指定。英語を折り返したい時に使われる。
`<ins 属性="属性値"> ~ </ins>`
`<del 属性="属性値"> ~ </del>`
`<bdi> ~ </bdi>`
`<bdo 属性="属性値"> ~ </bdo>`
`<var> ~ </var>`
`<samp> ~ </samp>`
`<kbd></kbd>`


##埋め込み要素

####img要素：
`<img 属性="属性値">`

- src属性(画像ファイルのURL)とalt属性(画像を置換可能な代替テキスト)は必須。
- srcset属性：ユーザーの閲覧しているディスプレイサイズに合わせて、表示する画像を切り替える事が出来る。URLの後に半角スペース、閲覧環境の条件を指定、カンマ区切りで複数のURLと条件を指定。
- usemap属性：イメージマップを利用する際にイメージマップ名を指定する。map要素にname属性にてイメージマップ名を定義する必要がある。
- ismap属性：サーバサイド・イメージマップを指定。

**クリッカブルマップ：**
クリックする箇所によってジャンプ先のページを指定した画像。
どこをクリックしたらどのページにジャンプするという情報をサーバ側に保持する方法をサーバサイド・イメージマップと呼ぶ。それに対しクライアント側で読み込むHTMLのmap要素にて指定する方法をクライアントサイド・イメージマップと呼び、主流。
`<map 属性=``"``属性値``"``>~</map>`
`<area 属性=``"``属性値``"``>`
イメージマップ参考：https://www.tagindex.com/html5/embed/map.html
 解説参考：http://www.tohoho-web.com/how2/cmap.htm

**レスポンシブ対応のimg, source切り替え：**
imgやsource要素では、srcset属性とsizes属性の合わせ技でデイスプレイ環境に合わせて異なるメディアを読み込ませる事が可能。srcset属性で属性値に画像url、幅やピクセル数を半角スペースで区切り指定。ビューポートで画像を伸縮させている場合はsizes属性にて伸縮のブレークポイントを指定する事が可能。
`<source 属性="属性値">`：各ブラウザ毎にサポートの異なる複数のメディア形式を指定する事が可能。
 `<picture> ~ </picture>`
`<figure> ~ </figure>`
`<figcaption> ~ </figcaption>`
`<iframe 属性="属性値"> ~ </iframe>`：現在のHTML文書の中に別のHTML文書を埋め込む。
`<embed 属性="属性値">`：HTML文書の中に外部アプリケーションやインタラクティブコンテンツを埋め込む。
`<audio 属性="属性値"> ~ </audio>`
`<video 属性="属性値"> ~ </video>`
`<track 属性="属性値">`：video要素やaudio要素のトラック情報(字幕、キャプション、チャプターなど)を指定する事が出来る。
`<svg 属性="属性値"> ~ </svg>`
`<object 属性="属性値"> ~ </object>`：embed要素よりも広範なリソースを埋め込む事が可能。


##テーブル

`<table 属性="属性値"> ~ </table>`：tableを作成。作成時はレイアウトは目的とした使い方をしない。レイアウトは全てCSSで。
`<tr> ~ </tr>`：table rowの略。
`<th 属性="属性値"> ~ </th>`：table header cellの略で見出しのセルを指す。
`<td 属性="属性値"> ~ </td>`：table data cellの略でセルを指す。
`<caption> ~ </caption>`：テーブルのタイトル
`<thead> ~ </thead>`：table要素のヘッダ要素の行グループを示す。
`<tbody> ~ </tbody>`：table要素のボディ要素の行グループを示す。
`<tfoot> ~ </tfoot>`：table要素のフッタ要素の行グループを示す。
thead, tbody, tfootはtable要素の子要素として記述。組み合わせる事でテーブル構造を明確にする
`<colgroup 属性="属性値"> ~ </colgroup>`：
`<col 属性="属性値">`


##☆フォーム

###フォーム要素：
`<form 属性="属性値"> ~ </form>`：入力・送信フォームを作成する。APIとの連携において最重要な要素。
**action**：データ送信先のURLを指定。空欄の場合、現在のURLが送信先になる。
**method**：get, postのメソッドを指定。postではデータをボディに収めて送信する、大きなデータの送信に向いている。
**name**：フォームの名前を指定。
**target**：データ送信後の画面の動作を指定。ex. _blankで新しいウィンドウで開く。
**autocomplete**：on, offを選択。初期値はon。

###input要素：
★`<input 属性="属性値">`★

**type属性：**
`<input type="text">`：１行の入力欄
`<input type="hidden">`：表示せずに値だけをサーバーに送信する
`<input type="search">`：検索文字列の入力欄
`<input type="tel">`
`<input type="url">`
`<input type="email">`
`<input type="password">`：パスワード用の入力欄。
`<input type="date">`
`<input type="month">`
`<input type="week">`
`<input type="time">`
`<input type="datetime-local">`
`<input type="number">`
`<input type="range">`：大まかな数値レンジの入力欄。
`<input type="color">`
`<input type="checkbox">`：チェックボックス。
`<input type="radio">`：ラジオボタン
`<input type="file">`：ファイルを送信する為に選択。
`<input type="submit">`：フォームの送信ボタン
`<input type="image">`：画像の送信ボタンを作成する。src, alt属性が必須。
`<input type="reset">`：リセットボタン。
`<input type="button">`：送信ボタン

**その他属性：**
**autofocus**：ページ読み込み時にこの属性を持つフォーム要素にフォーカスを移動させる。HTML内に１つの要素しか持てない。
**capture**：type属性がfileの場合に、ユーザー環境からメディアを直接取り込む事が出来る。
**checked**：このフォーム要素を選択された状態にする。
**disabled**：このフォーム要素を無効の状態にする。
**multiple**：複数の値の入力を可能にする。
**name**：データと共に付与された名前を送信する。
**placeholder**：薄く初期値を指定。入力例などに用いられる。
**required**：このフォーム要素を必須項目にする。
**spellcheck**：属性値をtrueにすると、スペル・文法チェックを有効にする。
**value**：初期値を設定。hiddenなどと合わせて使われる。type属性がbuttonやsubmitの場合、ボタン名になる。

`<button 属性="属性値"> ~ </button>`：この要素を使用する事でテキストや画像をボタンとして使う事が可能。またtype属性の初期値がsubmitとなるので、フォームのmethodに従ったフォームデータ送信を行う。
`<textarea 属性="属性値"> ~ </textarea>`：複数行のテキスト入力欄。cols, rows, wrapなどの属性が付与できる。
プルダウン関連の要素：
`<select 属性="属性値"> ~ </select>`：プルダウンメニューの作成。子要素にoption要素を持つ事でプルダウンメニューの選択肢を表示する。
`<option 属性="属性値"> ~ </option>`
`<optgroup 属性="属性値"> ~ </optgroup>`：上記のoption要素の選択肢をグループ分けしてプルダウンメニューに表示させる。
`<datalist> ~ </datalist>`
その他：
`<label 属性="属性値"> ~ </label>`：各フォーム関連要素の項目名を表示。for属性にてターゲットの項目のidを指定する事で、項目とラベルを関連付けさせる。
`<output 属性="属性値"> ~ </output>`
`<fieldset 属性="属性値"> ~ </fieldset>`：入力項目をグループ化する。
`<legend> ~ </legend>`：fieldset要素の見出しを作成する。

**form要素外でも利用可能な要素：**
`<progress 属性="属性値"> ~ </progress>`：プログレスバーを表示。value属性(現在の数値)、max属性を付与。
`<meter 属性="属性値"> ~ </meter>`：下限、上限が決まっている特定範囲の測定値を表す。value(必須)、min, max, low, high, optimum(適正値の意)の属性を付与し下記の様な表示を実現。

![](https://paper-attachments.dropbox.com/s_8AAD80A74752BD65E7B939F3809B0955C83FA261AC5CD0493A15E589D1595FE2_1557986827896_+2019-05-16+15.06.56.png)



##インタラクティブ要素

`<details 属性="属性値"> ~ </details>`
`<summary> ~ </summary>`
`<dialog 属性="属性値">`


##スクリプト

`<script 属性="属性値"> ~ </script>`：JavaScriptなどクライアントサイドのスクリプトを埋め込む要素。
**src属性**：外部スクリプトを読み込む際に、ファイルのURLを指定。
**async属性**：読み込みスクリプトを可能であれば非同期に実行する。src属性が必須。
**defer属性**：文書の読み込みが完了した時点で、そのスクリプトを実行する。src属性が必須。
`<noscript> ~ </noscript>`
`<template> ~ </template>`：スクリプトによって挿入・複製が可能なHTMLのパーツ。ページ読み込み時には表示されない。
`<canvas 属性="属性値"> ~ </canvas>`