楽ブログ

楽に楽しくやるブログ

スポンサーリンク(レスポンシブ)横長

スポンサーリンク

HTML5とは何か?から始める入門のための主な新タグ14選解説

2016/11/27

HTML5

HTML5とは何か?

「HTML5」とは、WEBページを記述するための言語「HTML(Hyper Text Markup Language)」のVersion5の略称です。

では「HTML」とは何かというと、WEBページに記述された文章などがどんな意味を持っているのかを“タグ”で囲んで指定するためのマークアップ言語です。

マークアップというのは、つまり文章の一部を丸で囲って脇に説明を書くように、その部分が何を表しているのかを示したりすることで、例えば

今日は<料理名>ハンバーグ</料理名>を食べた。

という記述は、この文章内で「ハンバーグ」が「料理名」であることを<料理名></料理名>というタグによるマークアップで示しているわけです。

ここで重要な点は、このHTMLは文章を読む人ではなく、WEBページを表示するブラウザのために書かれるものだということです。

そのためHTMLのタグは、WEBページをブラウザで見たときには表示されません。

HTML5ドキュメントの基本形

HTML5ドキュメントの基本の形は以下のようになります。

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>ページタイトル</title>
    </head>
 
    <body>
        <h1>見出し</h1>
        <p>本文</p>
    </body>
</html>

1行目の「doctype」は、以下のソースがHTML5であることを表していて、このタグはドキュメントの必ず先頭に記述し、対になる閉じタグはありません。

その次の「head」タグで囲まれたヘッドは、ドキュメントをブラウザで正しく表示するための情報が記述されていて、実際にWEBページに表示される内容は含まれません。

ヘッドの中にある「meta charset」は、メタタグと呼ばれる記述の1つで、ここではドキュメントの文字コードを指定しています。

「title」タグで囲まれた部分は、WEBページをお気に入りに登録するときなどに使われるタイトルが記述されています。

そして「body」タグで囲まれた部分に、実際にWEBページに表示される内容が書かれます。

HTML5で新しく追加になったタグ

ここでは、HTML5で新しく追加になったタグで、以下の主な14のタグについて説明することにします。

<article>タグ・<section>タグ

文章のまとまりを表す段落をHTMLでは<p>タグで表しますが、HTML5ではこの段落をまとめた概念である<article>と<section>が加わりました。

<p>をまとめたものが<section>、<section>をまとめたものが<article>になります。

ブログなどでは1記事が1つの話題を持つことが多いので、1つの記事が1つの<article>になり、<section>を持つことはほとんど無いでしょう。

なお、<article>と<section>は必ず記述しなければならないものではありません。

<aside>タグ

ドキュメントによっては、<article>の話題とは別に「補足」としての文章を付け足したいことがありますが、そのようなときに<aside>タグを使用します。

例えば<body>直下に<article>と並んで記述された<aside>は、本文の内容とはまったく別の内容であることを示しています。

またWEBページ全体の中では、<article>に比べて<aside>のほうが内容的に優先順位が低くなることが予想されます。

<nav>タグ

<nav>タグは、いくつかのリンクをひとまとめにしたリンクナビゲーション部分を記述する際に使用します。

例えば文章内で他のページへのリンクの一覧を記載したり、または文章内への目次のリンクを作成するときに、この<nav>タグで囲みます。

ちなみにHTML5では文章全体をセクションで分けるという考え方を取り入れ、ここまでの<article>と<section>と<aside>と<nav>のタグで囲む部分は、「セクショニング・コンテンツ」と呼ばれます。

それぞれのセクションは、ある程度の独立性があり、例えばそれぞれの中に<h1>タグを記述しても間違いにはなりません。

<header>タグ

文章の概要や前書きを記述したヘッダー部分を指定する場合に<header>タグで指定できますが、これは前述の<head>タグとは無関係のものです。

<header>タグは<body>タグの直下はもちろん、文章内のそれぞれのセクションの中でも指定できますが、セクションごとに<header>タグを付けるのはあまり一般的ではありません。

また、元よりナビゲーションを含むことが想定されているため、<header>タグの中に目次などのリンクのまとまりを記述する場合は、<nav>タグは使わないのが普通です。

なお<header>タグはセクションを作らないので、例えばその中に書かれた<h1>タグなどは<header>タグが無い場合と同じ強さを持ちます。

<footer>タグ

<header>タグと対を成すのが<footer>タグで、一般にはそのセクションの記述者や著作権情報などが記載されます。

<footer>タグの中にリンクのまとまりを記述する場合も、<header>タグのときと同様に<nav>タグを使用しないのが普通です。

ちなみに、ここまでのタグを使ったHTML5ドキュメントの記述例は、以下のようになります。

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>ページタイトル</title>
    </head>
 
    <body>
        <header>
            <img src="logo.jpg">
            <h1>サイトタイトル</h1>
        </header>
        <article>
            <section>
                <h1>見出し</h1>
                <p>本文</p>
                <nav>
                    <a href="---.html">外部リンク</a><br>
                    <a href="---.html">外部リンク</a><br>
                    <a href="---.html">外部リンク</a><br>
                </nav>
            <section>
        </article>
 
        <aside>
            <h1>ツイッターでフォローしてください</h1>
            <p><a href="---">@xxx</p>
        </aside>
 
        <footer>
            <ul>
                <li><a href="---.html">このサイトについて</a></li>
                <li><a href="---.html">プライバシーポリシー</a></li>
            </ul>
        </footer>
    </body>
