html5資格試験に役立つまとめ <html5で追加された要素>

HTML5プロフェッショナル認定資格 レベル1に挑戦するにあたって勉強した内容についてまとめたいと思います

セクション

ポイント

• セクションがなくても見出しがあれば、暗黙的にセクションが作られる
• セクションと暗黙的なセッションによってアウトライン(文書内のセクションとその階層構造が一目でわかるようにしたもの)がみれる

セクショニングルート

• 要素内のアウトラインが独立したものとなっている
• 内容として含んでいるセクションや見出しが外部のアウトラインに一切影響を与えない種類の要素
• 5つある
  • body要素
  • blockquote要素
  • fieldset要素
  • figure要素
  • td要素

セクションの種類

section要素

• 一般的なセクション
• 以下の3つのセクション以外の時に使う

article要素

• 新聞・雑誌・ブログなどの記事を始めとする、「それだけで全部の/それだけで完結している」セクション
• 単独で配布・再利用が可能なコンテンツ

aside要素

• aside要素はその内容が前後の内容とほぼ関係なく、それらと分離されたものであると考えられるセクション
• 例：広告・プルクォート、補足記事など

nav要素

• そのページにおけるナビゲーションリンクを含むセクション

例

<nav>
    <ul>
        <li><a href="#">ホーム</a></li>
        <li><a href="#">メニュー１</a></li>
        <li><a href="#">メニュー２</a></li>
        <li><a href="#">メニュー３</a></li>
    </ul>
</nav>

構造を表す要素

heder要素

• セクションまたはセクショニングルートのヘッダー
• 通常見出しを含む(必須ではない)
• 内容例：見出し、ナビゲーション、ロゴ、検索フォーム、目次
• header, footer, main要素は含むことはできない

footer要素

• セクションまたはセクショニングルートのフッター
• 内容例：著作権情報、問い合わせ先(address要素)、関連文書へのリンク(前・次ページなど)、執筆者
• セクションの前と後ろどちらに配置してもいい

main要素

• ページ全体におけるメインコンテンツ
• 内容例:そのページ特有のコンテンツのみを入れる
• サイト内の複数ページで共通しているナビゲーションやロゴ、検索フォーム、著作権情報などのコンテンツは含めない
• 以下の要素の中には含められない
  • article要素
  • aside要素
  • nav要素
  • header要素
  • footer要素

テキスト

mark要素

• オリジナルの文章はそうなっていないが、参照してもらいやすいように目立たせた部分

data要素

• 人が読み取り可能な要素内容と共に、機械が読み取り可能なデータも提供
• 機械が読み取り可能なデータは必須属性であるvalue属性の値として指定

time要素

• data要素ん中でも日時での使用に特化させた要素
• valueではなくdatetime属性を使用する
• data要素のvalueとは異なり、datetime属性は必須ではない(あらかじめ機械読み取り可能な形式にする必要がある)

wbr要素

• 英単語やURLの途中でも行を折り返すことができる要素

dbi要素

• 特定の範囲のテキストを意図的に分離独立させる
• unicodeの双方向アルゴリズムの影響を受けないようにする
• ユーザーが自由に入力できるテキストをページ内のコンテンツの一部とするような部分で使用される

ルビ

ruby要素

• rubyとはルビ(ふりがな)のこと
• ルビを振りたい漢字を〜で囲む

例

<ruby>勉強<rt>べんきょう</rt></ruby>

rt要素

• ruby text の略
• ルビとして小さい文字で表示させるテキスト（ふりがな）

rb要素

• bは base text
• その内容がルビを振る対象となるテキスト(ルビを振る漢字部分)

rp要素

• p は parentheses(パーレーン=丸括弧)
• ルビに未対応のブラウザなどでルビが普通サイズのテキスト担ってしまう時にそれらを()で囲って表示

rtc要素

• ruby text container (rt要素の入れ物)
• rt要素をグループ化する時に使う

ルール

• 以下のものは終了タグを省略できる
  • rt要素
  • rb要素
  • rp要素
  • rtc要素
