作者moodyblue ()
看板Web_Design
標題[心得] HTML文字標題標籤：h1到h6
時間Thu Sep 24 08:37:35 2020
HTML文字標題標籤：h1到h6不同大小及換行效果
網誌圖文版：
https://www.b88104069.com/archives/4637
HTML網頁文字呈現的時候，h1到h6是最重要的標籤，它可以標示文章標題，會在瀏覽器有
自動加粗加大換行的效果，也是SEO關鍵工具，本文以論語章節示範。
一、標題標籤
沿續先前文章範例，為了瞭解html標籤語法，Windows記事本在html檔案中輸入H0到H7的
句子。
二、大小及粗體
Chrome開啟後，可以看到h1到h6都是字體加粗，間隔一行，h1字體最大，到h6依序字體漸
小。h0和h7沒有顯著的變化，因為只有h1到h6是HTML規定的標題標籤。
三、論語章節
瞭解標題標籤的作用之後，在h1中間輸入「《論語》」作為標題，在h2中間輸入前三篇的
章節名稱，特意換行間隔，如截圖所示。
四、瀏覽器顯示
瀏覽器顯示出來效果是三章標題都在同一行，中間值只有一個空格。這原理是先前文章有
提到過的，在瀏覽器在解析HTML文件時，會自動把連續空格視為單一空格。
五、標題設置
改變做法，將三個章節的標題分別寫在三個h2標籤裡，維持在同一行。
六、自動換行
瀏覽器顯示效果正是所希望的網頁呈現。
七、IE顯示效果
除了Google的chrome瀏覽器，使用微軟的IE瀏覽器開啟檔案，同樣的版面呈現，字體不太
一樣。
HTML版面、瀏覽器測試、SEO
從這篇文章範很容易理解瀏覽器在解析html文件時，是依照html語法規範呈現在電腦螢幕
，和原始html的編排方式沒有直接關係。換個角度說，在設計html網頁時，版面編排只是
為了讓開始者更加方便地設計程式，想要控制網頁呈現效果，還是要回歸到html不同的標
籤功能，精準套用適當的標籤。
另外這一節有很簡單的在chrome和IE之間，測試相同html檔案在不同瀏覽器的相同之處和
差異之處，這是在設計網頁時很重要的步驟。在以往只有電腦端的年代，測試不同瀏覽器
即可，現在手機端逐漸成為主流，除了測試電腦網頁的呈現，同時也要注重測試手機網頁
的狀況。
最後，由於h1到h6是公認的HTML文章標題標籤，而文章標題是搜索引擎在瞭解網頁內容很
重要的判斷依據，所以想要網站SEO優化，一定要好好設計標題標籤，不要把h1h2單純當
作版面配置的工具。
延伸閱讀：
Windows記事本也能設計網頁，寫下第一行HTML程式碼
https://www.b88104069.com/archives/4606
HTML主要結構語法：<!DOCTYPE html>、<html>、<head> 、<body>、註解等
https://www.b88104069.com/archives/4620
--
moodyblues是一個搖滾樂團
該樂團並不憂鬱 我個人也不憂鬱
猜想該樂團當初取名moodyblues和我一樣
只是單純的歷史偶發事件 請勿望文生義呀呀呀
--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 60.250.152.209 (臺灣)
※ 文章網址: https://webptt.com/m.aspx?n=bbs/Web_Design/M.1600907870.A.150.html