TECH I.S.

HTML属性


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


HTML属性

・すべてのHTML要素に属性を持つことができます。
・属性は要素に関する追加情報を提供します。
・属性は常に開始タグで指定します。
・属性は通常、次のような名前と値のペアで提供されます。名前="値"


href 属性

<a>タグはハイパーリンクを定義します。href属性は、リンク先のページのURLを指定します。

<a href="https://techis.jp/guide">テックアイエスガイド</a>

リンクの詳細については、HTMLリンクの章を参考にしてください。


src属性

<img>タグは、HTMLページに画像を埋め込むために使用されます。src属性は、表示する画像へのパスを指定します。

<img src="img_girl.jpg">

src属性でURLを指定する方法は2つあります。

1.絶対URL- 別のWebサイトでホストされている外部画像へのリンク。
例: src="https://techis.jp/images/img_girl.jpg"。

注:外部画像は著作権で保護されている場合があります。無断で使用した場合、著作権法に違反する可能性があります。さらに、外部イメージを制御することはできません。突然削除または変更される可能性があります。

2. 相対 URL- Web サイト内でホストされている画像へのリンク。ここでは、URLにドメイン名が含まれていません。 URLがスラッシュなしで始まる場合、現在のページに対する相対URLになります。例: src="img_girl.jpg"。 URLがスラッシュで始まる場合は、ドメインに対して相対的になります。例: src="/images/img_girl.jpg"。

ヒント:ほとんどの場合、相対URLを使用することをお勧めします。ドメインを変更しても壊れません。


幅と高さの属性

<img>タグには、widthheight(ピクセル単位)で画像の幅と高さを指定する属性を加えることもできます。

<img src="img_girl.jpg" width="500" height="600">


alt属性

<img>タグのalt属性は、何らかの理由で画像を表示できない場合に、画像の代替テキストを指定します。これは、接続が遅いか、src属性、またはユーザーがスクリーンリーダーを使用していることが原因の可能性があります。

<img src="img_girl.jpg" alt="Girl with a jacket">

存在しない画像を表示しようとするとどうなるか見てみましょう。

<img src="img_typo.jpg" alt="Girl with a jacket">

画像の詳細については、HTML 画像の章を参考にしてください。


スタイル属性

style属性は、色、フォント、サイズなどのスタイルを要素に追加するために使用されます。

<p style="color:red;">This is a red paragraph.</p>

スタイルの詳細については、HTMLスタイルの章を参考にしてください。


言語属性

<html>タグ内部のlang属性で、Webページの言語を宣言します。これは、検索エンジンとブラウザを支援するためのものです。

次の例では、言語として英語を指定しています。

<!DOCTYPE html> <html lang="en"> <body> ... </body> </html>

国コードは、言語コードをlang属性に追加することもできます。したがって、最初の2文字はHTML ページの言語を定義し、最後の2文字は国を定義します。

次の例では、言語として英語を指定し、国として米国を指定しています。

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

すべての言語コードは、HTML 言語コードリファレンスを参考にして下さい。


タイトル属性

title属性は、要素に関するいくつかの追加情報を定義します。

要素の上にマウスを置くと、title属性の値がツールチップとして表示されます。

<p title="I'm a tooltip">This is a paragraph.</p>


推奨 : 常に小文字の属性を使用する

HTML標準では、小文字の属性名は必要ありません。

title属性(および他のすべての属性)は、titleTITLEのように大文字または小文字で記述できます。

ただし、HTMLは小文字の属性を推奨しており、XTHMLのような厳密なドキュメントタイプは小文字の属性を要求します。

テックアイエスでは、常に小文字の属性名を使用しています。


推奨 : 常に属性値は引用符で囲む

HTML標準では、属性値を引用符で囲む必要はありません。

ただし、HTMLでの引用を推奨しており、XHTMLのような厳密なドキュメントタイプついては引用を要求します。

良い例

<a href="https://techis.jp/guide">テックアイエスガイド</a>

悪い例

<a href=https://techis.jp/guide>テックアイエスガイド</a>

場合によっては、引用符を使用する必要があります。次の例では、タイトル属性にスペースが含まれているため、正しく表示されません。

<p title="テックアイエスガイド">

テックアイエスでは、常に属性値を引用符で囲みます。


一重引用符か二重引用符か?

HTMLでは、属性値を二重引用符で囲むのが最も一般的ですが、一重引用符も使用できます。

属性値自体に二重引用符が含まれている場合、一重引用符を使用する必要がある場合があります。

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

またはその逆

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


この章のまとめ

・すべてのHTML要素は属性を持つことが出来る。
<a>タグのhrefは属性リンク先のページのURLを指定します。
<img>タグのsrc属性は表示する画像へのパスを指定します。
<img>タグのwidthheight属性 は画像のサイズ情報を指定します。
<img>タグのalt属性は画像の代替テキストを提供します。
style属性は色、フォント、サイズなどの要素にスタイルを追加するために使用されます。
<html>タグのlang属性は、ウェブページの言語を宣言します。
title属性は要素に関する追加情報を定義します。


HTML属性リファレンス

各HTML要素のすべての属性の完全なリストは、以下にリストされています。HTML属性リファレンス



プログラミング学習を加速させる

プログラミングをプロの講師に教えてもらいませんか。

テックアイエスのプログラミングスクールは初心者も大歓迎です。年齢制限もありません。転職・副業に強く、挫折させない手厚いサポートで稼ぐ力を身につけましょう!

スクールの詳細