HTML文件裡面的內容大概如你在報紙上看到的一篇篇文章，一樣會具備標題、副標題、段落等等格式，我們就先給一個範例來表現一篇文章的HTML文件吧！
article.html
<!DOCTYPE html><html><head><title>文章範例</title></head><body><h1>主要標題</h1><h2>副標題</h2><hr/><p>第一個段落</p><p>第二個段落</p><p><em>斜體強調</em>，<br/><strong>粗體強調</strong>，<br/><em><strong>粗斜體強調</strong></em></p></body></html>
標題表示用標籤
使用h1~h6標籤分別可以表示從大到小的1級到6級的標題，當一篇文章出現標題的時候，可以使用此標籤來表示標題的部分。底下是h1~h6各個標籤範例：
header1to6.html
... <body><h1>一級標題</h1><h2>二級標題</h2><h3>三級標題</h3><h4>四級標題</h4><h5>五級標題</h5><h6>六級標題</h6></body> ...
水平線標籤
若要使用水平線來分隔文章，可以使用hr標籤來表示，hr為一個無包內容的標籤，可以寫作<hr />。
段落與換行標籤
若文章中要表示段落，可將段落使用p標籤包起來，此時段落上下會與其他段落產生分隔的效果；若僅只要使用簡單的單行換行可使用br標籤，br亦為一個無包內容的標籤，可以寫作<br />。
強調標籤
若文章中有需要強調的地方，可使用em標籤做斜體強調、strong標籤去做粗體強調，若要兩者一起使用，則可巢狀式的將一個標籤包起另外一個標籤（就像範例所寫的<em><strong>強調部分</strong></em>）。如果以前有用過HTML的人可能會知道有另外兩個標籤與之效果相同，分別是i(斜體)與b(粗體)標籤。在HTML5開始強調用標籤來表示文章語意的做法後，會建議使用em、strong兩個標籤來取代i與b標籤。
block元素與inline元素
大部分的HTML元素都會定義它為block元素或是inline元素。當使用該標籤會造成該元素與上下元素自動有所分隔，則該標籤所產生的元素為block元素；相對地，若並不會造成與上下元素之間的分隔的話，則為inline元素。本範例中，像是h系列的元素和p元素就屬於block元素；而em元素和strong元素則屬於inline元素。
已被廢棄使用的樣式用標籤
在HTML5當中，已不建議使用center標籤(置中)與font標籤(改變文字樣式，像是文字大小、文字顏色等)來去做樣式變化，目前HTML語法強調是被使用在文件語意上，而樣式美觀的部分就全權交給CSS語法去做處理，故若要置中或是改變文字樣式的部分請使用CSS樣式去做。(其實不只center、font標籤，其他像是align屬性(該元素對齊用)、bgcolor屬性(背景顏色屬性)......等等與樣式有關係的標籤或是屬性都已不建議使用HTML語法做更改，請盡量都使用CSS語法去撰寫)
pre標籤：直接顯示與原語法相同內容
如果有時從別的地方直接複製一篇長篇的文章，要在該文章換行或段落的地方加上<br />或是<p>...</p>實在有點麻煩，這時候只要直接先貼上該文章，然後前後加上<pre>...文章...</pre>即可，這就是pre標籤的用途。
pre.html
... <body><pre>這是一篇很長的文章， 害我懶的用br和p標籤， 真是抱歉！ </pre></body> ...
參考資料
- html教學 > 第03章。常用標籤：http://m7.dfps.tp.edu.tw/chen/main5/ahtml/03.asp
- w3schools.com > HTML <div> and <span>：http://www.w3schools.com/html/html_blocks.asp
- w3schools.com > HTML <pre> tag：http://www.w3schools.com/tags/tag_pre.asp
图标图像:
