リンク、リスト、画像の調査

完了

「ハイパーテキスト」という言葉は、Webページ上にテキスト以外のものを表示できることを意味します。 HTML には、他のリソースへのリンクを作成したり、ページに画像を追加したりする機能があります。

ハイパーリンク

ハイパーリンク (またはリンクのみ) を使用すると、ユーザーは他のものに移動することができます。 これは、Webサイトの別のページ、完全に別のWebサイト、または電子メールアドレスである可能性があります。 HTML の主な目標の 1 つは、これらの "ポインタ" をページに追加して簡単にアクセスできるようにすることでした。 これはリンクを通じて行われます。

リンクの作成に使用されるタグは a ( アンカーの略) です。 a タグの開始と終了の間のコンテンツは、ユーザーがリソースにアクセスできるようにするためのハイパーテキストになります。

参照されるリソースは、 (またはハイパーテキスト参照) と呼ばれるhrefを使用して示されます。 属性は開始タグ内に追加され、通常は名前と値 (キーと値のペアと呼ばれます) とペアになり、値は引用符で囲まれます。

<a href="some url">clickable text</a>

キーと値のペアはフォームで使用されます。 フォームに記入すると、姓と名を別々に求められる場合があります。 フォームには、 名 と空白のラベルと、 姓 と空白のスペースというラベルがあります。 ラベルは HTML 属性の キー のようなもので、空白スペースに何を入れるかが 値です。 HTML 属性では、キーと値が等号で結合され、それらが一緒に属していることを示します。

リソースインジケータ

リンクが指すことができるリソースには、さまざまな種類があります。 多くの場合、リンクは他のWebページやWebサイトを指しています。 ただし、リンクは、メールアドレス、ファイル(PDFドキュメントなど)、ビデオ、または画像を指すこともできます。

外部サイトへのリンクを作成するには、サイトの完全なアドレスを使用します。 たとえば、Microsoft のドキュメント サイトへのリンクを作成するには、次のようにします。

<a href="/">Microsoft Technical Documentation</a>

メールアドレスにリンクすることは可能です。 このタイプのリンクは、ユーザーの電子メールクライアントを自動的に開き、ディレクティブの後に指定されたアドレスでmailto:フィールドに入力します。

<a href="mailto:someone@example.com">Email us!</a>

アクセシビリティとリンク

作成している HTML ページにリンクを配置すると、開始タグと終了タグの間 (内側ではない) テキストが青色に変わります。 また、アドレスが非表示になっていることにも気付くでしょう。 最後に、単語が選択可能になったことに気付きます。 つまり、リソースに移動する単語を選択します。

リンクとして表示されるテキストは、リンク テキストと呼ばれます。 適切なリンクテキストを使用することは、すべてのユーザーがページにアクセスできるようにするための鍵です。 「ここをクリック」のようなフレーズは、ウェブをナビゲートするために使用されるスクリーンリーダーやその他のブラウザ以外のツールを混乱させます。 ベスト プラクティスとして、参照されているリソースについて簡単に説明するリンク テキストを常に使用してください。 アクセシビリティの確保についてさらに詳しく学ぶには、アクセシビリティ学習モジュールをご覧ください。

画像

imgタグは、ページ上に画像を表示するために使用されます。 他のほとんどの要素とは異なり、 img には終了タグがありません。 src 属性は、ページに表示する画像の場所を指すために使用され、alt は検索エンジンやスクリーン リーダーなどの画像の内容を説明します。

Von Bedeutung

height 属性と width 属性を使用して、イメージの表示高さと幅を指定できますが、イメージ ファイル自体のサイズは変更されません。 ベストプラクティスは、画像ファイルをページで使用するサイズにすることです。

<img src="headshot.png" alt="Picture of an employee.">

リストの作成

ページ上に情報のリストを表示する必要が頻繁にあります。 履歴書を作成するときは、以前の役割や資格をリストアップする必要があります。 HTML には、順序付きリストと順序なしリストという 2 種類のリストが用意されています。

リストを作成するには、まず作成するリストの種類を決定します。 順序付きリストは、数字 (デフォルト) または文字で順序付けられ、olには が使用されます。 順序なしリストは箇条書きを使用し、ulの場合は で識別されます。 liので示されます。

順序なしリスト

次の例では、順序なしリストが作成されます。

<ul>
    <li>First item</li>
    <li>Second item</li>
    <li>Third item</li>
</ul>

生成されたリストは、次のとおりです。

• 最初のアイテム
• 2番目のアイテム
• 3番目のアイテム

順序指定された一覧

次の例では、順序付きリストが作成されます。

<ol>
    <li>First item</li>
    <li>Second item</li>
    <li>Third item</li>
</ol>

生成されたリストは、次のとおりです。

1. 最初のアイテム
2. 2番目のアイテム
3. 3番目のアイテム