実習２日目の廣田です。
寒い日が続いていますね。
世界一寒がりな私は死にそうです。
今日は、HTML5 の増えた要素について書こうと思います。
学校では、xhtml1,0を学習しましたがHTML5 は軽くしか触れていません。
もちろん基礎であるxhtmlの方が難しく先に勉強しておく内容とは思います。
ですが、求人情報を拝見すると
HTML5 CSS3 を使用できる人
と書いている事も多いので、やはりしっかり勉強しておくべきと思いました。
目次
１、HTML5のよく使う５つの要素とは
２、sectionタグとは・・・！？
３、article要素とは・・・！？
４、aside要素とは・・・
５、まとめ
１、HTML5 のよく使う５つの要素とは
HTML5 では、タグがまとめられていてシンプルで書くのが楽になりました。
全て書くと大変なので、良く使われるものを今回は書きます。
| <section> | 一つのまとまりであることを示す |
|---|---|
| <article> | 独立した記事であることを示す |
| <aside> | 余談・補足情報であることを示す |
| <header> | ヘッダーである事を示す |
| <footer> | フッターであることを示す |
XHTMLでは、ヘッダーやフッターも
<div id=”header”>○○</div>
<div id=”footer”>○○</div>
といちいち書いていましたが、
HTML5 からは<header>でくくればいいので、スッキリしますよね。
学校で先生が、
「<div>まみれになってわけが分からなくなる人が多いので気を付けて」
とおっしゃっていましたが、本当にその通りになってパニックを起こす事も多々ありますよね！！笑
<section><article><aside>は、簡単にいえば、ひとつのまとまりや記事を示すものです。なので、<div>まみれから回避できます！
これらは次に説明します。
２、section要素とは・・・！？
<section>要素とは、<div>要素より目的がはっきりしています。
意味的に有意義な方法でグループ化されたコンテンツの一般的なセクションに適用され、見出し要素の利用が強く推奨されています。また、文章に出てくる節や章といった、一区切りの塊にも使用されます。
３、article要素とは・・・！？
サイト内で自己完結しており、それ自体で独立したコンテンツとして成り立つもの<article>要素の内容だけ抜き出して違和感がないものが<article>要素です。
<artcle>内にさらに<article>を入れ子にして使うことも出来ますが、大枠の<article>の内容に対して中の<article>も、その内容に関連性がなければいけません。
4,aside要素とは・・・
<aside>要素は、メインコンテンツでないセクションに使います。補足的な情報や、サイドバー、広告などに使用されます。
まとめ
何だか、きちんと言葉にすると難しいので、私はこう考えるようにしています。
・もし要素内のコンテンツに意味がないのであれば、div要素を使います。
・意味があるコンテンツで、しかも独立しても成り立つのであれば、article要素を使います。
・そうでなければ、section要素を使う
・意味はあるけど、サブ敵な内容や広告なのはarticle要素を使用。
たくさん覚える要素があるので大変ですが、
覚えれば覚えるほど自分が書きやすく楽に書けると思います。
あとは、慣れだと思うので、書いて書いてかきまくろうと思います！笑
今週もお疲れ様でした。