HTMLタグに属性を追加する方法

HTML言語には多数の要素が含まれています。 これらには、段落、見出し、リンク、イメージなどの一般的に使用されるWebサイトコンポーネントが含まれます。 ヘッダー、ナビゲーション、フッターなど、HTML5で導入されたいくつかの新しい要素もあります。 これらのHTML要素はすべてドキュメントの構造を作成して意味を与えます。 要素にさらに意味を加えるために、それらの属性を与えることができます。

基本的なHTML開始タグは<文字で始まります。 そのあとにタグ名が続き、最後に>をつけてタグを完成させます。 たとえば、開始段落タグは次のように記述されます。

属性をHTMLタグに追加するには、まずタグ名の後ろにスペースを入れます(この場合は "p"です)。 次に、使用する属性名の後ろに等号を追加します。 最後に、属性値は引用符で囲まれます。 例えば:

タグは複数の属性を持つことができます。 それぞれの属性をスペースで区切ります。

必須属性を持つ要素

HTML要素の中には、意図したとおりに動作させたい場合、実際には属性を必要とするものがあります。 image要素とlink要素は、この2つの例です。

image要素には "src"属性が必要です。 その属性は、その場所で使用するイメージをブラウザに指示します。 属性の値は、イメージへのファイルパスになります。 例えば:

この要素に別の属性、「alt」または代替テキスト属性を追加したことに気づくでしょう。 これは技術的に画像に必須の属性ではありませんが、アクセシビリティのために常にこのコンテンツを含めることをお勧めします。 alt属性の値にリストされているテキストは、イメージが何らかの理由で読み込まなかった場合に表示されるテキストです。

特定の属性を必要とする別の要素は、アンカータグまたはリンクタグです。 この要素には、「ハイパーテキスト参照」を表す「href」属性が含まれていなければなりません。これは、「このリンクがどこに行かなければならないのか」という素晴らしい方法です。画像要素が読み込む画像を知る必要があるように、リンクタグがどのように見えるかは次のとおりです:

>

このリンクにより、属性の値で指定されたWebサイトに人が連れてきます。 この場合、それはのメインページです。

CSSフックとしての属性

属性の別の使用法は、CSSスタイルの「フック」として使用される場合です。 Web標準では、ページの構造(HTML)をスタイル(CSS)とは別にしておく必要があるため、CSSでこれらの属性フックを使用して構造化ページをWebブラウザに表示する方法を指定します。 たとえば、HTMLドキュメントにこのマークアップを入れることができます。

その部分が黒(#000)の背景色と1.5emのフォントサイズを持つようにしたい場合は、これをCSSに追加します:

.featured {背景色:#000; font-size:1.5em;}

「特集された」クラス属性は、CSSでその領域にスタイルを適用するために使用するフックとして機能します。 私たちが望むのであれば、ID属性もここに入れることができます。 クラスとIDはどちらもユニバーサル属性です。つまり、どの要素にも追加できます。 また、特定のCSSスタイルを対象にして、その要素の視覚的外観を判断することもできます。

Javascriptについて

最後に、特定のHTML要素の属性を使用することも、Javascriptで使用することができます。 特定のID属性を持つ要素を探しているスクリプトがある場合、これはHTML言語のこの共通部分のもう1つの使用です。