2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

htmlのアクセシビリティについて -セマンティクス-

Posted at

htmlは見た目だけ整えれば良い訳では無いという話

htmlを学んでいる中でアクセシビリティとセマンティクスについて学んだのでメモ。
参考URLは下記。

メモ:このようなドキュメントは往々にして冗長であり、読むのに少々時間がかかることが多い。

セマンティクス

セマンティクス (semantics):「意味論」
すなわち、見た目だけ整った「ぐちゃぐちゃな」コード(スパゲティコード)では、下記点から不利である。

  • 開発しにくい
    buttonで囲むべきところをdivで囲んでしまうと、本来htmlで得られるbuttonの機能を失ってしまう。
    javascript等でdivbuttonの機能を強制的に付与することは可能だが、ページの読み込み・動作を遅延させるだけであり、スマートなコードとは言えない。

  • モバイル機器へのアクセシビリティ
    セマンティックに書かれたコードはファイルサイズの点でほぼ間違いなく軽量、レスポンシブにするのも簡単。

  • SEO
    検索エンジンのクローラーは、非意味的なdivなどに含まれるキーワードよりも、見出しやリンクなどの中のキーワードの方に重みを持たせてデータ収集している。
    よって、セマンティックに書くことでドキュメントがより顧客に見つけてもらいやすくなる。

セマンティックに書く(実例)

セマンティックに書かない場合

index.html
<!-- セマンティックに書かない場合 -->
<div class="article">
    <h1 class = "section-title">セマンティックに書く事の優位性</h1>
    <p>~~本文~~</p>
    <h1 class = "section-title">セマンティックに書かないと…?</h1>
    <p>~~本文~~</p>
</div>

セマンティックに書く場合(HTML5)

index.html
<!-- セマンティックに書く場合 -->
<article>
    <section>
    <h1 class = "title">セマンティックに書く事の優位性</h1>
    <p>~~本文~~</p>
    </section>

    <section>
    <h1 class = "title">セマンティックに書かないと…?</h1>
    <p>~~本文~~</p>
    </section>
</article>

ここで使用したarticleとsectionについては下記URLが詳しい。

下記ドキュメントもあるが、若干わかりづらい

2
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?