HTML是如何為網頁的外觀進行結構呢？
答案：透過使用標籤(Tag)。
標籤可分為起始標籤(Opening Tag)和結束標籤(Closing Tag)，兩者之間我們會放入網頁的內容(Content)。
比方說：
<p>This is some content</p>
<p>就是起始標籤(Opening Tag)
This is some content就是內容
</p>就是結束標籤(Closing Tag) (多了/便是結束標籤)
以上的寫法代表，This is some content 屬於p標籤。而p標籤就是代表內文（Paragraph）。也就是說，This is some content 便是內文。
我們來試試吧！
首先，我們要安裝2個軟件。它們分別是：
Brackets ( http://brackets.io )
Chrome ( https://www.google.com/chrome/ )
Brackets是一個類似文字編輯器的軟件，但主要作用是用來寫Program。
除了Brackets外，還有很多不同的編輯器可以用作寫Program，例如：
Windows：
Atom
Notepad＋＋
Visual Studio Code
Mac：
Atom
Coda
Visual Studio Code
首先，在你的電腦隨便一個位置，開一個新的資料夾。這個資料夾將用於存放即將要做的HTML文件。
然後，開啟剛剛下載的Brackets。按File -> Open Folder ，選擇剛剛我們新建的資料夾。
選擇好資料夾後，接Open。
在左手邊深灰色背景的地方，按右鍵 -> New File來新增一個檔案。
輸入文件名稱，隨便甚麼名稱都可以，但要記着一定要輸入副檔名(.html) ，如xxx.html
建立了一個HTML文件後，我們可以在右面白色的地方, 輸入文件的內容。請試試跟着輸入以下內容：
<p>This is some content</p>
看到右手邊有一個「閃電」的按鍵嗎？他的功能是即時預覽(Live Preview)，意思是使用瀏覽器去開啟這個文件。我們輸入完內容後, 試試按一下它吧！
看見了沒有？我們用一個瀏覽器Chrome開啟了這個文件後，原本的標籤便不見了。由此可見，原來瀏覽器可以演繹HTML，並把它變成用家可明白的介面。
在這示範，Hello World! 是我們想呈現出來的內容，而我們使用p標籤去包着它，是給電腦說明它是一個段落。
如果回到我們剛剛新建的資料夾，會發現多了一個文件day1.html。其實它就是我們剛剛用Brackets建立的Hello World!文件。
現在我們試試更改入邊的內容，加上I am Jack.要留意每當你做完文件的更改後，你必須要把他儲存。
儲存文件的方法是到File -> Save。或者是按快捷鍵 Ctrl+s (Windows) 或 Command+s (Mac)。
文件儲存後，我們可以到剛剛開啟了的CHROME，按一下(Refresh) 這樣做就可以看到剛剛的改動喔！。
Refresh網頁的方法是按一下(Refresh) ，或者按快捷鍵 Ctrl+r (Windows) 或 Command+r (Mac)。
以後每當你做完改動，也記着要先儲存(Ctrl/Command + s)，然後到瀏覽器刷新(Ctrl/Command + r)看看剛剛的改動。
我們試試是輸入其他的標籤吧。要注意這些標籤全部都是有起始標籤和結束標籤的。
看見了沒有？每個標籤其實在告訴電腦，他們包着的內容究竟是甚麼。
如這段文字是普通段落，我們便用p標籤去它包著。
如這段文字是本文中最重要的標題，我們便用h1標籤去把它包着。
以下是一些常用的標籤的意思：
p 段落
h1 最重要的標題
h2 第二重要的標題
h3 第三重要的標題
h4 第四重要的標題
h5 第五重要的標題
h6 第六重要的標題
a 連結
ul和li 無次序的列點
ol和li 有次序的列點
strong 粗體，而且很重要
b 粗體
i 斜體
正確地使用標籤是一個非常重要的概念。它會電腦明白網頁上的內容究竟代表著甚麼。
另外，我們也可以看見一個標籤可以包着另外一個標籤。例如
<ul>
<li>List 1</li>
<li>List 2</li>
</ul>
每一個<li>代表一個列點。而每一組列點則會用一個<ul>包著。
要注意，當一個標籤被另外一個標籤包著，我們會通常把被包著的那個標籤Indent一下。（就是用Space把它向右一點）這個Indent，我們可以接3次Space鍵，或是按一下「Tab」鍵，都可以有同樣效果。
以上Indent的手勢，對寫HTML是非常重要的。雖然你沒有用Indent的話，程式一樣能行，但就會變得比較難讀及混亂。
最後，<strong>和<i>分別代表了粗體和斜體。我們也試試看吧！
雖然絕大部分的標籤，都必須有一個起始標籤和結束標籤。但凡事總有例外，<br>只需要有一個起始標籤，表示隔一行。
此文章轉載自鬍子科技學院http://mtache.com/html