HTML-ブロック

すべてのHTML要素は、2つのカテゴリに分類できます*（a）*ブロックレベル要素（b）インライン要素。

ブロック要素

ブロック要素は、その前後に改行があるかのように画面に表示されます。たとえば、<p>、<h1>、<h2>、<h3>、<h4>、<h5>、<h6>、<ul>、<ol>、<dl>、<pre>、<hr/>、<blockquote>、および<address>要素はすべてブロックレベルの要素です。それらはすべて独自の新しい行で始まり、それらに続くものはすべて独自の新しい行に表示されます。

インライン要素

一方、インライン要素は文内に表示でき、独自の新しい行に表示する必要はありません。 <b>、<i>、<u>、<em>、<strong>、<sup>、<sub>、<big>、<small>、<li>、<ins>、<del>、< code>、<cite>、<dfn>、<kbd>、および<var>要素はすべてインライン要素です。

HTML要素のグループ化

他のさまざまなHTMLタグをグループ化するために非常に頻繁に使用する2つの重要なタグがあります（i）<div>タグと（ii）<span>タグ

<div>タグ

これは非常に重要なブロックレベルタグであり、他のさまざまなHTMLタグをグループ化し、要素のグループにCSSを適用する際に大きな役割を果たします。今でも<div>タグを使用して、ページのさまざまな部分（左、右、上など）を定義するWebページレイアウトを作成できます。このタグはブロックの視覚的な変更を提供しませんが、CSSで使用する場合により多くの意味があります。

例

以下は、<div>タグの簡単な例です。カスケードスタイルシート（CSS）は別の章で学習しますが、ここでは<div>タグの使用方法を示すために使用しました-

<!DOCTYPE html>
<html>

   <head>
      <title>HTML div Tag</title>
   </head>

   <body>
      <!-- First group of tags -->
      <div style = "color:red">
         <h4>This is first group</h4>
         <p>Following is a list of vegetables</p>

         <ul>
            <li>Beetroot</li>
            <li>Ginger</li>
            <li>Potato</li>
            <li>Radish</li>
         </ul>
      </div>

      <!-- Second group of tags -->
      <div style = "color:green">
         <h4>This is second group</h4>
         <p>Following is a list of fruits</p>

         <ul>
            <li>Apple</li>
            <li>Banana</li>
            <li>Mango</li>
            <li>Strawberry</li>
         </ul>
      </div>
   </body>

</html>

これは、次の結果を生成します-

<span>タグ

HTML <span>はインライン要素であり、HTMLドキュメント内のインライン要素をグループ化するために使用できます。このタグは、ブロックの視覚的な変更も提供しませんが、CSSで使用する場合により多くの意味を持ちます。

<span>タグと<div>タグの違いは、<span>タグがインライン要素で使用されるのに対し、<div>タグはブロックレベルの要素で使用されることです。

例

以下は、<span>タグの簡単な例です。カスケードスタイルシート（CSS）は別の章で学習しますが、ここでは<span>タグの使用方法を示すために使用しました-

<!DOCTYPE html>
<html>

   <head>
      <title>HTML span Tag</title>
   </head>

   <body>
      <p>This is <span style = "color:red">red</span> and this is
         <span style = "color:green">green</span></p>
   </body>

</html>