HTML属性

HTML 属性は、要素の動作を制御するために開始タグ内で使用される特別な単語です。これは、HTML 要素の動作または表示を調整するために使用されるマークアップ言語の一部です。HTML 属性は、HTML 要素タイプの修飾子です。属性は、要素タイプのデフォルトの機能を変更するか、属性なしでは正しく機能しない特定の要素タイプに機能を提供します。HTML 構文では、属性はHTML 開始タグに追加されます。

いくつかの基本的な属性タイプが認識されており、これには、(1)特定の要素タイプが正しく機能するために必要な必須属性、(2) 要素タイプのデフォルト機能を変更するために使用されるオプション属性、(3)多くの要素タイプでサポートされている標準属性、(4)特定の状況下で実行されるスクリプトを要素タイプに指定させるために使用されるイベント属性が含まれます。

Doctype HTML は、ドキュメントがどのバージョンの HTML で記述されているかをブラウザに伝える宣言です。

いくつかの属性タイプは、異なる要素タイプを変更するために使用される場合、異なる機能を持ちます。たとえば、属性名はいくつかの要素タイプで使用されますが、それぞれで機能が若干異なります。^[1]

HTML 属性は通常、で区切られた名前と値のペア=として表示され、要素の開始タグ内の要素名の後に記述されます。

<element attribute= "value" >要素コンテンツ</element>  

はelementHTML 要素タイプの名前、はattribute属性の名前で、指定された に設定されますvalue。値は一重引用符または二重引用符で囲むことができますが、特定の文字で構成される値は HTML では引用符なしでもかまいません (XHTML は不可)。^{[2] [3]}属性値を引用符なしで残すことは安全ではないとみなされます。^[4]

ほとんどの属性は名前と値のペアとして提供されますが、一部の属性は要素の開始タグに存在するだけで要素に影響を与えます^[5]（要素ismapの属性^[6]など）。 img

略語要素 はabbr、次のようなさまざまな属性を示すために使用できます。

< abbr  id = "anId"  class = "aClass"  style = "color:blue;"  title = "ハイパーテキスト マークアップ言語" > HTML </ abbr >

この例はリンクではなく青色のHTMLとして表示され、ほとんどのブラウザでは、略語にカーソルを合わせると、黄色のフローティング背景 (ツールヒント) 内にタイトル テキスト「Hypertext Markup Language」が表示されます。

< div  style = "text-align: center;" >中央揃えのテキスト</ div >

この他の例では、テキストは次のようになります。

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

通常、HTML 要素は、最も一般的な標準属性のいずれかを取ることができます (完全なリストを参照してください)。

• 属性idは、要素に対してドキュメント全体で一意の識別子を提供します。^{[7] [8] [9]これは、} CSS セレクターとして使用して、表示プロパティを提供したり、ブラウザーで特定の要素に注目したり、スクリプトで要素の内容や表示を変更したりするために使用できます。ページの URL に追加され、URL はドキュメント内の特定の要素 (通常はページのサブセクション) を直接ターゲットにします。たとえば、ID「Attributes」 http://en.wikipedia.org/wiki/HTML#Attributes(「HTML」ページの「Attributes」セクションを参照) などです。
• 属性classは、類似した要素を分類する方法を提供します。スペースで区切ることで、複数のクラス名を追加できます。^{[10] [11]} たとえば、意味的には、クラスはマイクロフォーマットで使用されます。さらに、スタイルシートの作成者は、スタイル設定の目的で、クラスによって要素を一致させるセレクターを作成できます。たとえば、HTML文書では、class="notation"このクラス値を持つすべての要素が文書のメインテキストに従属していることを示すために、指定を使用できます。このような要素は、HTMLソース内の位置によって示される場所に表示されるのではなく、ページ上で脚注としてまとめられる場合があります。スタイルシートの作成者は、セレクターを使用してルールを定義し.notation、プロパティを定義することもできますfont-size: small;。
• 属性styleは、要素固有のスタイル ルールを適用する方法を提供します。複数のスタイル宣言をセミコロンとオプションのスペースで区切って追加できます。各宣言には、CSS プロパティ名と、コロンとオプションのスペースで区切られた値が含まれます (例: style="color: red; text-align: center;")。^{[12] [13] [14]}属性styleは、任意の HTML 要素で使用できます (任意の HTML 要素で検証されますが、必ずしも便利であるとは限りません)。スタイル情報をスタイル シートに追加することがより良い方法であると考えられており、多くの場合、要素クラスまたは ID に一致するセレクタを使用して実現されます。ただし、スタイル シートが単純で特定の、またはアドホックなスタイル仕様には扱いにくいと考えられる場合は、インライン スタイルが好まれることがあります。
• このtitle属性は、要素にサブテキストの説明を添付するために使用されます。ほとんどのブラウザでは、この属性はツールチップと呼ばれるものとして表示されます。

HTML 属性は一般的に、必須属性、オプション属性、標準属性、イベント属性に分類されます。

• 通常、必須属性とオプション属性は特定のHTML要素を変更します。
• 標準属性はほとんどのHTML要素に適用できます。^[15]
• HTMLバージョン4で追加されたイベント属性により、要素は特定の状況下で実行されるスクリプトを指定できるようになりました。^[16]

• <a>と<area> :
  • coords — <area>またはその中の<link>の座標。
  • shape — <area>またはその中の<link>の形状。値: default、rect、circle、poly。
• <a>と<link> :
  • hreflang — リンクされたドキュメントの言語コード。( <a>、<link> )
  • rel — リンクされたドキュメントの性質 (現在表示されているページに対する相対的な性質)。<a>には自由なテキストを使用できますが、<link>では一連の用語 (alternate、appendix、bookmark、chapter、contents、copyright、glossary、help、home、index、next、prev、section、start、stylesheet、subsection) を使用します。
  • rev — 現在表示されているページの性質（リンクされたドキュメントに対する相対値）。relと同様に、<a>と<link>によって異なります。
