＜初心者向け＞知っておきたいHTML5の基本【新要素編】
前回の記事 ＜初心者向け＞知っておきたいHTML5の基本【文書構造編】では、HTML5の特徴や主な文章構造の変更点をご紹介しましたが、HTML5から新規で追加された要素があり、どのように使用したらいいのかわからない方もいらっしゃると思います。
そこで今回は、最近正式に勧告されたHTML 5.1についても触れながら、新要素の使用方法や役割等を簡潔に説明いたします。
文書構造に関連する要素
section要素
章や節等、文章のまとまりを示す際に使用します。Section要素内には最低1つの見出し要素（h1～h6）を入れることが推奨されています。1ページに複数使用が可能です。
article要素
ブログやニュースの記事等、その部分の内容だけを取り出しても独立したコンテンツとして成り立つ部分に使用します。
aside要素
余談や補足情報を示す際に使用します。バナーエリアや広告部分に使用されることが多いです。
header要素
サイトの上部のロゴやナビゲーション等がある部分に使用します。header要素の中には見出し要素（h1～h6）を入れることを想定されていますが、必須ではありません。
nav要素
グローバルナビゲーションやローカルナビゲーション等、ナビゲーションを示す際に使用します。1ページに複数使用が可能です。
footer要素
footer要素は、関連情報へのリンク・著者情報・著作権表記を入れて使用します。必ずしもソースの一番下にしようしなくてはいけないという決まりはありません。複数使用も可能ですが、footer要素の中にfooter要素やheader要素を入れることはできません。
言語の表示に関連する要素
mark要素
文書内のテキストで目立たせたい部分に使用します。strong要素やem要素のように強調することが目的ではなく、視覚的に参照しやすいように目立たせることを目的としています。
bdi要素
左から読まれる日本語や英語の文章の中に、右から読まれるアラビア語やヘブライ語などを混在させた際に、正しく文章が表示されない場合があります。それを防ぐ為に、アラビア語やヘブライ語をbdi要素で囲みます。
<p>アラビア語<bdi>مرحبًا بالعالم!</bdi> </p>
ruby・rt ・rp 要素
ルビをふる際に使用します。対象のテキストをまとめてruby要素で囲み、文字の発音を示すテキスト（ルビテキスト）をrt要素で囲みます。rpはルビテキストを囲んでいる括弧等を囲みます。
<ruby>
漢 <rp>(</rp><rt>かん</rt><rp>)</rp>
字 <rp>(</rp><rt>じ</rt><rp>)</rp>
</ruby>time要素
日付や時刻を表します。24時間表記やグレゴリオ暦による正確な日付で記述をします。
<time>13:05</time>datetime属性で日時を指定した場合、time要素内に日時以外のものを記述することが可能です。
<time datetime="2011-12-03">今日</time>wbr要素
改行してもよい位置を示す際に使用します。例えば英文で長い単語が折り返らずにボックスの外にはみ出てしまうことがあります。その場合にwbr要素を改行させたい位置に入れると、ボックスに収まりきらない単語はwbr要素の部分で折り返させることができます。日本語では一文字ごとに折り返るのでwbr要素を使用することは少ないかもしれません。
画像に関連する要素
figure要素
文章から参照される写真や図を示す際に使用します。写真や図に注釈をつける場合は、figcaption要素を使用します。
figcaption要素
図のキャプションを表す際に使用します。figcaption要素はfigure要素内のみに1つだけ配置することが可能です。
formに関連する要素
output要素
javascriptで計算した結果を表示させる際に使用します。
datalist要素
フォームの入力欄等で入力候補を表示させる際に使用します。例えば、Google等の検索エンジンで検索ボックスに文字を入力するとキーワードの候補が表示される機能です。
動画や音声に関連する要素
audio要素
MP3やogg等、音声を再生させる際に使用します。src属性でファイルのパスを指定し、loop属性やautoplay属性等で、ループ再生や自動再生の有無を設定することが可能です。
video要素
動画ファイルを表示させる際に使用します。loop属性やmuted属性等で動画をループさせたり、消音に設定することができます。
track要素
video要素（動画）やaudio要素（音声）の子要素として使用します。動画や音声ファイルに字幕などのテキストトラック（WebVTTファイル） を読み込み表示させます。
source 要素
video要素（動画）やaudio要素（音声）に対し、複数の拡張子のファイルを指定する際に使用します。ユーザーの閲覧環境にあわせて再生できるファイルが選択されます。
embed要素
Flash等のアプリケーションやコンテンツを埋め込む際に使用します。
Webアプリケーションに関連する要素
canvas要素
ブラウザ上にグラフィックを描画する際に使用します。
progress要素
進捗状況 を表示される際に使用します。
meter要素
数量や割合を表示させる際に使用します。
HTML5.1 について
2016年11月1日にHTML 5.1が正式に勧告されました。
W3Cのサイトでは「HTML」と「5.1」の間スペースを入れていますので、「HTML 5.1」が正式な表記となるようです。
HTML5からの変更点ですが、主に新要素の追加や、階層構造の仕様変更があります。
全体的に大幅に変更されたものはありませんので、今までのHTML5コーディングを書き直さないといけないということはありません。
詳しくは下記W3Cのサイトをご覧ください。
HTML 5.1では「picture」「details」「summary」「menu」「menuitem」という要素が新しく追加されています。
さいごに
今回は、HTML5で新しく追加された要素をご紹介いたしました。
要素が数多くありますが、コンテンツの内容に合わせて適した要素を使用してみてください。
既にHTML 5.2も発表されており、W3Cのサイトによれば2017年後半に勧告を予定されているそうです。
予想以上のスピードで新しい技術や仕様が発表されています。私たちWeb制作者は、常日頃このような動向を追っていく努力が必要だと思います。
この記事を書いた人
- 創造性を最大限に発揮するとともに、インターネットに代表されるITを活用し、みんなの生活が便利で、豊かで、楽しいものになるようなサービスやコンテンツを考え、創り出し提供しています。
この執筆者の最新記事
関連記事
最新記事
FOLLOW US
最新の情報をお届けします
- facebookでフォロー
- Twitterでフォロー
- Feedlyでフォロー