HTML網頁文字呈現的時候,h1到h6是最重要的標籤,它可以標示文章標題,會在瀏覽器有自動加粗加大換行的效果,也是SEO關鍵工具,本文以論語章節示範。
目錄
Toggle一、Html文字標題
沿續先前文章範例,為了瞭解html標籤語法,Windows記事本在html檔案中輸入H0到H7的句子。
二、h1到h6大小標籤
Chrome開啟後,可以看到h1到h6都是字體加粗,間隔一行,h1字體最大,到h6依序字體漸小。h0和h7沒有顯著的變化,因為只有h1到h6是HTML規定的標題標籤。
三、文字換行Html
瞭解標題標籤的作用之後,在h1中間輸入「《論語》」作為標題,在h2中間輸入前三篇的章節名稱,特意換行間隔,如截圖所示。
四、網頁換行效果
瀏覽器顯示出來效果是三章標題都在同一行,中間值只有一個空格。這原理是先前文章有提到過的,在瀏覽器在解析HTML文件時,會自動把連續空格視為單一空格。
五、三個h2同一行
改變做法,將三個章節的標題分別寫在三個h2標籤裡,維持在同一行。
六、網頁標題換行
瀏覽器顯示效果正是所希望的網頁呈現。
七、IE顯示效果
除了Google的chrome瀏覽器,使用微軟的IE瀏覽器開啟檔案,同樣的版面呈現,字體不太一樣。
HTML、瀏覽器、SEO
從這篇文章範很容易理解瀏覽器在解析html文件時,是依照html語法規範呈現在電腦螢幕,和原始html的編排方式沒有直接關係。換個角度說,在設計html網頁時,版面編排只是為了讓開始者更加方便地設計程式,想要控制網頁呈現效果,還是要回歸到html不同的標籤功能,精準套用適當的標籤。
另外這一節有很簡單的在chrome和IE之間,測試相同html檔案在不同瀏覽器的相同之處和差異之處,這是在設計網頁時很重要的步驟。在以往只有電腦端的年代,測試不同瀏覽器即可,現在手機端逐漸成為主流,除了測試電腦網頁的呈現,同時也要注重測試手機網頁的狀況。
最後,由於h1到h6是公認的HTML文章標題標籤,而文章標題是搜索引擎在瞭解網頁內容很重要的判斷依據,所以想要網站SEO優化,一定要好好設計標題標籤,不要把h1h2單純當作版面配置的工具。
每天學習,每天充電:HTML系列文章。