LoginSignup
22
22

More than 5 years have passed since last update.

[HTML5] 変更になった要素まとめ【2014/2/14版勧告候補】

Posted at

strong

重要性を伝えるテキストを表す

i

印刷慣例においてイタリックで表現されるようなテキスト(思考の表現、別言語での会話等)を表す。※スタイルの指定ではないことに注意。

[TIPS] i要素はiconのi...じゃなく

HTMLのi要素は、もはやCSSスプライトの置き場所になってしまった。文のマークアップですらない。うたがふならツイッターのHTMLソースでもみてくれ。あとわたくしがCSSスプライトつかふときも、i要素をつかふ。理由は簡単、1文字だから。iconの頭文字だとおもってあきらめてる。
via Twitter / ksnk1040

CSSスプライトやアイコンフォントをi要素でマークアップすることが慣例化しています。
ただし、i要素の本来の定義にはアイコンの意味は無いことに注意しましょう。
セマンティクス的には諸説あるようです。

本来の使い方の例

HTML5
<p>終業時間間際、そろそろと帰り支度をしていると部長からお呼出し。<i class='thought'>まさかまたじゃあるまいな・・・</i>と嫌な予感がしながら部長の元へ向かうと、「すまんが<i class='tec-term'>HTML5</i>の件、至急頼むよ」と案の定。「わかりました、お任せください。」にこやかにそう答えながら、心の中で<i class='idiom' lang='english'>Fuck!</i>と叫ぶ。嗚呼、また今日も終電だ。</p>

b

太字で表現されるようなテキストを表す。強調や重要性といった意味は持たない。※スタイルの指定ではないことに注意。

u

u 要素は、はっきりとレンダリングされているものの、はっきりと伝わりにくかったり、本来とは異なった表記を伴うテキストの範囲を表します。たとえば、中国語テキストで固有名詞であるとしてテキストをラベル付けする場合(中国語固有名詞マーク)や、スペルミスだとしてテキストをラベル付けする場合が想定されます。 ほとんどの場合で、他の要素のほうが適切といえます。
via u 要素 - テキストレベルの意味づけ - HTML要素 - HTML5 タグリファレンス - HTML5.JP

s

その部分を取り消したことを示す。すでに正しくない情報となってしまった部分や、無関係となった部分などに使用。

small

細目(注釈、著作権表記等)を表す

[memo] strongとsmallの組み合わせ

  • strong要素の中にsmallを入れると、「重要な細目」という意味になる
  • small要素には「意味あいを弱める」という役割はないことに注意

hr

段落(≠セクション)の区切りを表す

address

サイトの管理者や親コンテンツの著者を表す

[Momo] 誤解しやすいaddress要素の使い方

address要素は連絡先を表しますが、どんなときにも使えるわけではなく、以下に限定されます。

  • サイト管理者の連絡先情報
  • メインコンテンツ著者の連絡先情報

(間違った使い方)

  • お店のレビューサイトでお店の連絡先をaddressでマークアップ
  • 会社概要ページで会社の住所や連絡先をaddressでマークアップ(これはメインセクション)

cite

引用元のタイトル、作品名を表す。人名に使ってはいけない。

[memo] cite ≠ (Web)site

citeはcitationの略で引用の意味。

dl

用語解説型リスト。HTML4ではdefinition Listの略だったが、HTML5ではdescription Listの略。定義の意味がなくなったので注意。

label

ラベルをクリックしたときの挙動はOS標準に従う。

a

アンカーリンクの仕様変更とプレースホルダーリンクの追加。

アンカーリンク

HTML4ではname属性を指定したa要素をアンカーリンクとして使用していましたが、
HTML5ではid属性を付けた要素全てがアンカーリンクとして機能します。

HTML4
<div id='article'>
  <a href='#' name='main'></a>
  ...
</div>
HTML5
<article id='main'>
...
</article>

このようにマークアップされていたら

HTML5
<a href='#main'>main</a>

のようなアンカーリンクでアクセスできます。

プレースホルダーリンク

HTML5ではhref属性を省略ができます。
(あとからスクリプトで動的にリンクを作成することを想定)

<a id="hoge"></a>

[memo] こんなのもOK

<li><a href="/prev">前のページ</a></li>
<li><a>今見ているページ</a></li>
<li><a href="/next">次のページ</a></li>

<a href="#top">はページ先頭にジャンプする

id='top'が指定されている要素が存在しなくても、仕様的にOKになったようです。

<a href="#top">がHTML5で正式仕様になってた件 - Qiita

a要素の正しい使い方

  • ○ a要素にdiv/sectionを入れる
  • x a要素にbutton要素を入れる

HTML5で追加されたping属性

リンクがクリックされたかどうかの測定に使える。

HTML5
<a href='広告URL' ping='測定用URL'><!-- 広告 --></a>

[memo] パフォーマンスに効果あり?

アンカータグ()にping属性を加える事で僅かながらも検索結果のクリック先サイトへの移動を高速化できる事にIlya Grigorik氏(Google web performance engineer)が言及
via
Google PING属性でモバイル検索を高速化する - 最新のSEO対策ならSEO JUMP

リンク先の言語を指定

HTML5
<a rel='alternate' href='/en/index.html' hreflang='en' title='en page'>English</a>
<a rel='alternate' href='/ja/index.html' hreflang='ja' title='jp page'>Japanese</a>

参考URL

HTML 要素 - HTML5タグリファレンス - HTML5.JP
HTML5.1各要素別メモ
HTML5プロフェッショナル認定試験 無料セミナー - Qiita

22
22
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
22
22