HTML チュートリアル: title 属性と alt 属性

HTML チュートリアル: title 属性と alt 属性

XHTML は CSS レイアウトの基礎です。jb51.net は常に XHTML 知識の習得を重視し、セマンティクスとドキュメント構造に注意を払ってきました。 title 属性と alt 属性から私が得る最も直感的な感覚は、それらがドキュメントの適応性を向上させ、キーワード密度を合理的に高めることができるということです。 XHTML 標準では、画像の alt 属性が必須です。
XHTML は CSS レイアウトの基礎です。jb51.net は常に XHTML 知識の習得を重視し、セマンティクスとドキュメント構造に注意を払ってきました。 title 属性と alt 属性から私が得る最も直感的な感覚は、それらがドキュメントの適応性を向上させ、キーワード密度を合理的に高めることができるということです。 XHTML 標準では、画像の alt 属性が必須です。
alt 属性<br />画像、フォーム、またはアプレットを表示できないユーザー エージェント (UA) の場合、alt 属性を使用して代替テキストを指定します。置換テキストの言語は、lang 属性によって指定されます。 Alt 属性 (「タグ」ではなく「属性」という単語に注意) には代替の説明が含まれており、画像と画像ホットスポットに必須です。 img、area、input 要素 (applet 要素を含む) でのみ使用できます。入力要素の場合、alt 属性は送信ボタンの画像を置き換えるために使用されます。
例: ドキュメント内の画像を見ることができない閲覧者に対してテキストによる説明を提供するには、alt 属性を使用します。これには、画像表示をネイティブにサポートしていないブラウザを使用するユーザー、または画像表示をオフにしているブラウザを使用するユーザー、視覚障害のあるユーザー、スクリーン リーダーを使用するユーザーが含まれます。 Alt テキストは、追加の説明テキストを提供するのではなく、画像を置き換えるために使用されます。
代替テキストを書く前に慎重に検討し、画像を見ることができない人々に実際に情報を提供し、文脈上意味を成すものであることを確認してください。装飾画像の場合は、「blue bullet」や「spacer.gif」などの無関係な代替テキストを使用する代わりに、空の値(引用符の間にスペースを入れない alt="")を使用します。これを省略しないでください。省略すると、一部のスクリーン リーダーが画像ファイル名を直接読み取り、Lynx などのテキスト ブラウザーが画像ファイル名を表示するため、閲覧者にとって役に立ちません。
テキストを含む画像に代替テキストを設定するのが最も簡単です。通常、画像に含まれるテキストは alt 属性値として使用できます。
title属性は、それが設定されている要素に関するアドバイス情報を提供します。
title 属性は、base、basefont、head、html、meta、param、script、title を除くすべてのタグで使用できます。しかし、それは必要ありません。おそらくそれが、多くの人がいつそれを使うべきか理解していない理由でしょう。
必須ではない追加情報を提供するには、title 属性を使用します。ほとんどのビジュアル ブラウザーでは、マウスを特定の要素の上に移動するとタイトル テキストがツールヒントとして表示されますが、タイトル テキストをどのようにレンダリングするかは製造元が決定します。一部のブラウザでは、ステータス バーにタイトル テキストが表示されます。たとえば、Safari ブラウザの初期バージョンなどです。
title 属性の適切な使用法は、特にリンク自体がリンクの目的を明確に伝えていない場合に、リンクに説明的なテキストを追加することです。これにより、訪問者はリンク先のページを知ることができるため、興味のないページが読み込まれることがなくなります。もう 1 つの潜在的な用途としては、日付やその他の重要でない情報など、画像に追加のキャプションを提供することが挙げられます。
title 属性値は alt 属性値よりも長くすることができます。ただし、一部のブラウザでは長いテキスト (ツールヒントなど) が切り捨てられることに注意してください。たとえば、Mozilla ベースのブラウザでは最初の 60 文字しか表示できません。これは Mozilla のバグと考えられており、注意が必要です。

<<:  CSS でのフィルタープロパティの使用に関する詳細な説明

>>:  DockerにTomcat8をインストールする方法

推薦する

Webスキル: 複数のIEバージョンの共存ソリューション IETester

私のおすすめ複数のIEバージョンの共存のためのソリューション以前に IE6、IE7、IE8 の共存に...

Dockerのデフォルトネットワークセグメントを変更する実装方法の分析

背景同社のサーバーはすべて Alibaba Cloud ECS ホストを購入しています。デフォルトの...

CentOS 7 で MySQL 接続数が 214 に制限される問題の解決方法

問題を見つける最近、プロジェクトで問題が発生しました。接続が多すぎるため、「接続が多すぎます」という...

Docker 可視化グラフィックツール portainer の詳細な説明

目次1. ポーテナーの紹介2. Portainer アーキテクチャの概要3. Portainerのイ...

MySQL 8.0.15 winx64 解凍版のインストールと設定方法のグラフィックチュートリアル

この記事では、MySQL 8.0.15 winx64解凍版のインストールと設定方法を紹介します。具体...

CentOS7.5 MySQLのインストールチュートリアル

1. まずシステムにmysqlがインストールされているかどうかを確認します rpm -qa | gr...

独自の YUM リポジトリを作成する手順

簡単に言うと、ウェアハウスとして使用される仮想マシンの IP は 192.168.149.129 で...

Linux ブートシステム方式の分析

この記事では、Linux システムを起動する方法について説明します。ご参考までに、詳細は以下の通りで...

Linux bash: ./xxx: バイナリ ファイルを実行できません エラー

今日、Ubuntu 用の小さなツールを顧客に送りましたが、ユーザーはそれを受け取った後、実行できませ...

Mysql での結合操作

結合の種類1. 内部結合: 結合関係を持つ 2 つのテーブル内のフィールドは、結合関係を満たすレコー...

CSSの絶対と相対について

冒頭にこう書かれています:アブソリュートは言った。「親戚よ、私はあなたを私の人生で見たくない!」なぜ...

アイデアのパッケージ化とクラウドサービスへのアップロードにおけるプロジェクトプロセスの分析

1つ。まず、アイデアとしてパッケージ化する必要があります。私はSpringbootフレームワークプロ...

Linux で g++ を使用してプログラムをコンパイルする際の -I (大文字の i)、-L (大文字の l)、-l (小文字の l) の機能の詳細な説明

初心者の Linux ユーザーとして、私は単純なgcc/g++操作を何度も使用してきましたが、少し複...

TSで最も一般的な宣言マージ(インターフェースマージ)

目次1. マージインターフェース1.1 非関数メンバー1.2 関数メンバー序文:今日お話ししたいのは...

ドメイン名を介してプロジェクトにアクセスするnginx + tomcatの例

ドメイン名を使ってプロジェクトにアクセスする方法が気になったのですが、自分でドメイン名を取得するのは...