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>タグを使用して、<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>これにより、次の結果が生成されます-