[HTML講座] HTMLで意識したいこと、やっちゃいけないこと

Data

2019/12/21

Tag

HTML,CSS講座

意識したいこと

その文章がどういう意味をもっているのかを意識してマークアップをする
見出しが表している範囲をsectionで囲う

どういう意味をもっているのかを意識してマークアップをする

下記で紹介しているタグの意味を覚えましょう。

[HTML講座] HTMLについて

見出しが表している範囲を`section`で囲う

<section>
  <h2>1 title</h2>
  <p>1 description</p>
  <ul>
    <li>hoge1</li>
    <li>hoge2</li>
  </ul>
  <section>
    <h3>1.1 title</h3>
    <p>1.1 description</p>
    <section>
      <h4>1.1.1 title</h4>
      <p>1.1.1 description</p>
    </section>
  </section>
  <section>
    <h3>1.2 title</h3>
    <p>1.2 description</p>
    <section>
      <h4>1.2.1 title</h4>
      <p>1.2.1 description</p>
    </section>
    <section>
      <h4>1.2.2 title</h4>
      <p>1.2.2 description</p>
    </section>
  </section>
</section>

<section>
  <h2>2 title</h2>
  <p>2 description</p>
  <section>
    <h3>2.1 title</h3>
    <p>2.1 description</p>
  </section>
</section>

やっちゃいけないこと

見た目でタグを選択すること
見出しが存在しないのにsectionとかarticleを使う
見出しのレベルが間違っている
divをたくさん使おうとする
タグの構造が間違っている
文字を画像としているimgタグを、figureで囲う

見た目でタグを選択すること

HTMLは文書構造見た目でタグが変わることがないように。文章を理解してマークアップしましょう。

ダメな考え方と、それに対する対策

「文字が大きからhタグにしちゃえー」
- 大きいのは何を表しているのかを考えよう。
- 見出しを表している場合はhタグでよい。
- 文章の一部を強調したい場合はemかstrongを使おう。
「斜線だからiでしょ」
- 斜線にしている意味を考えよう。
- 目立たせてる場合はemかstrongを使おう

見出しが存在しないのに`section`とか`article`を使う

グループ化したいだけにsectionは使わないようにしましょう。その場合はdivでよいです。（divはstyleをつける際に考えると最初はよいかな）

<section> <!-- ここに見出しが存在しないため、もし囲いたい場合はdivでよい -->
  <dl>
    <dt>title1</dt>
    <dd>description1</dd>
  </dl>
  <dl>
    <dt>title2</dt>
    <dd>description2</dd>
  </dl>
</section>

見出しのレベルが間違っている

h1はページに一回しか使えません。見出しレベルは正しく。

<section>
  <h2>1 title</h2>
  <p>1 description</p>
  <ul>
    <li>hoge1</li>
    <li>hoge2</li>
  </ul>
  <section>
    <h4>1.1 title</h4> <!-- 見出しレベルは一つづつさ下がるようにね -->
    <p>1.1 description</p>
    <section>
      <h4>1.1.1 title</h4>
      <p>1.1.1 description</p>
    </section>
  </section>
  <section>
    <h4>1.2 title</h4>
    <p>1.2 description</p>
    <section>
      <h2>1.2.1 title</h2>
      <p>1.2.1 description</p>
    </section>
    <section>
      <h4>1.2.2 title</h4>
      <p>1.2.2 description</p>
    </section>
  </section>
</section>

<section>
  <h3>2 title</h3> <!-- ここは1とは別の項目としたいのでh2から始めましょう -->
  <p>2 description</p>
  <section>
    <h3>2.1 title</h3>
    <p>2.1 description</p>
  </section>
</section>

divをたくさん使おうとする行為

divは一旦考えずにcssをあてるときに考えるようにすると良いです。必要な場合にのみ加えるようにすると、シンプルな構造のマークアップになります。

<section>
  <div> <!-- すでにsectionタグで囲っているためさらにdivで囲う必要はありません -->
    <h2>title</h2>
    <p>description</p>

    <div> <!-- すでにulタグで囲っているためさらにdivで囲う必要はありません -->
      <ul>
        <li>hoge1</li>
        <li>hoge2</li>
      </ul>
    </div>
  </div>
</section>

タグの構造が間違っている

<dl>
メニュー <!-- dlのなかにはdt か ddしかいれられない -->
  <dt>menu title</dt>
  <dd>menu content</dd>
</dl>

<ul>
  <p>menu</p> <!-- ulの中にはliしかいれられない -->
  <li>menu1</li>
  <li>menu2</li>
</ul>

imgタグをとりあえずfigureで囲おうとする

figureはimg単体で成り立っている写真や図に使いましょう。

figureで囲うだめな例

<header>
  <figure><img src="./img/title.png" alt="title" /></figure>
</header>

titleとして文字が入っているためh1やpなどを使うのが正しいです。

ロゴなど意味のある文字を、デザインの表現として画像にしている場合
それにはテキストと同じような意味のあるタグをマークアップすべきです。

なるべくやらないほうがいいこと

liのなかにhタグ

liの中にhタグ

HTML的に間違いとは言いづらいですが、見出しが来たらsectionで囲うルールに反しているのでなるべくsectionで囲ってあげるようにしましょう。

<ul>
  <li>
    <h3>title1</h3>
    <p>text1</p>
  </li>
  <li>
    <h3>title2</h3>
    <p>text2</p>
  </li>
</ul>


<section>
  <h3>title1</h3>
  <p>text1</p>
</section>
<section>
  <h3>title2</h3>
  <p>text2</p>
</section>

見極めがむずかしいところ

section > h pとするのか、dl >dt dd とするのか

「section > h p」とするのか、「dl >dt dd」とするのか

<section>
  <h2>タイトル</h2>
  <p>タイトルの文章タイトルの文章タイトルの文章タイトルの文章</p>
</section>


<dl>
  <dt>タイトル</dt>
  <dd>タイトルの文章タイトルの文章タイトルの文章タイトルの文章</dd>
</dl>

hタグを使いたい場合

そのタイトルがこのサイトの１つの目次として成り立つ要素だと考えれる場合はhタグを使いたいです。

dl > dt ddタグを使いたい場合

基本的な考え方は「定義付きリスト」ですので、見出しとして扱うほどでもないけれど、関係性をマークアップしたい場合に使います。

もっとも適切なdl > dt ddの使い所は下記のような定義付きリストです。

<dl>
  <dt>SNS</dt>
  <dd><a href="">twitter</a></dd>
  <dd><a href="">instagram</a></dd>
  <dd><a href="">facebook</a></dd>
</dl>