HTMLの骨組みができたら、文章、リスト、リンク、画像を配置します。それぞれの要素には役割があり、正しく使うとブラウザや検索エンジン、支援技術が内容を理解しやすくなります。
ここでは自己紹介ページの内容を追加しながら、属性とパスの考え方も確認します。
文章とリストを配置する
段落にはp、順序のない項目にはul、手順のように順序が重要な項目にはolを使います。リストの各項目はliで囲みます。
次の画像は、「文章とリストを配置する」で扱うコードや構成をブラウザで表示した結果です。
<section>
<h2>学習していること</h2>
<p>Web制作の基礎を学んでいます。</p>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</section>リンクで別の場所へ移動する
リンクにはa要素を使い、href属性へ移動先を指定します。リンクの文章だけで移動先が分かるようにし、「こちら」だけのリンク名は避けます。
次の図では、「リンクで別の場所へ移動する」の仕組みや関係を確認できます。
<a href="about.html">プロフィールを見る</a>
<a href="https://example.com/">参考サイトを見る</a>
<a href="#contact">お問い合わせへ移動する</a>同じサイト内のファイルは相対パス、外部サイトはhttps://から始まるURLで指定します。新しいタブで開く必要がある場合だけ、動作と安全性を確認してtargetを使います。
画像の場所と内容を伝える
画像にはimg要素を使い、srcへ画像ファイルの場所、altへ画像の代わりになる文章を指定します。幅と高さも指定すると、読み込み前後のレイアウト変化を抑えられます。
次の図では、「画像の場所と内容を伝える」の仕組みや関係を確認できます。
<img
src="images/profile.jpg"
alt="制作者のプロフィール写真"
width="640"
height="480"
>装飾だけの画像は空のalt=""にします。画像内の文字が内容として必要なら、同じ情報を本文でも読めるようにしてください。
リンクとボタンを使い分ける
別ページや別の場所へ移動する操作はリンク、メニューの開閉や表示内容の変更などページ内の処理はbuttonを使います。見た目がボタンでも、移動するならリンクです。
この違いをHTMLで表すことで、キーボード操作や支援技術でも操作の目的が伝わります。
表示と操作を確認する
文章、リンク、画像を組み合わせると、次のような内容のあるページを作れます。
- 画像が表示され、Networkで404になっていないか確認する
- すべてのリンクを実際に開く
- Tabキーでリンクへ移動できるか確認する
- 画像が表示されない状態でもaltで内容が伝わるか確認する