リンクと、見た目を付ける目印

01 これは何？

リンク＊1は別のページへの入口です。class＊2は複数の部品に使える名前、id＊3は同じページ内で重複させない名前です。divは特別な意味を持たないまとまりを作り、CSSから見た目を指定するときにも使えます。

＊1 リンク：押すと別の場所へ移るもの。
＊2 class：部品をまとめて指定する目印。
＊3 id：ひとつの部品を特定する目印。

02 なぜ必要？

投稿をカード状に並べるとき、同じclassを付ければまとめて装飾できます。題名をリンクにすれば詳細へ進めます。画像には内容の説明も付けると、画像が表示できない場合や読み上げで使う場合にも内容を伝えられます。

03 最小限のコード・図

<div class="post-card" id="post-1">
  <h2><a href="/posts/1">はじめての投稿</a></h2>
  <p>今日はHTMLの役割が分かりました。</p>
</div>

04 ここだけ理解する

• aのhrefに移動先を書く。例の移動先ページは別途必要。
• 同じclassは何度使ってもよい。idは重複させない。
• 画像を使うときはimgのaltに適切な説明を付ける。

05 覚えなくていいこと

属性＊4の全種類は覚えなくてOKです。

＊4 属性：hrefやclassなど、タグに追加する情報。

07 AIの回答を見るポイント

• リンク先が意図した場所か。
• 同じidを複数の投稿に付けていないか。

08 だいたい分かったら、次へ

「理解できた」はいつでも取り消せます。記録せずに次へ進んでも大丈夫です。