HTML-属性

見出しタグ* <h1>、<h2>、段落タグ *<p> およびその他のタグのようなHTMLタグとその使用方法はほとんどありません。これまでのところ、それらを最も単純な形式で使用しましたが、ほとんどのHTMLタグには、追加情報の一部である属性を含めることもできます。

属性は、HTML要素の特性を定義するために使用され、要素の開始タグ内に配置されます。すべての属性は、 name と value の2つの部分で構成されています

name は、設定するプロパティです。たとえば、例の段落 <p> 要素には、名前が align である属性があり、これを使用してページ上の段落の配置を示すことができます。
値*は、プロパティの値を設定し、常に引用符で囲んだものです。以下の例は、align属性の3つの可能な値、 *left、center 、および right を示しています。

属性名と属性値は大文字と小文字を区別しません。ただし、World Wide Web Consortium（W3C）は、HTML 4勧告で小文字の属性/属性値を推奨しています。

例

<!DOCTYPE html>
<html>

   <head>
      <title>Align Attribute  Example</title>
   </head>

   <body>
      <p align = "left">This is left aligned</p>
      <p align = "center">This is center aligned</p>
      <p align = "right">This is right aligned</p>
   </body>

</html>

これは、次の結果が表示されます-

コア属性

HTML要素の大部分で使用できる4つのコア属性（すべてではありませんが）は-

Id
タイトル
クラス
スタイル

Id属性

HTMLタグの id 属性を使用して、HTMLページ内の要素を一意に識別できます。要素でid属性を使用したい主な理由は2つあります-

要素がid属性を一意の識別子として保持している場合、その要素とそのコンテンツのみを識別することができます。
Webページ（またはスタイルシート）内に同じ名前の2つの要素がある場合、id属性を使用して、同じ名前の要素を区別できます。

スタイルシートについては、別のチュートリアルで説明します。ここでは、id属性を使用して、次のように2つの段落要素を区別します。

例

<p id = "html">This para explains what is HTML</p>
<p id = "css">This para explains what is Cascading Style Sheet</p>

タイトル属性

*title* 属性は、要素の推奨タイトルを提供します。 *title* 属性の構文は、 *id* 属性の説明と似ています-

この属性の振る舞いは、それを運ぶ要素に依存しますが、多くの場合、カーソルが要素の上に来たとき、または要素のロード中にツールチップとして表示されます。

例

<!DOCTYPE html>
<html>

   <head>
      <title>The title Attribute Example</title>
   </head>

   <body>
      <h3 title = "Hello HTML!">Titled Heading Tag Example</h3>
   </body>

</html>

これは、次の結果を生成します-

ここで、「タイトル付き見出しタグの例」の上にカーソルを移動すると、コードで使用したタイトルがカーソルのツールチップとして表示されていることがわかります。

クラス属性

*class* 属性は、要素をスタイルシートに関連付けるために使用され、要素のクラスを指定します。 Cascading Style Sheet（CSS）を学習するときに、class属性の使用についてさらに学習します。 そのため、今のところそれを避けることができます。

属性の値は、スペースで区切られたクラス名のリストでもかまいません。たとえば-

class = "className1 className2 className3"

スタイル属性

スタイル属性を使用すると、要素内でカスケードスタイルシート（CSS）ルールを指定できます。

<!DOCTYPE html>
<html>

   <head>
      <title>The style Attribute</title>
   </head>

   <body>
      <p style = "font-family:arial; color:#FF0000;">Some text...</p>
   </body>

</html>

これは、次の結果を生成します-

この時点では、CSSを学んでいないので、CSSについてあまり気にせずに先に進みましょう。ここでは、HTML属性とは何か、コンテンツのフォーマット中にどのように使用できるかを理解する必要があります。

国際化の属性

3つの国際化属性があり、ほとんどの（すべてではありませんが）XHTML要素で利用できます。

dir
lang
xml：lang

dir属性

*dir* 属性を使用すると、テキストが流れる方向をブラウザに示すことができます。 次の表に示すように、dir属性は2つの値のいずれかを取ることができます-

Value	Meaning
ltr	Left to right (the default value)
rtl	Right to left (for languages such as Hebrew or Arabic that are read right to left)

例

<!DOCTYPE html>
<html dir = "rtl">

   <head>
      <title>Display Directions</title>
   </head>

   <body>
      This is how IE 5 renders right-to-left directed text.
   </body>

</html>

これは、次の結果を生成します-

_dir_属性を<html>タグ内で使用すると、ドキュメント全体でテキストがどのように表示されるかが決まります。別のタグ内で使用すると、そのタグのコンテンツだけのテキストの方向を制御します。

lang属性

*lang* 属性を使用すると、ドキュメントで使用されるメイン言語を指定できますが、この属性は、以前のバージョンのHTMLとの後方互換性のためにのみHTMLに保持されていました。 この属性は、新しいXHTMLドキュメントの *xml：lang* 属性に置き換えられました。

_lang_属性の値は、ISO-639標準の2文字の言語コードです。言語コードの完全なリストについては、リンク：/html/language_iso_codes [ HTML言語コード：ISO 639 ]を確認してください。

例

<!DOCTYPE html>
<html lang = "en">

   <head>
      <title>English Language Page</title>
   </head>

   <body>
      This page is using English Language
   </body>

</html>

これは、次の結果を生成します-

xml：lang属性

_xml：lang_属性は、_lang_属性のXHTML置換です。 _xml：lang_属性の値は、前のセクションで述べたISO-639国コードである必要があります。

汎用属性

これは、多くのHTMLタグで簡単に使用できる他の属性の表です。

Attribute	Options	Function
align	right, left, center	Horizontally aligns tags
valign	top, middle, bottom	Vertically aligns tags within an HTML element.
bgcolor	numeric, hexidecimal, RGB values	Places a background color behind an element
background	URL	Places a background image behind an element
id	User Defined	Names an element for use with Cascading Style Sheets.
class	User Defined	Classifies an element for use with Cascading Style Sheets.
width	Numeric Value	Specifies the width of tables, images, or table cells.
height	Numeric Value	Specifies the height of tables, images, or table cells.
title	User Defined	"Pop-up" title of the elements.

他のHTMLタグの調査に進むと、関連する例が表示されます。 HTMLタグと関連する属性の完全なリストについては、リンク：/html/html_tags_reference [HTMLタグリスト]への参照を確認してください。

Html-attributes

目次

HTML-属性

例

コア属性

Id属性

タイトル属性

クラス属性

スタイル属性

国際化の属性

dir属性

lang属性

xml：lang属性

汎用属性