文書構造を意識しながらHTMLをマークアップしよう

HTMLマークアップを始める前に、ページの文書構造を確認しておきましょう。
先に構造を整理しておくクセをつけておくと、ソースコード内で迷子になりません。

【実装】文書構造

HTML文書全体は、html要素を最上位(ルート)の親要素とする入れ子による親子関係で成り立っています。
外側にある要素が「親要素」、その内側にある要素が「子要素」、さらにその内側にある要素が「孫要素」となります。
また入れ子ではなく、同じ階層で並列に並んでいる要素同士は「兄弟要素」となり、ソース上で先に出てくるものが「兄要素」、後で出てくるものが「弟要素」と呼ばれます。

要素の入れ子関係を意識する事は、CSSでページレイアウトをする際に非常に重要になってきます。
下記のように、一つ一つの要素を1つのボックス(箱)として捉え、要素の入れ子でボックスの入れ子を作っていく状態を頭の中でシミュレーション出来るようになると、CSSを使ったレイアウトが理解しやすくなります。

ブラウザはHTML文書が読み込まれた際、ソースコードに記述された要素の入れ子状態を確認して各要素のツリー構造を作っていきます。このツリー構造が正しく作られないと、ブラウザでの表示もおかしくなってしまうため、HTMLの記述をする際には常に要素の入れ子関係を正しく保つという点に注意をしなければなりません。

要素の入れ子関係を意識しながら、下の画面になるようにHTMLをマークアップしてみましょう。

<!DOCTYPE html>
<html>
<head>
　<meta charset="utf-8">
　<meta http-epuiv="X-UA-Compatible" content="IE=edge">
　<link rel="stylesheet" href="">
　<title></title>
</head>
<body>
　<div id="wrap">
　　<h1>初めてのプログラミング</h1>
　　<p>これからプログラミングを始める人に向けて、勉強ステップを紹介します。</p>
　</div>
　<div id="contents">
　　<h2>プログラミング学習の効率を上げるコツ</h2>
　　<p>
　　・暗記しない</br>
　　・手を動かすことを意識</br>
　　・エラーを恐れない
　　</p>
　　<p>詳細はこちらをクリック【<a href="https://translate.google.co.jp/?hl=ja&tab=rT&authuser=0">リンク先に飛ぶ</a>】</p>
　</div>
</body>
</html>

カテゴリー

アーカイブ

Close Bitnami banner
Bitnami