Info Tech

HTML5とCSS3基本講座 2回|HTMLの構造

要素図

HTML講座の2回目です。HTMLの構造は重要です。webページをイメージした時、ページの各要素はHTMLのブロック(箱)で構成されているということをつかんで下さい。

HTMLの種類

HTMLの最新バージョンは、HTML5です。HTMLには、バージョンだけでなく、複数の種類もあります。

種類というのは、例えばPCのOSのようなもので、Windowsや Mac OS、Linuxです。バージョンは、Windowsの場合、XP、Vista、7、10に相当します。

つまり、新しいWindowsやOSが出て来ても、従来使用していた全てのものが一斉に新しいものに切り替わらないのと同じで、HTMLの新しい種類や新バージョンになっても、旧来のものと暫くの間は共存状態が続きます。

HTMLの種類やバージョン

HTMLのバージョンには次のようなものがあります。
HTML3.2(1997.1.14)   HTML4.01(1999.12.24)   HTML5(最新版)
種類の違うものには、拡張可能なHTMLとして、XHTML(Extensible Hyper Text Markup Language)があります。これらの経緯は複雑なため、ここでは割愛します。現時点では、HTML5が最新版です。

また、スマートフォンは、HTML5が標準です。

HTML の基本構造

html要素図html要素図

 

わかりやすいように、webページを想像して下さい。大抵のwebページのフロント画面には、一番上にヘッダー要素として、ロゴや、グローバルナビゲーションと呼ばれる主なページにリンクする案内表示があります。

その下には、コンテンツエリアやメインエリアが配置され、それらの右側のエリア(サイドエリア)には、広告バナーや、ブログアーカイブなどが表示されています。

そして、最下部のフッター領域は、webサイトの補助的な内容や、関連リンクが表示されるエリアになっています。

以上は、あくまで一般的な構造例で、左右が逆になっていることもありますが、webページの基本構造です。

HTMLは、箱に例えられることがあります。Webページは大きな箱の中にあります。その箱の中には、さまざまな小さな箱が入っていることをイメージして下さい。

さまざまな小さな箱は、それぞれ役割の違うHTMLで構成されています。もっとも大きな箱もHTMLで作られています。つまり、html要素の箱の中に、その他の要素の箱が入っているようなイメージです。

ポイントのまとめ

前半では、HTMLの種類やバージョンに触れましたが、ここでは、そうなのか程度を知ることで十分です。

後半の、HTMLの構造は重要です。ただし、webページをイメージした時、ページの各要素はHTMLのブロック(箱)で構成されているということがつかめれば良いでしょう。

HTMLは、真剣になって覚えなければというよりも、繰り返し触れることで自分のものになるので心配しないで下さい。その為には実践が大切です。次回からは、サイトの骨組みを作って確認しながら学習することを目指します。

ABOUT ME
iyasaretaihito
子どもの時から、昆虫や恐竜、宇宙などに興味がある理科大好きな理系人間です。 会社は半導体設計関連会社に勤務して、60歳で定年退職後は趣味に没頭する、のん気なおじさんです。