前編では、HTML の基本構造とよく使うタグについて学びました。中編では、タグに情報を追加する「属性」と、意味を持ったタグの使い方について説明します。
3. タグに情報を追加する「属性」
タグには、属性と呼ばれる情報を追加することができます。属性を使うことで、タグにより詳しい情報を与えたり、タグの動作を変えたりすることができます。
属性は、開始タグの中に、属性名="属性値" の形で記述します。
html
<img src="images/logo.png" alt="ロゴ画像">この例では、<img> タグに src 属性と alt 属性が追加されています。src 属性は画像ファイルのパスを指定し、alt 属性は画像が表示されない場合に代わりに表示されるテキストを指定しています。
id と class って何が違うの？
よく使う属性の一つに、id 属性と class 属性があります。どちらもタグを識別するために使われますが、いくつかの違いがあります。
id属性：ページ内で一意である必要があります。つまり、同じid属性値を複数のタグに使うことはできません。主に JavaScript や CSS で特定の要素を指定するために使われます。class属性：複数のタグに同じclass属性値を使うことができます。主に CSS で複数の要素に同じスタイルを適用するために使われます。
html
<h1 id="main-title" class="heading">ウェブサイトのタイトル</h1>
<p class="text">これは段落です。</p>
<p class="text highlight">これも段落です。</p>この例では、<h1> タグには id="main-title" と class="heading" が、<p> タグには class="text" が指定されています。id="main-title" はページ内でこの <h1> タグだけに使える一意な名前です。一方、class="text" は複数の <p> タグに使われており、これらの段落に共通のスタイルを適用することができます。
よく使う属性をチェック！
id と class 以外にも、よく使う属性はたくさんあります。ここでは、いくつかの例を紹介します：
<a>タグ：href：リンク先の URL を指定します。target：リンクをどこに開くかを指定します。_blankを指定すると、新しいタブで開きます。
<img>タグ：src：画像ファイルのパスを指定します。alt：画像が表示されない場合に代わりに表示されるテキストを指定します。width：画像の幅をピクセル単位で指定します。height：画像の高さをピクセル単位で指定します。
<input>タグ：type：入力欄の種類を指定します。text,password,email,submitなど、様々な種類があります。name：入力欄の名前を指定します。フォームのデータを送信する際に使われます。value：入力欄の初期値を指定します。placeholder：入力欄に薄く表示されるヒントテキストを指定します。
<form>タグaction：フォームの送信先するURLを指定します。method：フォームの送信方法を指定します。getかpostが入ります。
これらの属性を使いこなすことで、より表現力豊かなウェブページを作ることができます。
コラム：タグと属性、どっちがどっち？
HTML を学び始めたばかりの頃は、タグと属性の区別がつきにくいかもしれません。
そんなときは、**タグは「名詞」、属性は「形容詞」**と考えると分かりやすいかもしれません。
例えば、「<img> タグ」は「画像」という名詞です。「src 属性」は「どの画像ファイルか」を指定する形容詞です。
「<a href="https://www.google.com/">Google へ移動</a>」という例では、<a> タグは「リンク」という名詞です。「href 属性」は「どの URL へ移動するリンクか」を指定する形容詞です。
このように考えると、タグと属性の関係が理解しやすくなるのではないでしょうか？
4. 意味を持ったタグを使おう（セマンティック HTML）
HTML5 では、セマンティック HTML と呼ばれる、文書構造をより明確にするためのタグが導入されました。セマンティック HTML を使うことで、検索エンジンやスクリーンリーダーなどの支援技術がウェブページの内容を理解しやすくなり、アクセシビリティの向上にもつながります。
以前は、ウェブページのレイアウトを組むために <div> タグが多用されていました。しかし、<div> タグだけでは、その部分がウェブページのどの部分を表しているのかが分かりにくいという問題がありました。
セマンティック HTML では、<div> タグの代わりに、以下のような意味を持ったタグを使うことが推奨されています。
<header>, <nav>, <main>, <article>, <aside>, <footer>
<header>：ウェブページやセクションのヘッダーを表します。サイトのロゴやナビゲーションなどを含めることが多いです。<nav>：ナビゲーションを表します。グローバルナビゲーションやパンくずリストなどに使われます。<main>：ウェブページの主要なコンテンツを表します。<main>はページ内に一つだけ記述します。<article>：ブログの記事やニュース記事など、それ自体で独立したコンテンツを表します。<aside>：補足的な情報を表します。サイドバーや広告などに使われます。<footer>：ウェブページやセクションのフッターを表します。コピーライト表記や連絡先などを含めることが多いです。
html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>セマンティック HTML の例</title>
</head>
<body>
<header>
<h1>ウェブサイトのタイトル</h1>
<nav>
<ul>
<li><a href="#">ホーム</a></li>
<li><a href="#">サービス</a></li>
<li><a href="#">会社概要</a></li>
<li><a href="#">お問い合わせ</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h2>記事のタイトル</h2>
<p>記事の本文...</p>
</article>
<aside>
<h3>関連情報</h3>
<ul>
<li><a href="#">関連記事1</a></li>
<li><a href="#">関連記事2</a></li>
</ul>
</aside>
</main>
<footer>
<p>© 2023 My Website</p>
</footer>
</body>
</html><div> と <span> の使い分け
<div> と <span> は、どちらも汎用的に使えるタグですが、いくつかの違いがあります。
<div>：ブロックレベル要素です。前後に改行が入り、幅いっぱいに広がります。主に、セクションやコンポーネントをまとめるために使われます。<span>：インライン要素です。前後に改行は入らず、要素の幅は内容に合わせて伸縮します。主に、テキストの一部にスタイルを適用したり、JavaScript で操作したりするために使われます。
html
<div>
<p>これは <span>ブロックレベル要素</span> の中に <span>インライン要素</span> が入った例です。</p>
</div>適切なタグを使うことで、ウェブページの構造が明確になり、メンテナンス性も向上します。