|
body要素内で使用するHTMLのタグ要素は概ねブロック要素とインライン要素に分けられます。 body直下に文字やインライン要素を記述することはできません。また、 ソースにタグを記述する時に前者と後者の使い分けが必要になってきます。《＊HTML5ではブロック要素とインライン要素の定義は廃止されています。》
■ブロック要素
ブロック要素とはテーブルタグやリストタグのように一つの文書のまとまりで
前後に改行が入る要素です。
■インライン要素
インライン要素とは<font>や<em>のタグのように行内の文字を
装飾したり論理的な意味をなす要素です。
<a> <b> <button> <br> <em> <font> <img>
入れ子の例入れ子（nesting）とはある要素の中に別の要素を入れることです。 上の項目で述べたことを踏まえて各要素の入れ子関係に ついて説明します。分かり易いようにインライン要素だけ青色で表示します。◆ブロック要素の中にブロック要素だけを入れる フォームタグ直下にはブロック要素しか記述できません。 間違いの例
<form method="post" action="bbs.cgi">
<form method="post" action="bbs.cgi"> ◆ブロック要素の中にインライン要素、文字だけを入れる インライン要素の中にブロック要素は記述できません。<h1>と<a>のタグが 逆になってしまっています。 間違いの例<a href="index.html"><h1>TOPページへ</h1></a> 正しい例<h1><a href="index.html">TOPページへ</a></h1> ◆ブロック要素の中にブロック要素、インライン要素、文字を入れる。 <p>タグはブロック要素ですがブロック要素である<center>や テーブルタグを入れることはできません。特に<p>タグの中にテーブルタグ の記述は初心者の方が間違えやすく文法違反になってしまうので 注意が必要です。また、<p>～</p>内に<p>～</p>を 入れることもできません。間違いの例
<p>
<center> div要素の入れ子初心者の方がdiv要素内にdiv要素を入れ子として多用している 場合がありますが見出しや段落にはdiv要素は使用しないようにしましょう。 div（division:区切り）を多用してしまうと開始の<div>が<body>内のどの行まで適用 されているのか分かりづらくなります。 <p>（paragraph:段落）や<h1>（heading:見出し）などのタグと違い、div要素自体に 見出しや段落などの意味は持ちません。 好ましくない例
<div style="font-size:20px;">ホームページの作り方</div>
正しい例
<h4">ホームページの作り方</h4>・・・1番目の見出し
上のようにミニタイトルは見出し用のタグ、段落は段落用のタグというようにそれぞれの役割を持ったタグを使うよう 心がけましょう。
|
||||||||||||
