allWebクリエイター塾　受講の評価、感想、講義内容を綴ったブログ: HTML5の要素を理解してマークアップをしよう

HTML5＆CSS入門基礎講座を受講してきました。
HTML5の勉強をしたいと思い、今までと何が違うのかを調べて、「宣言が簡単になったんだな〜」レベルの認識でしたが、どうして変更されたのか？から勉強することができました。

文章構造をしっかり作って検索でも上位になりやすくしよう

「検索で上位になりやすいコーディングをします」と言えるのがプロのコーディングという気がします。文章構造を整理して、内容を明確にすることがその一歩とのことです。

HTML5でのおおまかな文章構造だけ見るとそこまで変化が、doctype、html、head、title、meta、body。これだけ見ると、さほど変化は感じません。
例としてDOCTYPEを比較して、確認してみます。

◯DOCTYPE
HTML4.01のStrict DTDの場合は、、

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

HTML5の場合は、、

<!DOCTYPE html>

短くなりました！

講座では、きちんと紹介していただけますが、書ききれませんので参考サイトのご紹介です。

・次世代 HTML 標準 HTML5 情報サイト

http://www.html5.jp/tag/models/index.html

こちらに、コンテンツの種類が紹介されています。このカテゴリー分けを意識していくとすっきりとしたコーディングができそうな気がしてきます。

要素が新たに加わったり、仕様が変更されたりしています。いくつか、ピックアップして確認して行きます。

<header>
<h1><img src="logo.png" alt="まめサイト" /></h1>
<p>おいしいまめだけを紹介します</p>
</header>

上部のロゴやキービジュアルなどの部分が当てはまります。見出しと組み合わせることが多いかと思います。

<nav>
<ul>
<li>おいしい豆とは？</li>
<li>豆商品一覧</li>
<li>豆料理レシピ</li>
</ul>
</nav>

文章中のリストとは異なります。グローバルナビゲーション等、主要なものに使用すると良さそうです。

完結された文等に使用します。ブログ記事やニュースリリースなどに使用できそうでね。

<article>
<dl>
<dt>豆ごはんがワンランクアップする調理メソッド</dt>
<dd>2013.04.12</dd>
<dd>豆にきちんと水分を含ませ…</dd>
</dl>
</article>

<section>
<h1>豆ごはんの種類</h1>
<p>豆ごはんにはたくさんの種類の…</p>
</section>

感覚として、divと似てる。。と覚えてはいけませんね。いくつかの要素をまとめる際に使用します。aside要素というのもありますので、使い分けることでより要素の意味が整理されてきます。

フッタにナビゲーションやコピーライトなど、をまとめます。header要素と同じようなイメージですね。

上記、のは主要なものですが、他にもたくさんの要素が変更または追加されているとのこと。個人的に、こちらでひとつだけ挙げるとしたら、addressです。店舗サイトなどで任意の住所等を記述したり、問い合わせでメールアドレスをのせる場合にも使用することで、ブラウザが認識しやすくなります。

個人的な話ですが、divで何でもグループ化してしまった経験があります。HTML5では今まで以上に、要素をグループ化して終わりではなく、そのグループが何を表すのかを明確にすることが、さらに重要になったのだと勉強になりました！