WEBCRE8.jp > 調べる > [HTML5 入門]HTML5要素に指定できる属性の分類、書き方の違いについて

[HTML5 入門]HTML5要素に指定できる属性の分類、書き方の違いについて

この記事は約8分ぐらいで読めます

WEBCRE8.jpではHTML5のタグについて記事を多く書いていますが、今回は属性について。どの要素にどの属性を使えるか、どう書くか。それは属性の分類を知ることでわかりやすくなります。

WEBCRE8.jpではHTML5の入門記事をたまに書いています。私が販売しているHTML5KARUTAも、こうしたHTML5の学習のための活動の一つですが、タグだけを覚えてもちゃんとしたコーディングは出来ません。

HTML5KARUTA - 「HTML5カルタ」で覚えるHTML5の108つのタグ

http://roadstohtml5.com/html5karuta/

HTMLの各要素には属性というものがあります。これもまあまあたくさんあるので全部解説するわけではないんですけど、まずこの記事ではどういう種類のものがあるのかを確認してみましょう。

…といいつつこれは私の備忘録でもあるんですがｗ興味ある人はお付き合いください★

HTMLの属性とは

HTMLにおける属性(Attribute)とは、HTMLで各要素のタグに指定する設定の事です。例えばハイパーリンクであるa要素のaタグにはhref属性を指定します。href属性の属性値(value)にはURL等が入りますね。

要素自体のタグ名の後に続く一つ一つが属性です。そしてその属性には、予め指定できる属性値が一つに決まっているもの、いくつかに決まっているもの、ルールが決まっているもの、なんでも指定できるものがあります。

グローバル属性(Global attributes)

その前にまずはリファレンスで頻繁に見かけるこの言葉の解説。

グローバル属性(Global attributes)とは、HTML全てのタグにつけることのできる属性です。

accesskey
class
contenteditable
contextmenu
dir
draggable
dropzone
hidden
id
lang
spellcheck
style
tabindex
title
translate
独自データ属性
イベント・ハンドラ・コンテンツ属性
role属性とaria-*属性

HTML5のグローバル属性

id属性、class属性、accesskey等を見るとわかる通り、これらはその要素のモードやCSS等の外部リソースとの結び付けを表すもので、どのタグにも設定できなければ困るようなものです。他の属性も見てみて、「へーこれ設定出来たんだ」とか納得してくださいｗ

今回は一つ一つの意味については触れずあくまで分類とその扱いについてだけの話です。

その他グローバル属性についての解説はおなじみHTML5.jp、そしてAdobe Developer Connectionの文書に詳しいです。

独自データ属性(data-* attributes)

独自データ属性(data-* attributes)とは、data-に続く任意の文字列からなるユーザーが自由に定義してよい属性です。マークアップ、またはフレームワーク等を作成する人が勝手に作っていい属性で、グローバル属性と同じくどのHTMLの要素にも設定できます。とは言え無目的に作っても仕方ないですがｗ

例を挙げるとjQuery Mobile、Twitter Bootstrap等のフレームワーク内で使用されています。「data-roleって何だろう？」と思ったこともいるかと思います。あれは勝手に作ってるって事ですねー。