ナビゲーションメニューを表現する_nav
<nav>ナビゲーションメニュー</nav>
HTML5で導入されたセクショニング要素の1つ。
ウェブページ上のナビゲーションリンクや、他のページへのリンクを含むセクションを示すために使用される。例としては、サイトのメインメニュー（グローバルナビゲーション）やブログ記事の目次など。
主要なナビゲーションリンクで構成されているブロックを「nav」とするのが良いとされている。
なお、フッターにはフッター用のタグ「footer」が存在する。
フッターを表現する_footer
<footer>フッター</footer>
メインコンテンツを表現する_main
<main>メインコンテンツ</main>
そのサイトのもっとも主要なコンテンツを含める。
複数定義することができず、また「header」「footer」「nav」「aside」「article」の子要素にすることができないという制限がある。
記事のグループを表現する_section
<section>記事</section>
記事グループとは、ここでは複数の記事を纏める大きなグループを指す。
sectionの内容が単独で意味をなす場合は、articleタグの方が適している。
sectionタグをスタイリングのための汎用的なコンテナのように扱うべきではなく、意味を持たないブロック要素が必要な場合は<div>タグを利用するべき。
参照文字のハイライト_mark
<mark>文字</mark>
markタグのハイライトは、検索結果の中で検索文字をハイライトするなど、ユーザーの操作になにか直接的に関係がある文字をハイライトするために利用する。
- 単に文字を強調したい場合は<strong>を用いること。
説明文の追加_abbr
<abbr title="説明文">単語</abbr>
アブリビエーション、アバー、エービービーアールなどと読む。マウスカーソルを合わせたとき、説明が表示される。
title属性に説明文を書く。
ルビを振る_ruby
<ruby> 個人的<rp>(</rp><rt>こじんてき</rt><rp>)</rp> </ruby>
rpタグは、rubyをサポートしないブラウザ向けの設定。
- <ruby>～</ruby>内でルビをふる対象となる文字を<rb>～</rb>、ルビの内容となるテキストを<rt>、ルビの内容を囲む記号を<rp>で指定する。
rubyをサポートしないブラウザの場合、rpを設定しておく。
<ruby> <rb>個人的</rb> <rp>(</rp> <rt>こじんてき</rt> <rp>)</rp> </ruby>
機械向けに日時を指定_time
<time datetime="年-月-日">年月日</time>
日時はISO8601形式の書式が有効。
時刻だけを扱う場合
<time>10:00</time>
datetimeは不要になる。
図表
図表を表現する_figure
<figure>イメージソース</figure>
メインコンテンツなどから参考文献として参照される図表を含める。
図表の説明を表現する_figcaption
<figcaption>説明</figcaption>
figcaptionタグは、figureタグの子要素になる。
フォーム_input
数値入力フォームを作る_number
<input type="number" min="最小値" max="最大値" step="増加量">
メール入力フォームを作る_email
<input type="email">
電話番号入力フォームを作る_tel
<input type="tel">
日付、時刻を入力するフォームを作る_date
<input type="date> <unot type="time">
日付ならdate、時間ならtime、月ならmonth、週ならweekをtype属性に設定する。
ゲージ
進捗状況を表現する_progress
<progress value="進捗状況" max="総作業量"></progress>
横向きのゲージが表示される。
特定の範囲内の値を表現する_meter
<meter value="現在の値" min="最小値" max="最大値" low="低いと判定される値の上限" high="高いと判定される値の下限"></meter>
meterタグは、テストの点数や選挙の得票数など、範囲が明確な場合に利用可能。気温や降水量など、範囲が曖昧な場合に利用するべきではない。
動画
動画を再生する_video
<video width="幅" height="高さ" controls> <source="URL.拡張子" type="video/拡張子"> </video>
sourceタグは、複数のビデオコーディックに対応するために必要。ブラウザの処理を軽減するためにsourceタグのtype属性は必須となる。
動画の埋め込みのためにvideoタグを使用し、再生ボタンなどのコントロール類を表示するためにcontrols属性を設定する。
読み込み中の画像を設定する_poster
<video poster="URL.png">
poster属性は、動画が利用不可能な場合に代替え画像を表示するためのもの。その機能を利用して「読み込み中」画像を表示させることができる。
自動再生させる_autoplay
<video autoplay>
音声を再生する_audio
<audio controls> <source src="URL.拡張子" type="audio/拡張子"> </audio>
動画、音声メモ
videoやaudioタグでは複数のsourceを指定でき、その中からブラウザが対応している1つを選択して再生する、という仕様になっている。
古いブラウザにも対応しなければならないような場合に、複数のソースを記述する。