最新のWeb開発のチュートリアル

HTML属性


属性は、HTML要素に関する追加情報を提供しています。

HTML属性は、HTMLの要素型の修飾子です。 属性は、要素型のデフォルトの機能を変更したりすることなく、正常に機能することができない特定の要素タイプに機能を提供しますどちらか。 HTMLの構文では、属性は、HTMLの開始タグに追加されます。


HTML属性

  • HTML要素を持つことができるattributes
  • 属性は提供additional information要素についての
  • 属性は常にで指定されthe start tag
  • :属性のような名前/値のペアで来るname="value"

説明

HTMLは、一般的に、要素の名前の後、=で区切られ、名前と値のペアとして表示され、要素の開始タグ内に記述されている属性:

<tag attribute="value">content to be modified by the tag</tag>

どこにタグ名HTML要素のタイプ、および属性が与えられた値に設定し、属性の名前です。 値は引用符で囲まれていないが、安全でないと考えられている属性値を.Leaving(XHTMLではない)特定の文字からなる値がHTMLで引用符で囲まれていないままにすることができるが、単一または二重引用符で囲むことができます。

ほとんどの属性がペアの名前と値として設けられているが、いくつかは、単に(img要素のためのISMAP属性など)の要素の開始タグにおけるそれらの存在によって要素に影響を与えます。

ほとんどの要素はいくつかの共通の属性のいずれかを取ることができます。

id属性はelement.Thisのための文書全体で一意の識別子は、要素の内容やプレゼンテーションを変更するために特定の要素に注意を集中するために、ブラウザによって、プレゼンテーションの特性を提供するために、CSSのセレクタとして使用、またはスクリプトによって提供することができます。 ページのURLに追加、URLを直接ページのサブセクション通常、文書内の特定の要素を対象としています。 例えば、IDは「属性」。

クラス属性は、同様の要素を分類する方法を提供します。 これは、セマンティックの目的のために、プレゼンテーションの目的のために使用することができます。 意味的に、例えば、クラスがマイクロフォーマットで使用されています。 Presentationally、例えば、HTML文書は、このクラスの値を持つすべての要素が文書の本文に従属することを示すために指定クラス=「表記法」を使用するかもしれません。 このような要素が集まって、代わりに彼らはHTMLソースで発生する場所に登場するのページの脚注として提示される可能性があります。 別のプレゼンテーションの使用は、CSSセレクタのようになり。

著者は、特定の要素にスタイル非attributalコードプレゼンテーションプロパティを使用してもよいです。 それは時々、これはスタイルのプロパティの単純かつ具体的またはアドホックアプリケーションのためにあまりにも面倒なことができても、要素のidやクラスはスタイルシートを持つ要素を選択するために属性を使用するより良いプラクティスと考えられています。

title属性は、要素にsubtextual説明を取り付けるために使用されます。 ほとんどのブラウザでは、この属性は、多くの場合、ツールチップと呼ばれるものとして表示されます。

略語要素は、略称、これらのさまざまな属性を証明するために使用することができます。

<abbr id="anId" class="aClass" style="color:blue;" title="Hypertext Markup Language">HTML</abbr>

この例では、HTMLとして表示します。 ほとんどのブラウザでは、略語にカーソルをポイントすると、タイトルのテキスト表示されるはず「ハイパーテキストマークアップ言語を。」

ほとんどの要素はまた、言語関連のLANGとdir属性取ります。


lang属性

ドキュメントの言語が内で宣言することができ<html>タグ。

言語はで宣言されているlang属性。

言語を宣言すると、補助アプリケーションのために重要である(screen readers)と検索エンジン:

<!DOCTYPE html>
<html lang="en-US">
<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>
</html>

最初の2つの文字は、言語指定(en) 。 方言がある場合は、さらに2つの文字を使用(US)


title属性

HTMLの段落を使用して定義されている<p>タグ。

この例では、 <p>要素は、title属性を持っています。 属性の値が" About w3im "

