HTMLドキュメント制作の基本的な流れ

htmlドキュメント制作の基本的な流れ

どんなに複雑そうに見えるHTMLドキュメントでも、丁寧に見ていけば「1つ1つの要素が決められたルールに従って記述してあるだけ」ということがわかります。恐れることはありません。

HTML仕様やCSS仕様で定義されている要素・属性の数は多くありますが、それらについて学ぶ前に、HTMLドキュメント作成の流れについて確認しましょう。

文章構造を意識しよう

ホームページを作るにあたって、まず最初に意識してほしいことは文章構造です。

HTMLはその正式名称をHyper Text markup Languageと言い、HTMLドキュメントの論理構造に関する記述を行うことを目的としています。ドキュメント内の各部分に対し、HTML要素(HTMLタグ)を使って見出し、段落、表など役割を設定していきます。要素・タグにより役割を与えることを指して「マークアップする」とも言います。

マークアップの実例

マークアップの具体例

見た目・レイアウトの調整はCSSで

マークアップにより構造化が済んだHTMLドキュメントをそのまま表示してもパッとしません。

  • 見出し文字の色を変えたい
  • イメージ図を左側に、その右側に説明文を表示したい
  • リストの背景色を明るくしたい
  • 表の外枠線を太くしたい

このような視覚的効果を調整するためにCSSを利用します。

CSSで視覚的効果を加える前後の表示例

マークアップとCSSの具体例

HTML4.01仕様の中で、見た目を制御する要素・タグが多数定義されています。しかし、現在ではこれらの要素の利用は推奨されておらず、見た目に関してはスタイルシートを利用することが勧められています。HTML5仕様からは正式に削除される予定です。