• 漢字のテキスト or rb 要素は1つ以上いれる
• rt要素またはrtc要素を1つ以上いれる

動画・音声

ポイント

• video要素とaudio要素の違いは動画や字幕を再生する領域があるかないかのみ
• 別形式の代替データを指定するにはSource要素のみを使用する

video要素

• 動画を再生
• video要素にしかない属性
  • poster: 動画が再生可能となるまでの間に表示させる画像のアドレス
  • width: 幅
  • height: 高さ

audio要素

• 音声を再生

source要素

• 代替データとして異なる形式のデータも合わせて指定しておきたい場合
• これを使用するときはvideo, audio要素のsrc属性には指定できない
• video, audio要素の先頭に配置する必要がある

例

<video>
    <source src='sample.ogv' type='video/ogg'>
　　　　　　　　・・・・
</video>

track要素

• videoやaudio要素での再生時に同期させる外部のテキストトラック
• 空要素
• source要素よりも後、その他の要素より前に配置する必要がある
• kind属性: テキストトラックの種類
  • subtitles: 音は聞こえるが理解できない場合(洋画の日本語字幕など)
    • 映像に重ねて表示
  • captions: 音が聞こえない場合
    • 映像に重ねて表示
  • descriptions: 映像が見えない場合
    • 合成音声で読み上げる
  • chapters: 映画のチャプタータイトル
    • 移動可能なチャプターの一覧としてユーザーに提示
  • metadatas: スクリプトから利用することを想定したメタデータ
    • 表示されない

embed要素

• プラグインを使用する外部のコンテンツを組み込む際に使用される要素
• 空要素

フォーム

meter要素

• メーター
• 特定の範囲内での位置を示す

progress要素

• タスク(コンピュータが行っている作業)の進み具合を表す

datalist要素

• input要素にサジェスト機能を追加する(入力候補の選択肢を与える)要素
• option要素が選択肢
• 関連付け
  • datalistのid属性の値をinput属性のlist属性に指定
• やり方は2つ
  • 1: datalistの中にそのままoption要素を入れて選択肢にする
  • 2: (datalist未対応ブラウザ用に)select要素をいれてその中のoptionを選択肢に使用
    • →これで対応ブラウザでは表示されずにoption要素だけが入力候補として使用される

1つめ

<p>
    <label>
        選択肢：
        <input type="text" name="a" list="samples">
        <datalist id="samples">
            <option value="sample1">
            <option value="sample2">
        </datalist>
    </label>
</p>

2つめ

<p>
    <label>
        選択肢：
        <input type="text" name="a1" list="samples">
    </label>
    <datalist id="samples">
        <br>
        <label>
        ※上の入力欄に入力するか、次のメニューから選択してください：
        <br>
        <select name="a2">
            <option value="">未選択</option>
            <option>sample1</option>
            <option>sample2</option>
            ・・・・
        </select>
        </label>
    </datalist>
</p>

output要素

• 計算結果やユーザーの操作による結果を示すための要素
• 属性
  • for: 計算の元となったフォームの部品
  • name: フォームの部品
  • form: フォームの部品を特定のform要素(id属性の値で指定)と関連づける

例

<form>
    <input name="a" type="number"> +
    <input name="b" type="number"> =
    <output for="a b" name="sum"></output>
</form>

keygen要素

• 公開鍵暗号における公開鍵・秘密鍵のペアを生成するフォーム部品
• 送信すると秘密鍵はローカルに保存、公開鍵はサーバーに送られる

その他

figure要素

• メインコンテンツの本文から参照される図版
• それ自身がまとまったひとつの完結した内容となっているFlow content(一般コンテンツ)
• 例：図表、写真、イラスト、ソースコードの一部

figcaption要素

• 図版のキャプションや説明文部分
• figure要素の一番前 or 一番後ろにしか配置できない

template要素

• その範囲がスクリプトによって生成(複製・挿入)される部分であることを示す

canvas要素

• スクリプトによって描画するビットマップの動的なグラフィックとなる要素
• デフォルトで width:300 height:150