• <applet>と<object> :
  • archive — アーカイブ URL ( <applet>、<object> )
  • codebase — ベース URL ( <applet>、<object> )
• <basefont>と<font> :
  • color — テキストの色（非推奨）（<basefont>、<font>）
  • face — フォントファミリー(非推奨) ( <basefont>、<font> )
• <col>と<colgroup> :
  • span — 範囲に含まれる列の数 ( <col>、<colgroup> )
• <del>と<ins> :
  • datetime — テキストの削除または挿入の日時。
• <form>と<input> :
  • accept — <form>または<input>をアップロードするときに受け入れられるファイルの種類
• <frame>と<iframe> :
  • frameborder — 値 (0 または 1) は、 <frame>または<iframe>の周囲に境界線を表示するかどうかを指定します。
  • marginheight — <frame>または<iframe>の周囲のピクセル単位の上部と下部の余白。
  • scrolling — 値 (yes、no、auto) は、 <frame>または<iframe>の周囲にスクロールバーを表示するかどうかを指定します。
  • marginwidth — <frame>または<iframe>の周囲のピクセル単位の左余白と右余白。
• <frameset>と<textarea> :
  • cols — <frameset>または<textarea> に表示される列の数(いくつかのバリエーション)
  • rows — <frameset>または<textarea> に表示される行の数(いくつかのバリエーション)
• <img>と<object> :
  • usemap — <img>で使用するマップ要素の名前、または<object>で使用するイメージマップの URLを指定します。
• <input>と<textarea> :
  • readonly — <input>および<textarea>の読み取り専用テキストを指定します。
• <link>と<style> :
  • media — <link>および<style>の表示デバイスを指定します。値: all、aural、braille、handheld、print、projection、screen、tty、TV。
• <optgroup>と<option> :
  • label — <optgroup>または<option>の説明テキスト。
• <td>と<th> :
  • abbr — 表のセルまたはヘッダーの省略バージョン。
  • axis — テーブルセルまたはヘッダーのカテゴリ名。
  • colspan — テーブルセルまたはヘッダーがまたがる列の数。
  • nowrap — (非推奨)テーブルセルまたはヘッダーの折り返しを防止します。
  • rowspan — テーブルセルまたはヘッダーがまたがる行の数。
  • スコープ - 通常のブラウザ表示には影響しませんが、テーブルセルまたはヘッダーを他のセルの論理ヘッダーとしてマークします。値: col、colgroup、row、rowgroup。

• 配置— <applet>、<col>、<colgroup>、<object>、<tbody>、<td>、<tfoot>、<th>、<thead>

• align は<caption>、<div>、<h1>～<h6>、<hr>、<iframe>、<img>、<input>、<legend>、<p>、<table>でも非推奨です。

• alt — <applet>、 <area>、 <img>、 <input>
• bgcolor — <body>、<table>、<td>、<th>、<bgcolor>
• 境界線— <img>、<object>、<table>
• 文字— <char>、<colgroup>、<tbody>、<td>、<tfoot>、<th>、<thead>、<tr>
• charoff — <col>、<colgroup>、<tbody>、<td>、<tfoot>、<th>、<thead>、<tr>
• 文字セット— <a>、<link>、<script>
• 引用— <blockquote>、<del>、<ins>、<q>
• コンパクト— <dir>、<menu>、<ol>、<ul>
• 無効— <button>、<input>、<optgroup>、<option>、<select>、<textarea>
• 高さ— <applet>、<iframe>、<img>、<object> 。 <td>、<th>でも非推奨です。
• href — <a>、<area>、<base>、<link>
• hspace — <applet>、<object> 。 <img>でも非推奨です
• longdesc — <frame>、<iframe>、<img>
• 名前— <a>、<applet>、<button>、<form>、<frame>、<iframe>、<input>、<map>、<meta>、<object>、<param>、<select>、<textarea>
• サイズ— <basefont>、<font>、<hr>、<input>、<select>
• src — <frame>、<iframe>、<img>、<input>、<script>
• ターゲット— <a>、<area>、<base>、<form>、<link>
• タイプ— <button>、<input>、<li>、<link>、<object>、<ol>、<param>、<script>、<style>、<ul>
• valign — <col>、<colgroup>、<tbody>、<td>、<tfoot>、<th>、<thead>、<tr>
• 値— <button>、<input>、<li>、<option>、<param>
• vspace — <アプレット>、<画像>、<オブジェクト>
• 幅— <applet>、<col>、<colgroup>、<hr>、<iframe>、<img>、<object>、<pre>、<table>、<td>、<th>

標準属性はグローバル属性とも呼ばれ、多数の要素で機能します。^[17]これには、accesskey、c​​lass、contenteditable、contextmenu、data、dir、hidden、id、lang、style、tabindex、titleなどの基本的な標準属性が含まれます。実験的な属性もいくつかあります。xml :langとxml:baseはどちらも非推奨になりました。複数のaria-*属性によりアクセシビリティが向上します。^[17]イベントハンドラ属性については後で説明します。

技術的には、すべての標準属性はすべての要素で受け入れられる必要がありますが、一部の要素では機能しません。^[18]以下の表は、いくつかの一般的な標準属性と、それらが機能できるいくつかの要素を示しています。

標準属性にはイベントハンドラ属性が含まれる。これらはすべて接頭辞on-で始まる: ^[17]

HTML バージョン 4 で追加されたイベント属性を使用すると、要素は特定の状況下で実行されるスクリプトを指定できます。次の表は、一般的なイベント ハンドラー属性と、それらが機能する要素の一部を示しています。

• HTML要素