clover.blue

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

Data
2019/10/18
Tag

意識したいこと

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

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

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

見出しが表している範囲を`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タグでよい。
    • 文章の一部を強調したい場合はemstrongを使おう。
  • 「斜線だからiでしょ」
    • 斜線にしている意味を考えよう。
    • 目立たせてる場合はemstrongを使おう

見出しが存在しないのに`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として文字が入っているためh1pなどを使うのが正しいです。

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

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

  • 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>