【学習メモ】改めてHTML5を勉強してみて知らなかったこと@codecademy

まとまりのない雑な殴り書きですが、ご容赦ください！
セマンティックなHTMLはちゃんと理解したいですね！

• メタデータの<title>タグの文字は64文字まで
• ul(ol)タグの直下に入れることができるのはliタグのみで、リストをリンクにしたい時はliのなかでリンクを貼る。

liのリンク

<ul>
  <li><a>link</a></li>
  <li><a>link</a></li>
  <li><a>link</a></li>
</ul>

• aタグには基本的に(ブロックを入れても反映はされるがセマンティックではないので)インラインのみいれる。

img

x
<a href="example.com"><div></div></a>
◯
<div><a href="example.com"></a></div>

• W3School的にはスペース2個のインデントが良いらしい。ただ、スペースかタブかの論争があり、ソフトタブ(tabで２つのスペースを入力)が一番平和でいい解決策かも。

• tableタグは以下のように記述するとx軸y軸のような表になる。

総当たり戦に使われそうなtable

<table>
  <tr>
    <th></th>
    <th>heading</th>
    <th>heading</th>
  </tr>
  <tr>
    <th>heading</th>
    <td>data</td>
    <td>data</td>
  </tr>
</table>

• tableタグにはテーブルのタイトルを表すtheadタグと、テーブルのフッターを表すtfootタグがあり、それぞれ普通のtrタグで代用できるが、theadとtfootの方がセマンティック。

type="range"要素

値をスライドで選択するformのinputのパーツの１つ。

rangeの書き方

<form>
  <label for="doneness">肉の焼き加減は？</label>
  <br>
  <span>レア</span>
  <input id="doneness" value="2" type="range" min="0" max="5" step="0.5">
  <span>ウェルダン</span>
</form>

↓こんな感じになる↓

<datalist>タグ

<select>にに似てるけど違うところとして、ユーザーはテキストエリアに入力して選択肢の中から選ぶこともできるし、自分の選択肢を送信することもできる。
セレクトボックスの選択肢が多い場合にも、ユーザーの助けになる。

datalistの書き方

<form>
<label for="souce">ソースの種類は？</label>
<input id="souce" list="souces" type="text" name="souce">
<datalist id="souces">
  <option value="ketchup"></option>
  <option value="mayo"></option>
  <option value="mustard"></option>
</datalist>
</form>

↓予測変換みたいになるし、例えばこれに「BBQ」って入力して送信もできる。↓

HTML5での正規表現でのバリデーション

pattern属性をinputに追加することで可能。

正規表現でのバリデーション

<input type="text" perttern="[a-zA-Z0-9]{4,15}" required>

↑のコードで「英数字4文字以上15文字以下」の意味になる(半角も全角も1文字カウント)。

HTML5のバリデーションのエラーメッセージのカスタマイズ

↓古い記事(2012)だけど参考にして↓
HTML5 Form Validation のカスタマイズ – GirlieMac! Blog

セマンティックHTML

「どこにどんなセマンティックなタグをつけるかは自由だ」、ということを前提にセマンティックなHTMLを書こう。

• <header>

• <nav>

• <main>

  • nav、footerタグと分けられるタグ（つまりnavとfooterはmainの中に入れてはならない）。

• <footer> : ↓以下の情報を扱う。

  • Contact information
  • Copyright information
  • Terms of use
  • Site Map (navでも扱うことができる)
  • Reference to top of page links

• <section>

  • 章区切り
  • 見出し区切り
  • 同じテーマ区切り

• <article>

  • １つで独立して成り立つ塊(記事、コメント、ブログ、etc.)

  ↑<section>と<article>は文脈によって、お互いに子になったり親になったりできる。

• <aside> : <article>や<section>の後に設置して、意味を強めるためにも使われるタグ。あってもなくてもいいコンテントを含む。

  • Bibliographies : 参考文献
  • Endnotes : 注釈
  • Comments
  • Pull quotes : 引用符
  • Editorial sidebars : いわゆるサイドバー
  • Additional information : 付加情報

• <figure>

• <figcaption> : の中での

  の立ち位置みたいな認識(間違ってたら教えてください)
  <figure> について（やや堅苦しく）考える - Qiita

• <audio> : 音楽ファイルを再生する。

  • 基本的に<video>タグと同じように使える。

audioタグの使い方①

<audio 
    controls 
    src="/media/examples/t-rex-roar.mp3">Your browser does not support the 
    audio element.
</audio>

ただ、ブラウザごとに対応しているファイル形式が違う場合があるので<source>タグを使っていくつかのファイル形式を定義しておくとセマンティックになる(全てのブラウザが同じファイルタイプをサポートしているわけではない)。
※↑これは<video>タグにも言えること❗️

audioタグの使い方②

<audio controls>
  <source src="myAudio.mp3" type="audio/mpeg">
  <source src="myAudio.ogg" type="audio/ogg">
  <p>Your browser doesn't support HTML5 audio. Here is
     a <a href="myAudio.mp4">link to the audio</a> instead.</p>
</audio>

※↓<audio>でも<video>でも使える属性
- controls : 再生/停止や全画面表示などの基本的な操作を行うパーツが追加される
- autoplay : ページがロードされるとすぐに再生される
- loop : リピート再生する

embed : ⚠️古い書き方。<video>、<audio>、<img>を総括するタグだが非推奨(flashビデオやGIFには使う場面が多そう)⚠️

embedの使い方

<embed src="download.gif"/>

まとめ