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>

これにより、次の結果が生成されます-