何為分組元素，首先先看下面這個例子：
<span>scolia<span>scolia</span></span> <span>scolia</span> <span>scolia</span>
上面這段代碼的顯示效果是這樣的：
首先，第一行的文本元素嵌套的文本是無縫連接的，而下面兩行不嵌套的也在一行內顯示完畢，不過元素之間相距一個空格。
而分組元素則是這樣的：
<div>scolia<div>scolia</div></div> <div>scolia</div> <div>scolia</div>
其顯示效果是這樣的：
可以看出無論是嵌套的也好，還是獨立的也好，元素里的文本都會換行顯示，與其他文本分開，這就是所謂分組的含義。
下面的這個表格總結了分組元素有哪些：
| 元素名稱 | 說明 |
| p | 表示段落 |
| div | 一個沒有任何語義的通用元素，和 span 是對應元素 |
| blockquote | 表示引自他出的大段內容 |
| pre | 表示其格式應被保留的內容 |
| hr | 表示段落級別的主題轉換，即水平線 |
| ul,ol | 表示無序列表，有序列表 |
| li | 用於 ul,ol 元素中的列表項 |
| dl,dt,dd | 表示包含一系列術語和定義說明的列表。dt 在 dl 內部表示 術語，一般充當標題；dd 在 dl 內部表示定義，一般是內容。 |
| figure | 表示圖片 |
| figcaption | 表示 figure 元素的標題 |
1.<p>建立段落
<p>這是一個段落</p> <p>這也是一個段落</p>
解釋：<p>元素實際作用就是將內部包含的文本形成一個段落；而段落和段落之間保持一定量的空隙。
2.<div>通用分組
<div>這是一個通用分組</div> <div>這是又一個通用分組</div>
解釋：<div>元素在早期的版本中非常常用，通過<div>這種一般性分組元素進行布局。而在 HTML5 中，由於語義的緣故，被其他各種文檔元素所代替。和<p>段落的區別就是，兩段文本的上下空隙是沒有的，空隙間隔和<br>換行一樣。
3.<blockquote>引用大段他出內容
<blockquote>這是一個大段引自他出內容</blockquote> <blockquote>這是另一個大段引自他出內容</blockquote>
解釋：<blockquote>元素實際作用除了和<p>元素一樣，有段落空隙的功能，還包含了首尾縮進的功能。語義上表示，大段的引用他出的內容。
4.<pre>展現格式化內容
<pre> ##### ##### ##### ##### ##### </pre>
解釋：<pre>元素實際作用就是編輯器怎么排版的，原封不動的展現出來。當然，這種 只適合簡單的排版，復雜的排版就無法滿足要求了。
5.<hr/>添加分隔
<hr/>
解釋：<hr>元素實際作用就是添加一條分割線，意圖呈現上下文主題的分割。就像我一種用的這些分隔線一樣。
6.<ul><li>添加無序列表
<ul> <li>張三</li> <li>李四</li> <li>王五</li> <li>馬六</li> </ul>
效果如下：
解釋：<ul>元素表示無序列表，而<li>元素則是內部的列表項。
7.<ol><li>添加有序列表
<ol> <li>張三</li> <li>李四</li> <li>王五</li> <li>馬六</li> </ol>
顯示效果如下：
解釋：<ol>元素表示有序列表，而<li>元素則是內部的列表項。<ol>元素目前支持三種屬性。
| 屬性名稱 | 說明 |
| start | 從第幾個序列開始統計：<ol start="2"> |
| reversed | 是否倒序排列：<ol reversed>，支持程度要自己測試 |
| type | 表示列表的編號類型，值分別為：1、a、A、i、I |
<li>元素可以使用以下屬性：
| 屬性名稱 | 說明 |
| value | 強行設置某個項目的編號 |
<li value="7">王五</li>
8.<dl><dt><dd>生成說明列表
<dl> <dt>這是一份文件</dt> <dd>這里是這份文件的詳細內容 1</dd> <dd>這里是這份文件的詳細內容 2</dd> </dl>
效果如下：
解釋：這三個元素是一個整體，但<dt>或<dd>並非都必須出現。
9.<figure><figcaption>使用插圖
<figure> <figcaption>這是一張圖</figcaption> <img src="img.png"> </figure>
因為我並沒有准備圖片，所以效果如下：
解釋：這兩個元素一般用於圖片的布局。
最后，在這里解釋一個問題，為什么我這里的代碼都要做好排版和縮進，難道一定要這樣才有效嗎？其實並不一定要求要這樣整齊排版，你可以像我最開頭演示的那樣，在一行代碼里進行嵌套。但是，代碼的可讀性就非常低了，無論是在開發的時候還是在維護的時候都很不方便。排版最大的作用就是方便自己，另外整齊漂亮的代碼就像是優雅的藝術品，能帶來一種秘制愉悅感。