この章では、Web制作でよく使うHTMLタグを学びます。
HTMLタグは、見た目ではなく意味で選びます。
同じように表示できる場合でも、情報の意味に合ったタグを選ぶことで、読みやすく、修正しやすいHTMLになります。
見出し
見出しには、h1からh6までのタグを使います。
数字が小さいほど大きな見出しです。
<h1>サイト全体の主題</h1>
<h2>大きなセクションの見出し</h2>
<h3>セクション内の小見出し</h3>見出しは、文字サイズを大きくするためだけに使うものではありません。
ページの構造を伝えるために使います。
たとえば、h2の中に含まれる小さな項目はh3にします。
見た目を大きくしたいだけなら、CSSで調整します。
本文と強調
本文にはpを使います。
強調したい言葉には、必要に応じてstrongを使います。
<p>この講座では、HTMLとCSSの基礎を学びます。</p>
<p><strong>見た目ではなく意味でタグを選ぶ</strong>ことが大切です。</p>strongは太字にするためだけのタグではありません。
意味として重要な言葉に使います。
単に見た目を太くしたい場合は、CSSのfont-weightを使います。
リンク
リンクにはaを使います。
href属性に移動先を書きます。
<a href="/contact/">お問い合わせ</a>外部サイトへリンクする場合は、別タブで開くことがあります。
<a href="https://example.com/" target="_blank" rel="noopener noreferrer">
外部サイトを見る
</a>リンクテキストは、クリック先がわかる内容にします。
「こちら」だけではなく、「お問い合わせフォームへ」のように書くと伝わりやすくなります。
画像
画像にはimgを使います。
srcには画像ファイルの場所、altには画像の代替テキストを書きます。
<img src="./images/service.jpg" alt="スタッフが打ち合わせをしている様子">altは、画像が表示されない時やスクリーンリーダーで読み上げる時に使われます。
装飾目的の画像で、内容として説明する必要がない場合は、空のaltにすることがあります。
<img src="./images/decoration.png" alt="">画像が情報を持っているのか、ただの装飾なのかを考えて指定します。
リスト
項目を並べる時は、リストを使います。
順番に意味がない場合はul、順番に意味がある場合はolを使います。
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul><ol>
<li>ヒアリングする</li>
<li>構成を作る</li>
<li>デザインする</li>
</ol>見た目として丸を消したい場合でも、情報としてリストならリストタグを使います。
丸や番号の見た目はCSSで調整できます。
セクション
ページのまとまりには、sectionを使うことがあります。
sectionは、見出しを持つような意味のあるまとまりに向いています。
<section>
<h2>サービス内容</h2>
<p>Webサイト制作、更新サポート、改善提案を行います。</p>
</section>ナビゲーションにはnav、補足情報にはaside、記事にはarticleを使うことがあります。
| タグ | 用途 |
|---|---|
header | ページやセクションの導入部分 |
main | ページの主な内容 |
section | 見出しを持つ内容のまとまり |
article | 独立した記事や投稿 |
nav | ナビゲーション |
aside | 補足情報 |
footer | ページやセクションの下部 |
最初からすべてを完璧に使い分ける必要はありません。
ただし、何でもdivで囲む前に、意味のあるタグが使えないか考えます。
divとspan
divとspanは、それ自体には特別な意味を持たないタグです。
divはブロックのまとまり、spanは文章中の一部を囲む時に使います。
<div class="card">
<h3>制作プラン</h3>
<p><span class="price">¥120,000</span>から対応します。</p>
</div>意味のあるタグがない時や、CSSでスタイルを当てるためにまとまりを作りたい時に使います。
ただし、すべてをdivだけで作ると、構造がわかりにくくなります。
buttonとa
クリックできる見た目のものには、buttonとaがあります。
役割が違うので、使い分けます。
| タグ | 使う場面 |
|---|---|
a | 別ページや別URLへ移動する |
button | ページ内で何かを操作する |
たとえば、詳しく見るリンクはaです。
メニューを開くボタンはbuttonです。
<a href="/service/">サービスを見る</a>
<button type="button">メニューを開く</button>CSSで見た目を同じにできても、HTMLとしての意味は違います。
この章のまとめ
- HTMLタグは、見た目ではなく意味で選ぶ
- 見出し、本文、リンク、画像、リストは実務でよく使う
altは画像の内容や役割に合わせて書く- まとまりには、
sectionやnavなど意味のあるタグを検討する - 移動は
a、操作はbuttonを使う