HTML５の基本構造の把握

引き続き、HTML５について習得しましょう。

とにかく実践あるのみなので、テキストエディタを開いて、HTMLファイルを実際に作ってみましょう。

まず最初はタグに見慣れること、とにかく見る事、読む事、読んだら次は書く事。  ….これが大事です。

HTML５の基本構造は、下図の様になっています。

実践あるのみ。早速コピー＆ペーストでもいいので、書いて作りましょう。

HTML５ソース (拡張子はhtml. ファイル名はtestなど ex. test.html）

※イメージ画像は何でもいいです。
実際に書く文章を見出しをつけたまとまりにしたら、そのアウトラインを意識して書く事がポイントとなってきます。 

タグの意味の解説

今回初めて出て来たタグだけ、意味を解説します。頭に入れておきましょう。
section　　何らかの見出しをつけて作った文章のかたまり（コンテンツ）
nav    ナビゲーション
article　　独立している文章コンテンツ
aside　　副次的な文章コンテンツ
h1~h6　　　見出し
pre          インデントや改行
（※ header, footerは、今までにも出来てきましたが、全体のコンテンツの頭の部分と足の部分です。）

その他によく使うタグは?

ulタグとolタグと、dl タグ とdt、ddタグ
ulタグは、箇条書きの文章を書く時に使います
olタグは、番号つき箇条書き文章を書く時に使います
両方共、liタグでリスト化します。
例えば、ブログのアーカイブを作る時にも使えます。

Archives

• ２０１６/10/30
• ２０１６/11/30
• ２０１６/12/30

ブラウザ表示させると

<>のタグは見えずに文字だけ表示されます。

では、dlタグやdtタグ、ddタグは何に使うのでしょうか。

dlタグは definition list 、dtタグは definition term 、ddタグは definition descriptionの略です。

それぞれ日本語にすると

・定義されたリスト

・定義された用語

・定義された説明　ということになります。

これらのタグは、ulやolのようにマークも数字も表示したくないけれど、ある定義でまとめられる内容である場合に使うタグです。

下記サンプルの（HTML５の）開発日記であれば、その内容について同じ定義をもつものをまとめられる機能を持ちます。

サンプルページ

・・・・・

どうでしたか？やってみましたか？
意外と簡単ですよね！

ではこれで一通りのHTMLタグを学んで来たので、HTMLは一旦終わりになります。
今度はCSSを使ってスタイルを見やすくバランスを整えて、ページを素敵にしていきたいと思います ！ もっと本格的なタグを学習して、実際にCSSでスタイリングしていきましょう。 

ブラウザでの表示を確認してみる

最初に作ったhtmlファイルは、以下の様に表示されるはずです。
こちらから確認できます =>

今回はハロウィンをテーマに作りましたが、思いつくものがなければ
例えばWEB開発のブログや料理のレシピ紹介をテーマにしてはいかがでしょうか。

A４用紙に好きなことについての文章と見出しを作り、それを骨組みしてみると頭の中でまとまります。

その構造を意識しながら、今度は実際にテキストエディタに向かって、

articleに当てはまる部分は〜で、asideは〜で、h1は〜で・・・、

という風に考えて組み立てながら、ソースコードを書いていくといいでしょう。

図）HTML5での重要なタグ

（※もし文字化けする場合は、wwwブラウザを変更してください）

下記の図はSafariですが、ほかのwwwブラウザでもほとんど同じです。

では、今日も最後までお読み頂きありがとうございました！

みなさまの幸運を心よりお祈りしています。