html 基礎・基本 html5編 #4

また、今日もhtmlの勉強のノートをまとめていきたいと思います。
前回までに勉強した内容に似た内容が出てくるところもあります。
気楽に見ていただきあると助かります。

##DOCTYPE宣言
ブラウザに対してhtmlのバージョンを明示するためのものです。

今回学習するHTML5は最新使用でhtmlの新バージョンです。
また、今までのhtmlよりwebをよりくーつにできるようになりました。

##外部スクリプトの読み込み
html5からはtype属性の省略が可能になりました。
`<script src="main.js" type=""> </script>`
上記に書いたものが、省略される前で、
`<script src="main.js"> </script>`
このように省略可能です。

##外部スタイルシートの読み込み
外部のスタイルシート読み込みでも、type属性の初期値は省略可能になりました。
`<link href="style.css" rel="stylesheet" />

##ヘッダーを表現！
私たちには文を意味を持たせて分けることができます。
ヘッダーの部分に、ナビゲーションやロゴ、サイト検索などを付けることができます。このように、その要素、要素に分けたいですが機械的には認識してくれないので、html5では`<header> </header>`を使います。

##ナビゲーションメニューの作成
ナビゲーションメニューを作る際は`<nav> /<nav>`を使います。
ナビゲーションメニューはサイト内の他の場所に移動するようリンクが使われます。

##フッターを表現！
html5でフッターを表現するためには`<footer> </footer>`を利用する。また、フッターは関連ドキュメントのリンクや著作権情報などが描かれます。

##メインを表現する！
コンテンツでメインの場所を表現するには`<main> </main>`を利用する。注意すべき点があります。
`main`は複数定義することができません
また、`header`,`footer,`nav`などの子要素にすることができません。

##記事のグループを作成！
記事にグループを持たせるには、`<section> </section>`を使いまする。これを使うことで意味的にグループ化することができます。
また、記事の内容が単独で意味を成すものである場合は`article`タグのほうが適しています。

##記事を表現！
`<article> </article>`
先ほども書いたように、単独で自己完結するコンテンツの場合を表現する際に使います。例としては、ブログの記事やコメントなどです。
また、ブログなどで時間などを表記する記事があると思います。
その時は、`article`内で`time`タグを使って`datetime`属性で表現可能です。
`<article> <time daretime="2020-4-28">2020/04/28</time>`

##メインと関連性の低い要素の表現方法
広告や著者のプロフィール、関連リンクなどメインコンテンツと関連性の低いものを表現する際に`<aside> </aside>`タグを利用します。

##ハイライトを付ける！
参照目的などで文字をハイライトする際に利用するのが`<mart> </mark>`タグです。
ハイライトはユーザーが直接的に関係のある文字に使います。

##説明を表示させる！
略語の説明を追加する際などに`<abbr> </abbr>`タグを使います。
マウスカーソルを選択した文字の上に数秒間置くことで説明が出てきます。
`<abbr title="look">rg</abbr>`

##文字にフリガナを振る！
文字にフリガナを振る際はまず最初に、文字全体を`<ruby> </ruby>`タグで囲います。そして、フリガナを`<rt></rt>`タグで囲います。
`ruby`をサポートしてないブラウザのために`rp`があります
これは、ブラウザにフリガナの存在を示すために利用します。
`<ruby> 既視感<rp>(</rp><rt>きしかん</rt><rp>)</rp>`
<ruby> 既視感<rp>(</rp><rt>きしかん</rt><rp>)</rp>、このようにフリガナを付けることができます。

##日時を表現する！
先ほど`article`時に使った、`time`と`datetime`を使います。これを使うことで機械に日付を認識させて使うことができます。細かく二つのタグの説明をします。
- `time`は、機械に読める形で日付や時間を提供するために利用する。
- `datetime`は、属性でこの中に日時を設定します。また、日時はISO8601形式の書式が必要です。
時刻だけを扱う場合には、`datetime`属性を使う必要はない。

##図形を表現する！
図表を表現する際には、`<figure> </figure>`タグを利用します。
また、図表に説明を付ける際には`<figcaption> </figcaption>`を使います。`figcaption`は`figure`タグの子要素としなければなりません。
`<figure> <img src="" alt=""><figcaption>図！</figcaption>`

##数値を入力させよ！
入力する値にルールを持たせて入力させてみる！
- 範囲を0-50
- 5刻みで増えていく！
入力フォームを作るには`input`タグを利用して`type`属性には`number`を使います。
- min:最小
- max:最大
- step:数値の増加量
`<input type="number" min="0" max="50" step="5">`

##メールアドレスを入力してもらう。
メールアドレス入力フォームを作るには、`input`タグを使って`type`属性に`email`を設定する。
`<input type="email">`

##電話番号の入力！
次は電話番号になりますが先の二つと同様に`input`タグと`type`属性を使います。今回は`tel`を属性に設定します。
`<input type="tel">

##日付と時間の入力！
ここも先と同じです。
日付なら`date`を属性に設定。
時刻なら`time`を属性に設定。

##進歩状況を表現！
進歩状況を表現したいとき`progress`タグを使います。
また、このタグは属性として`max`と`value`を設定できます。
`<progress value="10" max="50"></progress>`

##範囲内の値を表現！
テスト値
- 値
- 値の範囲
- 値が10以下は低い　20以上は高い
こんな時には`master`タグを使う。
属性としては`value`,`max`,`min`,`low`,`high`がある。
テスト値同様にやると、
`<meter value="15" max="30" min="0" low="10" high="20"></meter>`
このタグは、範囲が明確な場合に使用可能で範囲があいまいな時は使わないほうが良いです。

##動画を埋め込む！
動画を埋め込む際には`<video> </video>`を使う。
また、再生コントロールを表示させるためには`controls`属性を設定する。
また、複数のビデオコーディックに対応するために`source`タグを使ってurlを指定する。
`<video width="300" height="120" controls>
   <source src="url" type="video/mp4"> </video>`

##動画読み込み中の画像を設定！
読み込み中のの画像を設定するには`poster`属性に画像のurlデータを指定する。
`<video width="" height="" controls poster="">`

##動画を自動再生！
動画を自動再生するためには`video`タグに`autoplay`属性をつける。
`<video width="" heifht="" controls autoplay poster="">`

##音楽を埋め込む！
音楽を埋め込むときは`audio`タグを使います
また、コントロールには`controls`属性をしたいします。
`video`タグ同様に複数のオーディオコーディックに対応するために`source`タグを使う。
`<audio contorols> <source src="" type="" > </audio>`

---
今回はここまでで終わりにします。
わからないところなどあれば是非質問お願いします。