</html>

<mark>タグ

文章の一部を蛍光マーカーでなぞったようにハイライトで目立たせたい場合に<mark>タグを使うことができ、多くのブラウザではタグで囲まれた文字の背景色が黄色く塗られます。

<mark>マークタグの例</mark>

マークタグの例

これは文章の一部に意味を持たせるものではなく、見た目上で目立たせたいときなどに使用するタグで、同様な文字装飾用のタグに文字を太字にする<b>タグや斜体にする<i>タグがあります。

これらはCSSで文字を装飾するのと変わりが無いので、タグを使ってもCSSを使っても実質上どちらでもかまわないと言えます。

<embed>タグ

ドキュメントに外部プラグイン・コンテンツを埋め込みたいときに、<embed>タグを使用します。

<embed>タグはこれまでも非正式に使用されていましたが、HTML5で正式なタグとして認められました。

用途が似た従来のタグに<object>タグがありますが、<embed>タグはFlashのような外部プラグインが必要なコンテンツに使用するのに対して、<object>タグのほうは他にも画像やPDFなどのデータリソース全般に対して使用できます。

また、<embed>タグに終了タグはありませんが、<object>タグには終了タグが必要です。

<embed src="---.swf">
<object data="---.jpg" width="200" height="100"></object>

<audio>タグ・<video>タグ

HTML5では外部プラグインを使用することなく、音声や動画などのメディアを再生することもできます。

音声ファイルを再生する場合は<audio>タグを使用し、以下のプロパティが指定できます。

src =で再生する音声ファイルを指定
preload =でプリロード(auto/metadata/none)を指定
autoplay 自動再生の指定
loop ループ再生の指定
control 操作パネルを表示

<audio src="---.mp3" autoplay loop controls></audio>

ただし「preload」については、その指定に関わらずブラウザが表示高速化のためにコンテンツの先読みをする場合が多いので、あまり意味が無いかもしれません。

<audio>タグで「control」を指定しなかった場合、何も表示されないまま音声が流れ続ける状態になるので注意が必要です。

また、動画ファイルを再生する場合は<video>タグ使用し、以下のプロパティが指定できます。

src =で再生する動画ファイルを指定
poster =で再生前に表示する画像を指定
preload =でプリロード(auto/metadata/none)を指定
autoplay 自動再生の指定
loop ループ再生の指定
control 操作パネルを表示
width =で幅を指定
height =で高さを指定

<video src="---.mp4" autoplay loop controls poster="---.jpg" width="300" height="200">
    <img src="---.jpg">
    <p>この動画の再生には<video>タグに対応したブラウザが必要です。</p>
</video>

ただし「poster」については、通常は動画の読み込みが始まると動画の最初のシーンが表示されてしまうので、あまり意味が無いでしょう。

<output>タグ

これまでフォームの要素として<input>タグが入力に使用されてきましたが、HTML5で<output>タグが出力用として追加されました。

<input>タグとは異なり、<output>タグには終了タグが必要です。

<form>タグで指定された「oninput」イベントに対して、<output>タグにそのイベントの結果が表示されます。

<form oninput="Z.value = X.valueAsNumber + Y.valueAsNumber">
    <input name="X" type="number" style="width: 5em"> +
    <input name="Y" type="number" style="width: 5em"> =
    <output name="Z" for "X Y"></output>
</form>

+ =

JavaScriptの動作がより簡略的な記述で実現できますが、IEは対応していないので注意が必要です。

<ruby>タグ・<rt>タグ・<rp>タグ

<ruby>タグを使って、文字に読み仮名をつけることができます。

読み仮名を付けたい文字の直後に<rt>タグで囲って読み仮名を記述し、それらをまとめて<ruby>タグで囲むことによって文字の上部に読み仮名が表示されます。

さらに、非対応のブラウザのために<rp>タグが用意されており、<rp>タグで囲まれた部分は、非対応のブラウザでのみ表示されます。

ですから以下のように記述した場合、非対応のブラウザでは読み仮名は文字の上には表示されずに、文字の後ろにカッコ付きで「文字(もじ)」のように表示されることになります。

<ruby>文字<rp>(</rp><rt>もじ<rp>)</rp></ruby>

文字(もじ)

なお<rt>タグの終了タグは、直後に<ruby>タグの終了タグか、または<rp>タグの開始タグか終了タグがある場合には省略することができます。

ちなみに、全角文字1文字に付きだいたい2文字の読み仮名が付くので、読み仮名の文字数が多い場合は、読み仮名を付けられるほうの文字の文字間隔が開くことになります。

また読み仮名の文字の分だけ行間も開くので、それらの点でデザイン的にバランスが悪く感じることもあります。

スポンサーリンク

まとめ

「HTML5」の新タグには他にもまだいろいろ面白いものがあるんですが、いまのところブラウザのほうが対応してないものが多いのが現状です。

せっかく機能が豊富になったのに、それを使えないのは残念なので、早く一般的に対応してもらえると嬉しいんですがね。

この記事で紹介したものは、各ブラウザの最新バージョンならほとんど対応しているので、WEBサイトを作るときに試してみてはいかがかと。

それでは、楽しいHTMLライフを!

いちばんやさしいHTML5&CSS3の教本

人気講師が教える本格Webサイトの書き方

amazonで探す

楽天で探す

記事下アフィリウィジェット

楽天モーションウィジェット(600×200)スマホ非表示

-PCやネットの話
-