マークアップしたい対象の文字列を、タグで囲んだ情報の単位を要素といいます。要素は囲んでいるタグによりブロック要素とインライン要素に分かれます。使用するタグがどちらになるかを理解しながらコーディングを進めていくことが必要となります。
ブロック要素
ブロック要素とは、使用するたびにその要素の前後で改行される要素となります。以下のコードとブラウザの表示内容を見比べていただくと理解しやすいかと思います。
<body>
<h1>1日のあいさつ</h1>
<p>おはよう</p>
<p>こんにちは</p><p>おやすみなさい</p>
</body>
HTMLで「p」タグを改行せずに書いても、ブラウザで表示した際にはきちんと改行されていることが確認できます。以下に、代表的なブロック要素のタグを紹介させていただきます。
「p」タグ 段落を構成する
「div」タグ 意味を持たないブロック要素を構成する
「h1~h6」タグ 見出し
「ul」タグ 順序のないリスト
「dl」 定義リスト
インライン要素
インライン要素とはブロック要素や文章に含まれる要素を指し、テキストと同じレベルで扱われるため、前後で改行されることはありません。これらの並び方は、CSSで自由に調整することが可能です。
<body>
<a href="https://www.google.com/">Google</a>
<a href="https://www.google.com/">Google</a>
<a href="https://www.google.com/">Google</a>
</body>
HTMLではすべて改行してコーディングしましたが、ブラウザには改行されずに表示されることが確認できます。以下に、代表的なインライン要素のタグを紹介させていただきます。
「a」タグ リンクの設定をする
「br」 改行
「em」 協調(イタリック体)
「span」 範囲の指定
以上がブロック要素とインライン要素となります。
次回はリンクと画像の貼り付け方について説明いたします。
コメント