<p title="About w3ii">
w3ii is a web developer's site.
It provides tutorials and references covering
many aspects of web programming,
including HTML, CSS, JavaScript, XML, SQL, PHP, ASP, etc.
</p>
»それを自分で試してみてください

あなたが要素の上にマウスを移動すると、タイトルがツールチップとして表示されます。


href属性

HTMLリンクはで定義されている<a>タグ。 リンクアドレスはで指定されているhref属性:

<a href="http://www.w3ii.com">This is a link</a>
»それを自分で試してみてください

あなたは、リンクや詳細について学びます<a>後でこのチュートリアルのタグを。


サイズ属性

HTMLの画像がで定義されている<img>タグ。

元のファイル名( src )および画像(のサイズwidthheight )すべての属性として提供されます。

<img src="w3ii.jpg" width="104" height="142">
»それを自分で試してみてください

画像サイズは、ピクセル単位で指定される:幅=「104」はワイド画面104個の画素を意味します。

あなたは画像や詳細について学びます<img>後でこのチュートリアルのタグを。


alt属性

alt属性は、HTML要素を表示することができないとき、使用される代替テキストを指定します。

属性の値を読み取ることができる"screen readers" 。 このように、誰かが"listening"ウェブページには、盲目の人、つまり、できる"hear"の要素を。

<img src="w3ii.jpg" alt="w3ii.com" width="104" height="142">
»それを自分で試してみてください

我々は提案する:常に使用小文字の属性

HTML5の標準は、小文字の属性名を必要としません。

title属性は次のように大文字または小文字で書くことができるTitleおよび/またはTITLE

W3Cは、HTML4で小文字を推奨し 、XHTMLなどの厳格なドキュメントタイプのために小文字を要求しています。

下部ケースが最も一般的です。 下の場合は、入力する方が簡単です。
w3iiで、我々は常に属性名の小文字を使用します。


我々は提案する:常に引用属性値

HTML5の標準は、属性値の前後に引用符を必要としません。

href上で示した属性は、のように書くことができます。

<a href=http://www.w3ii.com>
»それを自分で試してみてください

W3Cはrecommends HTML4で引用符を、およびXHTMLのような厳格なドキュメントタイプのために引用符を要求しています。

時には引用符を使用する必要があります。 それはスペースが含まれているので、これは、正しく表示されません。

使用して引用符が最も一般的です。 省略引用符は、エラーを生成することができます。
w3iiで、我々は常に属性値の前後に引用符を使用します。


単一引用符または二重引用符?

ダブルスタイルの引用符は、HTMLの中で最も一般的ですが、単一のスタイルも使用することができます。

属性値自体は二重引用符が含まれている場合、いくつかの状況では、単一引用符を使用する必要があります。

<p title='John "ShotGun" Nelson'>

またはその逆:

<p title="John 'ShotGun' Nelson">

章のまとめ

  • すべてのHTML要素には属性を持つことができます
  • HTMLのtitle属性が追加提供し"tool-tip"の情報を
  • HTML href属性は、リンクのアドレス情報を提供します
  • HTMLのwidthheightの属性は、画像のサイズ情報を提供します
  • HTMLのalt属性は、スクリーンリーダーのためのテキストを提供します
  • w3iiで、私たちは常に使用lowercase属性名をHTMLに
  • w3iiで、我々は常にquote二重引用符で属性

練習で自分自身をテストします!

演習1» 演習2» 演習3» 演習4» 演習5»


HTML属性

以下は、多くの場合、HTMLで使用されるいくつかの属性のアルファベット順のリストは、次のとおりです。

属性 説明
alt 画像の代替テキストを指定します。
disabled 入力要素を無効にすべきことを指定します
href URLを指定(web address)リンクするために
id 要素の一意のIDを指定します。
src URLを指定(web address)イメージするために
style 要素のインラインCSSスタイルを指定します。
title 要素についての追加情報を指定します(displayed as a tool tip)

:各HTML要素のすべての属性の完全なリストは、私たちにリストされているHTMLタグリファレンス