HTML 文件的樣式

我們已經知道要開發一個網頁內容，可以運用 <h1> ~ <h6>、<p>、<ul>、<ol>、<table> 等 HTML 元素製作出網頁的內容，然而卻沒有針對網頁外觀呈現樣式專用的元素。例如，我們似乎無法很簡單地只撰寫 HTML 元素就可以定義出兩欄式或三欄式的網頁設計樣式。

但網頁光只有文字內容實在太單調了，於是有段時間各家瀏覽器大開樣式戰爭，制定出多種與外觀樣式有關但卻不具語義的標記元素，使得原本單純的 HTML 變成複雜且不易閱讀。例如下面這段以 <font> 標記元素的寫法，就是直接在 HTML 文件中設定文字字體、大小及顏色，雖然可以讓這段文字具有外觀上的意義，但就 HTML 文件本身的結構來說，<font> 對搜尋引擎來說就沒有太多的意義。

<font size="+3" face="細明體" color="red">標題文字</font>

就搜尋引擎的角色來說，只需要知道 HTML 文件寫了什麼內容，例如標題是什麼、文章內容是什麼，以及哪些是共用的選單、哪些是頁尾資訊等。也就是說，如果搜尋引擎可以「讀得出」文章的結構及語義的話，那它就可以略過部分沒那麼重要內容，因為搜尋引擎本來就應該是針對內容進行搜尋，才會找尋出符合使用者的期待的搜尋結果。因此，剛剛使用 <font> 元素設計的頁面，就使用者觀看到的頁面確實會有文字調整的效果，但對搜尋引擎來說，<font> 這個元素只是用來調整文字的樣式效果，本身並無任何語義，因此這個 HTML 元素看來就可有可無。

為了解決前述問題，W3C 組織在制定 HTML4 標準的時候，希望讓 HTML 文件可以聚焦在「內容」上，於是加入了排版用的元素 <div> 及 <span>，同時導入了 CSS（Cascading Style Sheets，階層式樣式表） 的設計，用來專職處理網頁的外觀呈現效果。這也是現代網頁設計都會同時談 HTML + CSS 的原因，這樣的做法不但可以讓網頁內容易於維護（例如我們要套用新的設計樣式，只需要改 CSS 就好，而不需重新修改 HTML 文件），同時也讓搜尋引擎更能理解網頁的內容（因為 HTML 文件裡只會留下具有語義意思的元素和內容）。至於我們要如何改用 CSS 來控制頁面的呈現效果呢？我們來將上面範例中的 <font> 元素棄用，同時用 CSS 樣式表的方式來改寫看看，如下所示。

<h1 style="font-size: 32px; font-family:'細明體'; color: red">標題文字</h1>

看起來很熟悉吧，沒錯，其實我們在前面的課程內容裡已經稍微提到一些 CSS 樣式表設計的概念了。