基本タグ

Webサイト制作で頻繁に使う、見出し・段落・リスト・リンク・画像の要素を学びます。

このLessonのゴール

• 内容に合った見出しと段落を使える
• 順序の有無でulとolを使い分けられる
• リンクと画像へ必要な属性を設定できる

最終制作物とのつながり

店舗サイトの紹介、特徴、メニュー、別ページへのリンクをHTMLで作ります。

見出しと段落

見出しは h1 から h6、文章の段落は p で表します。

<h1>私たちについて</h1>
<p>地域の素材を使った商品を販売しています。</p>

<h2>大切にしていること</h2>
<p>作り手の顔が見える商品を届けます。</p>

見出しレベルは文字の大きさではなく、文書の階層で選びます。ページの主題を h1、その中の大きな区切りを h2 と考えましょう。

リスト

順序のない一覧には ul、手順など順序のある一覧には ol を使い、各項目を li で囲みます。

<h2>用意するもの</h2>
<ul>
  <li>テキストエディタ</li>
  <li>Webブラウザ</li>
</ul>

<h2>公開までの手順</h2>
<ol>
  <li>HTMLを作成する</li>
  <li>表示を確認する</li>
  <li>サーバーへアップロードする</li>
</ol>

リンクと画像

<a href="company.html">会社情報を見る</a>

<img src="images/shop.jpg" alt="木製の棚に商品が並ぶ店内" />

リンク先は a の href 属性、画像ファイルは img の src 属性で指定します。img には画像の内容を伝える alt 属性も記述します。

alt は画像が表示できない場合や、スクリーンリーダーで閲覧する場合にも使われます。装飾だけの画像では alt="" とします。

実際に試してみよう

practice-site/index.htmlに店舗紹介セクションを作りましょう。店舗名をh1、紹介文をp、特徴の見出しをh2、3つの特徴をulとliで記述します。最後に「メニューを見る」というリンクを追加してください。

完了条件

• h1、p、h2、ul、li、aを使用している
• 見出しが内容の階層どおりに並んでいる
• リンクテキストだけで移動先の内容が分かる

まとめ

HTML要素は見た目ではなく、内容の意味で選びます。次のLessonでは、リンクと画像が別フォルダにある場合のパスを学びます。