HTML5タグに関するメモ

主にHTML4との違いについて。
新要素、主にコンテンツをどう表現するか、に関連する要素だけ掻い摘んで。

HTMLについて

HTMLは「意味」をマークアップするという考えでタグが定義されており、見た目だけの表現であればタグではなく、CSSで表現するベキ。
人が判り易いというのもあるが、コンピュータにとって「意味」が判り易いことも重要。

タグ要素は、ざっくり以下のように分類されている。

ドキュメント宣言
ルート要素(The root element)
文書のメタデータ(Document metadata)
スクリプト(Scripting)
セクション(Sections)
グルーピング(Grouping content)
テキストの意味(Text-level semantics)
編集(Edits)
埋め込み(Embedded content)
テーブル(Tabular data)
フォーム(Forms)
ユーザーによる操作(Interactive elements)

参考

HTML5クイックリファレンス
 W3C A vocabulary and associated APIs for HTML and XHTML

上記以外でも、カテゴリとしての分類と、ブロック要素かインライン要素かという分け方がある。

変更された主な要素

DOCTYPE

簡素になった。従来

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

新

<!DOCTYPE html>

文字円コーディングの指定

簡素になった。従来

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

新

<meta charset="UTF-8">

a

href属性のないものをアンカーとして使用してきたが、html5ではid属性がアンカーになる。

b

太字。
HTML4では見た目だけだったが、キーワードなど区分したいテキストの意味が付与された。

hr

水平線。
HTML4でただ線を表していたが、段落レベルの区切りという意味が付与された。

i

イタリック体(斜体)
HTML4では見た目だけだったが、技術用語や船の名前、声やムード(?)の意味が付与された。

small

小さい文字。
HTML4では見た目だけだったが、細目など注釈を表す要素として再定義された。

strong

強調文字。
HTML4ではem要素と違いがなかったが、新たに重要性を表す要素として再定義された。
強さは strong > em。

追加された主な新要素

今まではdiv要素やCSSなどで表現していたセクション用に新しい要素が追加された。

article

ブログなどの1記事。
articleでコンテンツ部を囲むとき、それがフィードのエントリーとして相応しいかを基準に考えると良い。
メインコンテンツ部へ至るまでの、目次だけのページなどには、それ自身がコンテンツではないので、使わない方が良い。

section

一般的なセクション。

aside

ページ・コンテンツに関係するが、やや本筋から外れるようなセクションを表す。
主に補足記事や広告、nav要素のグループ化。
ページ・コンテンツから分離しても構わないようなコンテンツに使う。
ページ・コンテンツに関連するが、無くても本筋には影響がない場合、article, section要素の中で使う。
ページ・コンテンツとまったく関連がない場合は、article要素の外で使う。

h1～h6

セクションの見出し。
HTML5では従来と異なり、全体における見出しレベル以外にも、セクション毎に見出しレベルを意味づける事も可能。
例1

<body>
  <h1>A</h1>
  <h2>B</h2>
</body>

例2

<body>
  <h1>A</h1>
  <section><h1>B</h1></section>
</body>

何れの例もアウトラインは以下の様になる

1. A
	1. B

但し、これはアウトラインでの話であって、表示上の解釈はブラウザによる（だと思う）

hgroup

見出しのグループ化。
見出しに付随する小見出し、副題、キャッチフレーズなどに。
子要素としは、h1～h6のみしか入れれない。

例えば、以下の場合。

<h1>A</h1>
<h2>B</h2>
  <p>C</p>

CはBの傘下になる。

<hgroup>
  <h1>A</h1>
  <h2>B</h2>
</hgroup>
<p>C</p>

CはAの参加で、Bはアウトラインに現れない。

mark

該当テキストを目立たせる。
強調とは異なり、ユーザーに判りやすい様に目立させる事が目的。
例として、検索結果での検索ワードのハイライト表示が考えられる。

ruby, rt, rp

ルビ。

hdaer, footer, nav

それぞれのヘッダー、フッター、ナビゲーションのセクションを表す。
ページのヘッダー、フッター以外にもセクション・ヘッダー、フッターとしての利用も考えられる。

例

<section>
  <header></heaer>
  <article></article>
  <footer></footer>
</section>

廃止された主な要素

見た目しか表さずCSSで対処できる要素。これらはCSSで代用する。

basefont: ベースとなるフォント指定
big: 文字を大きく
center: センタリング
font: フォント指定
s, strike: 取り消し線。意味を持たせる場合はdel要素を使う。
tt: 等幅フォント
u: アンダーライン

フレーム関連

frame
frameset
noframes

ほとんど使われていない要素

acronym
applet
Java アプレット用。=> object で代用。
isindex
dir
リストを表す。=> ul, ol で代用。

私的なページテンプレ

<!DOCTYPE html>
<head>
  <!-- YUI3 reset
    <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.5.1/build/cssreset/cssreset-min.css">
  -->
  <style type="text/css">
    body { margin: .5em; }
  </style>
  <title>ドキュメントタイトル</title>
  <meta charset="UTF-8" />
</head>

<html lang=ja>
<body>
  <!-- さあ書きたまえ -->
</body>
</html>

私的なセクションテンプレ

<article>
<h1>見出し</h1>
  <section>
  <h2>小見出し</h2>
    <!-- さあ書くのだ！ -->
  </section>
  <aside>
  <h2>関連</h2>
    <!-- さあここにも書くのだ! -->
  </aside>
</article>
<aside>
<!-- 広告 -->
</aside>

参考

http://www.html5.jp

および、著書

徹底解説HTML5マークアップガイドブック

作者: 羽田野太巳
出版社/メーカー: 秀和システム
発売日: 2010/02/27
メディア: 単行本
購入: 10人クリック: 333回
この商品を含むブログ (27件) を見る

以下の方が新しいみたい。

徹底解説 HTML5マークアップガイドブック最終草案対応版―全要素・全属性完全収録

作者: 羽田野太巳
出版社/メーカー: 秀和システム
発売日: 2011/11
メディア: 単行本
購入: 1人クリック: 8回
この商品を含むブログ (2件) を見る

推定無題

日々調べたこととか