HTML、文書構造の作り方

HTMLの文法では、関連性のあるものを1つのグループにまとめなければなりません。
逆に、関連性のない物は別のグループに分けなければなりません。
といってもHTMLやコンピューターに限った事ではなく、たとえば衣服とおもちゃを一緒の箱にしまうことがないのと同じです。

記事とコメントをHTML構造上では一緒にして、デザインだけ離す(CSSを駆使して離れている場所に表示させる)ようにします。

記事と記事に対するコメントは関連性がありますので、記事と同じグループに入ります。

<div id="main" class="article">
  <div class="pseudo-section"><!-- 記事はarticleに対する主体のため、このdiv(section)はない方が良い。デザイン上必要ならsectionではなくdivで。 -->
記事
  </div>
  <div class="section">
    コメント
  </div>
</div>

HTML4では
<div>でグループ化していましたが、HTML5では<article><section><aside><footer>などでグループ化します。
タグ名が変わっただけで基本的な文法そのものは変わりません。

W3Cに書かれているように、
記事とコメントを1つのグループに入れ、そのグループの外側にサイドバーを記述します。

<div id="main" class="article">
  記事
  <div class="aside">
    記事に関係する余談、注釈など
  </div>
  <div id="related-pages" class="nav">
    関連記事へのリンクなど
  </div>
  <div class="section">
    コメント
  </div>
</div>
<div id="nav" class="nav">
  記事に関係のない、サイト全体のナビゲーションなど
</div>
<div id="meta" class="aside">
  ログインフォームなど
</div>
<div id="ads" class="aside">
  広告
</div>

このように文書構造を決定、作成した後、デザインに取りかかります。
レイアウトはHTMLを変更せずに、CSSだけで行うことが推奨されます。


いくつかのグループを、デザイン枠を付けるために
<div>で囲ったりすると、最初の例と同じ、それらのグループが1つのグループと見なされます。
デザイン枠で囲むということを、HTML構造としてグループ化されている事を明示しているに過ぎません。

<div id="nav" class="nav">
  ナビゲーション
</div>
<div id="miscellanous" class="aside">
  <div class="section">ログインフォーム</div>
  <div class="section">広告</div>
</div>

このパターンがあれば、基本的なレイアウトはたいてい作れると思います。
http://blog.html.it/layoutgala/index.html

classやidの付け方ですが、左に表示しているから#leftとしたり、サイドバーに対して#sidebarというのは不適切です。
いわゆる1カラムデザインの場合に「サイド」ではなくなるからです。
CSSだけでレイアウトを変更できるということは、#sidebarというidを付けている物に対して、上下に配置する事も可能になり、配置場所とidが指し示す内容の不一致が発生します。
表示場所ではなく、そのブロックの内容、意味をidやclassにするのが推奨されます。

6 Responses

Page 1 of 1
  1. Ibnu
    Ibnu at | | Reply

    I found it more easier and fun learning HTML, thanks to this tutorial.

  2. kamagra
    kamagra at | | Reply

    Most of the girls are choosing the basic sheepskin slip shoes, as
    they are comfortable and stylish. Thread and stitching – thread used in stitching is always the same as
    the colour of the leather. Wearing an elegant UGG boot with tight jeans can give you a classy and beautiful
    look.

  3. ticket busters miami
    ticket busters miami at | | Reply

    Pandangan Sungai Arno yang indah dengan Ponte Vecchio sebagai principal characteristic ini kelihatan dari
    salah satu daripada jambatan yang kaki lalui ketik dalam perjalanan ke Piazzale Michaelangelo.

  4. seo backlinks tutorial
    seo backlinks tutorial at | | Reply

    Crear Tienda Virtual nos cube como conseguir backlinks de Page Rank alto
    Pero la técnica es ¡matando nuestro perfil Google +!

  5. fall out boy
    fall out boy at | | Reply

    Hello mates, how is the whole thing, and what you want to say about this paragraph, in my view its in fact
    awesome for me.

  6. health advice
    health advice at | | Reply

    Processed sugar, salt and refined grain products are not good for your system,
    each making the body overwork in order to process them. When people are able to cope with stress, dropping body
    weight will be much easier. Pick an interest that you would
    like to learn more about, join a club focused on that particular hobby, and form connections with those involved.

Leave a Reply