忍者ブログ

World of granshe.

HTMLやCSS、JavaScriptに関する話題を中心に、Web制作について知ったこと、覚えておきたいことをメモしておく個人的スペースです。
[123] [122] [121] [120] [119] [118] [117] [116] [115] [114] [113

[PR]

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

HTML5で追加されたタグとその使用法

HTML5勉強企画第2弾。

今回も参照させてもらったサイトを以下に(敬称略)。
前記事同様、基本的にW3Cのワーキングドラフト(英文)を読んでいるので、ここに書かれていることが原文と全く同じとは限りません。翻訳に際して生じる間違いがある場合がございますこと、ご理解いただけると助かります。

間違いを発見した場合、ご連絡いただけると勉強になるのでとても嬉しいです。
連絡先:granshe@jcom.home.ne.jp


section

文章のを表すのに使う。ある程度意味の同じコンテンツをまとめる。
一般的にheader要素と共に用いられ、footer要素をともなうこともある。


header

見出しを表す。
基本的に、サイトのタイトルとタグライン・サブタイトルを示すheadline要素(h1~h6の見出しタグ)を囲むのに用いる。
また、section要素のタイトル・サブタイトル、文章の概略や説明を示すために使用してもよい。

header要素は、h1と同様高い重要度を持つというように解釈される。


footer

その文章を誰が書いたのか、いつ書いたのか、関連している記事はどれか、などをマークアップするためのタグ。
footer要素の中に著作者の連絡先を入れる場合、その部分をaddressタグで囲まなければならない。
addressタグは、記事に対する直接の連絡先以外をマークアップしてはいけない。
たとえば郵便番号とか、会社の住所とか。

(それらが本当に記事の直接の連絡先だったらOKだが、メールアドレスで記事に対して対応するのが一般的な気がするので、その場合はメールアドレスをaddressでマークアップする。)

ちなみに、footer要素は必ずsection要素の後ろに来なければいけないわけではなく、「次のページへ」などといったコンテンツの上部・下部に共通のリンクがあった場合は、header要素の前にfooter要素を持ってくることも可能。

以上のsection、header、footerは、それぞれが入れ子にはならず、並列の関係である。


article

独立した文章の部分を囲む。
header要素、section要素、footer要素を囲んでひとつの記事とするもの。
articleでマークアップする例としては、フォーラムの投稿や、雑誌・新聞記事、ブログエントリ、ユーザコメントなどが挙げられる。

articleタグを入れ子にする場合は、親のarticleと子のarticleに関連性がないといけない。
たとえば、ブログエントリでコメントを表示する場合は、ブログエントリとそのコメントをarticleタグでくくり、入れ子にしてもOKな例だという。

<article>
<header>ブログエントリ</header>
<section>内容</section>
<footer>著作情報</footer>
  <article>
  <header>コメント</header>
  <section>コメント群</section>
  </article>
</article>

という感じになるということだろうか?(予想)


footerタグに入れる作者情報は、article要素と結びつくが、
入れ子の中にあるarticleには適用されないそうだ。

また、article要素内にあるheader要素、footer要素はその記事のヘッダー・フッターと解釈され、
body直下(articleの外)にあるheader要素、footer要素は、そのサイト全体のヘッダー・フッターというふうに解釈されるようです。


だんだんややこしくなってきましたね!


nav

ページ内の関連リンクや、他の関連するページへのリンク集合、
つまりナビゲーションリンクをマークアップするもの。

かといって、ページ内のナビゲーション的なリンクをすべてnavタグで囲む必要はなく、
主幹となる(primary)ナビゲーションに対して囲めばよい。

ただ、サイトの下部によくある「お問い合わせ」「サイトマップ」などといった、サイト共通のユーティリティ系のリンクは、footerタグで囲んでくださいとのこと。


aside

本編から少しそれた、追記とか、その周辺のものをマークアップするときに使用する。
たぶん、「余談だが」あたりをマークアップするときに使用されると思われます。


dialog

ミーティング、チャット、台本など、会話文をマークアップするのに使う。

<dialog>
<dt>発話者</dt><dd>発話内容</dd>
<dt>発話者</dt><dd>発話内容</dd>
</dialov>

として使う。
定義リストの派生系といった感じだろうか?


mark

テキストにハイライトを入れる(蛍光マーカーで線を引く感じ)。
たとえば、引用文を使用するときや、翻訳の原文として使用するときなどに、
その文章の書き手は強調していないけれども、自分はこの部分を強調して読んでもらいたい
というときなどにその部分をmark要素でマークアップするようだ。

また、

<p>The highlighted part below is where the error lies:</p>
<pre><code>var i: Integer;
begin
   i := <mark>1.1</mark>;
end.</code></pre>

のようにcode要素の中の計算式の答えをmarkでマークアップしている例文があることから、
「それ単体では意味を為さないが、注目して欲しい点」
「何かの過程を示していて、前の過程との変更点」
を示したいときに使うのかなと思いました。


time

日付、時間をマークアップするタグ。
たとえば、

<time datetime="2009-04-04T14:00">昨日の昼</date>にブログ更新しました。

という使用法もできるし、

単に

今日は<time>8:00</time>に起きました。

というようにもできるらしい。


他にも種類は色々あったのですが、
私が使えそうな範囲はこのあたりまででしたので、ここでご紹介させていただきました。



全体を見て思ったのが、
HTML5はブログのマークアップ用に作られてる気がする」ということ。

普通にWebサイトを作っていて、ひとつのページ内に全然違うテーマの文章が存在するのは稀だと思います。
ブログでは基本的に記事が新しい順に並んでいくので、内容の違う記事が一挙に同じページにあがることになり、このarticleといったタグの必要が出てくるのだと思います。


HTMLにおけるマークアップの対象も、論文などの一貫した文章から、ブログ・日記などといった散文的なものに変わっていっていますし、時代の流れ、ですね。


これでブログを構築したら面白そうだなと考えてます。

PR
この記事にコメントする
お名前
タイトル
文字色
メールアドレス
URL
コメント
パスワード   Vodafone絵文字 i-mode絵文字 Ezweb絵文字
この記事へのトラックバック
この記事にトラックバックする:
HTML5とCSS3でWebサイトを作るときのサンプルセット(HTML5編)
HTML5とCSS3によってモダンなカッコいいWebサイトが作れるという情報を耳にして、だいぶ間が空いてしまいました。Webに生きる人間として、早くHTML5とCSS3でWebサイトを作る知識を学ばなければなーと最近改めて思い、今回は勉強のためにHTML5とCSS3でWebサイトを作るためのサンプルセットを作りました。 さて、いろいろなWebサイトやブログ記事を参考にした結果、次のようなHTML5のコードになりました(いまいちarticleとsectionの使い方が分かっていませんが、おそらく間違っ...
URL 2011/02/22(Tue)10:53:13
プロフィール
名前: ゆーり
職業: コーダー(模索中
趣味: Web制作
自己紹介: 某Web製作会社の入社5年目のマークアップエンジニア。専門はHTMLとCSSとMT(自称)。
カレンダー
11« 2017/12 »01
S M T W T F S
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31
ブログ内検索
忍者ブログ [PR]