タグのalt属性とtitle属性の違いを図で詳しく説明

ページレイアウトでは必ず写真が使われますが、写真と言えばimgタグのalt属性とtitle属性がどのような場面で使われるかご存知ですか？この記事では、img タグ の alt 属性と title 属性の違いについて説明します。興味のある方は以下を読み続けてください。

alt 属性と title 属性の類似点と相違点

類似点: どちらも、画像に関連するコンテンツを表示するための小さなフローティング レイヤーを持ちます。

違いは以下のとおりです。

alt 属性の特徴:

① 画像が正常に読み込まれず表示できない場合、画像が表示されていない部分にテキストが表示されます。この機能は、アンロードされた画像の情報を提供することで、ユーザーが Web ページを閲覧しやすくするとともに、開発者が Web ページを保守しやすくすることを目的としています。

② 検索エンジンは、この属性のテキスト記述を通じて画像を取得できます。

title 属性の特徴:

title 属性は、ユーザーが任意の要素で使用できます。マウスを要素に移動すると、タイトルの内容が表示されます。これは、画像の説明として機能します。平たく言えば、alt 属性の本質は画像を置き換えることです。コンテンツ、タイトル属性の本質は画像の説明またはコメントです。

デモの例

alt 属性の効果は次のとおりです:

<img src="/static/imghw/default1.png"  data-src="img/frui.jpg"  class="lazy"   alt="图片未显示出来时，提醒你这是一张图片"/>

レンダリング:

タグのalt属性とtitle属性の違いを図で詳しく説明"/>画像が正常に表示されない場合は図のようになり、altで設定した内容のみが表示されます。

title 属性の効果は次のとおりです:

<img  src="/static/imghw/default1.png"  data-src="img/fruit.jpg"  class="lazy"   title="介绍这张图片是创意水果图片"/ alt="<img>タグのalt属性とtitle属性の違いを図で詳しく説明" >

レンダリング:

#画像に示すように、この画像は正常に表示されます。マウスを画像の上に置くと、画像を説明するタイトルの内容が表示されます。 タグのalt属性とtitle属性の違いを図で詳しく説明"/>

概要: 画像が正常に表示されるかどうかに関係なく、画像上にマウスを置くと、画像のタイトル属性が設定されるだけで、画像のテキスト説明が表示されます。画像に alt 属性のみが設定されている場合、画像の上にマウスを置くと、画像の alt 属性の代替テキストが表示されます。画像に title 属性と alt 属性の両方が設定されている場合、マウスホバー時に画像の title 属性のみが表示されます。以上、imgタグのalt属性とtitle属性の違いを中心に紹介しましたが、比較的簡単にご理解いただけたかと思います。

以上がタグのalt属性とtitle属性の違いを図で詳しく説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。