HTML５の基本構造の把握

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

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

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

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

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

	      サンプル１
	      サンプル２
	      サンプル3
　　　　         

	   サンプル１
	   サンプル２
	   サンプル3
　　　　      

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

タグの意味の解説

今回初めて出て来たタグだけ、意味を解説します。頭に入れておきましょう。
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５の）開発日記であれば、その内容について同じ定義をもつものをまとめられる機能を持ちます。

< サンプル >

定義リスト

Article

記事

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

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

最初に作ったhtmlファイルは、以下の様に表示されるはずです。
こちらから確認できます => http://yukycohamabe.ciao.jp/halloween.html
 
今回はハロウィンをテーマに作りましたが、思いつくものがなければ
例えばWEB開発のブログや料理のレシピ紹介をテーマにしてはいかがでしょうか。
A4用紙に好きなことについての文章と見出しを作り、それを骨組みしてみると頭の中でまとまるはずです。

その構造を意識しながら、articleに当てはまる部分は〜で、asideは〜で、h1は〜で、という風に考えて組み立てながら、ソースコードを書いていくといいでしょう。
 
図）HTML5での重要なタグ

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

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