Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

HTMLのマークアップの方法について

More than 3 years have passed since last update.

HTMLマークアップの目的

・ブラウザに適切に認識される(SEOとか?)
・理解しやすい(他のプログラマーさんや、見返したとき用)
・修正がしやすい。

いろんなサイトのマークアップを見ていると、違いがあったので、自分なりに違いを考察してみます。今回AサイトとBサイトを見比べていたのですが、

Aサイト
特徴:最低限のhtml要素 + 構造化タグにclass/idを振る。

<html>
  <body>
    <header>...</header>
      <section class="frame">...</section>
    <footer>...</footer>
  </body>
</html>

Bサイト
特徴:構造化タグ頻繁に使用 + デザイン用のdiv等のタグをつくり、そこにid/classを振る。

<html>
  <body>
    <header>...</header>
      <main>...</main>
    <footer>...</footer>
  </body>
</html>

という特徴があったので、自分も、理解しやすいように、、

・構造化タグ使用。=>header、main、aside、nav、article 、section、h1等。
・デザイン用に別途タグを作る => 必要なときは。

としていこうと思います。
デザイン用に別途タグを作る理由は、構造に比べデザインの方が寿命が短く頻繁に更新される可能性が高いので、別に分けると良いとされています。(ただ自分でもしっかり例を踏まえて説明できるほどわかっていない。)

わかりやすい内容は、こちらの記事に書いています。↓
http://qiita.com/yuku_t/items/726a67d8ae74eea2540a

naogify
GISや人工衛星のデータを触ってます。本職はWebのエンジニアです。/OpenStreetMap/Osumium/Tellus/
https://naoki-is.me/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away