HTML5の基本構造の把握
引き続き、HTML5について習得しましょう。
Contents
とにかく実践あるのみなので、テキストエディタを開いて、HTMLファイルを実際に作ってみましょう。
まず最初はタグに見慣れること、とにかく見る事、読む事、読んだら次は書く事。 ….これが大事です。
HTML5の基本構造は、下図の様になっています。

実践あるのみ。早速コピー&ペーストでもいいので、書いて作りましょう。
HTML5ソース (拡張子はhtml. ファイル名はtestなど ex. test.html)
※イメージ画像は何でもいいです。
実際に書く文章を見出しをつけたまとまりにしたら、そのアウトラインを意識して書く事がポイントとなってきます。
タグの意味の解説
今回初めて出て来たタグだけ、意味を解説します。頭に入れておきましょう。
section 何らかの見出しをつけて作った文章のかたまり(コンテンツ)
nav ナビゲーション
article 独立している文章コンテンツ
aside 副次的な文章コンテンツ
h1~h6 見出し
pre インデントや改行
(※ header, footerは、今までにも出来てきましたが、全体のコンテンツの頭の部分と足の部分です。)
その他によく使うタグは?
ulタグとolタグと、dl タグ とdt、ddタグ
ulタグは、箇条書きの文章を書く時に使います
olタグは、番号つき箇条書き文章を書く時に使います
両方共、liタグでリスト化します。
例えば、ブログのアーカイブを作る時にも使えます。
Archives
- 2016/10/30
- 2016/11/30
- 2016/12/30
ブラウザ表示させると
<>のタグは見えずに文字だけ表示されます。
では、dlタグやdtタグ、ddタグは何に使うのでしょうか。
dlタグは definition list 、dtタグは definition term 、ddタグは definition descriptionの略です。
それぞれ日本語にすると
・定義されたリスト
・定義された用語
・定義された説明 ということになります。
これらのタグは、ulやolのようにマークも数字も表示したくないけれど、ある定義でまとめられる内容である場合に使うタグです。
下記サンプルの(HTML5の)開発日記であれば、その内容について同じ定義をもつものをまとめられる機能を持ちます。
・・・・・
どうでしたか?やってみましたか?
意外と簡単ですよね!
ではこれで一通りのHTMLタグを学んで来たので、HTMLは一旦終わりになります。
今度はCSSを使ってスタイルを見やすくバランスを整えて、ページを素敵にしていきたいと思います ! もっと本格的なタグを学習して、実際にCSSでスタイリングしていきましょう。
ブラウザでの表示を確認してみる
最初に作ったhtmlファイルは、以下の様に表示されるはずです。
こちらから確認できます =>
今回はハロウィンをテーマに作りましたが、思いつくものがなければ
例えばWEB開発のブログや料理のレシピ紹介をテーマにしてはいかがでしょうか。
A4用紙に好きなことについての文章と見出しを作り、それを骨組みしてみると頭の中でまとまります。
その構造を意識しながら、今度は実際にテキストエディタに向かって、
articleに当てはまる部分は〜で、asideは〜で、h1は〜で・・・、
という風に考えて組み立てながら、ソースコードを書いていくといいでしょう。

図)HTML5での重要なタグ
(※もし文字化けする場合は、wwwブラウザを変更してください)
下記の図はSafariですが、ほかのwwwブラウザでもほとんど同じです。

では、今日も最後までお読み頂きありがとうございました!
みなさまの幸運を心よりお祈りしています。