Elementor標題看起來一樣：HTML標籤與字級如何分開設定

Elementor標題看起來太小，應先查Typography，而不是為了變大就把HTML Tag改成H1。標籤表示內容層級，字級控制視覺大小；兩者可以互相受到樣式影響，但不應為了追求外觀而亂改頁面結構。

下面用一個傳統Heading比較：設定字級48px後，先輸出h2，再把HTML Tag換成h3。儲存後的兩次前台預覽都讀到48px。這個例子讓你看清楚：標題層級變了，視覺大小仍可以保持；若你的主題另有標籤樣式，則還需要核對實際前台。

先確認你要改的是內容層級還是外觀

本例使用WordPress 7.1.2、Elementor Free 4.3.3及Twenty Twenty-Five，選中傳統Container裡的Heading。這個版本也有Atomic Elements，本文只說明傳統Heading的Content與Style欄位，不把兩套元件的預設樣式機制混在一起。

如果標題在文章裡是某一節的小題，應先依內容關係選層級。如果只是覺得字看起來不夠明顯，先處理字級、字重或間距。不能因為H1通常看起來比較大，就把所有卡片標題都設成H1；這會讓頁面的內容組織難以辨認。

也要確認那個標題是否由主題輸出。有些頁面同時有主題的頁面標題和你放進內容的Heading。選中其中一個修改，不表示另一個也會一起改。先辨認標題來源，才不會在元件裡調了半天，畫面上方的主題標題仍維持原樣。

HTML Tag在Content，字級在Style

選中本例Heading後，Content的HTML Tag可選H1至H6等標籤。先使用H2。接著到Style的Typography設定Size為48px，儲存草稿並開啟前台預覽。讀到的元素是h2，文字為Author Heading Case A，計算字級是48px。

這裡的48px只是讓差異容易比較的測試值，不是所有網站標題都應使用的標準。正式頁面還要考慮文字長度、容器寬度、字型和閱讀距離。尤其手機上，桌面可放下一行的標題，可能會變成三行，應另外核對響應式控制。

也不要漏看單位。48px與4.8rem是不同設定，不能因為欄位都是數字就直接對照。先確認你設定的Size、單位與目前裝置，再讀前台的計算字級，才知道它實際使用了什麼結果。

換成H3後，字級仍可以保持

接著只把本例的HTML Tag從H2改成H3，保留字級設定，再次儲存並開啟前台。元素確實改成h3，文字仍為Author Heading Case A，計算字級也仍為48px。這不是只看選單變了，而是實際核對儲存後HTML和樣式。

官方Heading說明也提醒，改標籤通常不直接改大小或樣式，但若主題或Site Settings對該標籤有定義，則可能受影響。因此不能把本例寫成「H2換H3永遠不變」。應保存局部設定，再看你的站點實際套用哪些樣式。

如果改成H3後真的變小，不要為了恢復大小就立即換回不合適的內容層級。先查局部Typography、全域字型和主題樣式，找出哪個值影響它。正確結構和想要的視覺大小通常可以分別安排。

用章節關係安排層級

W3C說明標題用來傳達內容組織，瀏覽器和輔助技術可以利用它們導覽頁面。主要內容下面的一節可使用次一層標題，再往下的子節繼續依關係安排。相同層級的標題應代表相似的內容位置，而不是只是看起來同樣大。

例如頁面主要題目下面有「服務項目」與「聯絡方式」兩節，它們可以是同一層；服務項目裡的三個方案則是下一層。這只是示意，實際頁面還要核對主題已輸出的標題，不是只從你目前選中的元件開始計算。

W3C建議盡量避免在往下建立子節時跳過層級，例如H2下面直接建立H4；但結束較深子節後回到H2，是回到新章節，不是同一種問題。不要把「避免跳級」簡化成整頁標題必須一直從H1遞增到H6。

不要用假標題取代真正的標題

把一段普通文字加粗放大，視覺上可以像標題，但HTML可能仍是段落或span。若它確實用來開啟一個內容章節，應選合適的Heading標籤，而不是只靠字體外觀讓讀者猜內容關係。

反過來，純粹需要一段醒目的促銷短句，也不一定要使用新的章節標題。先看它的作用：是組織後方內容，還是同一段資訊中的強調。不要為了套用某種樣式，把每句醒目文字都變成H2。

如果模板中的Heading預設層級不適合目前頁面，應依內容關係調整。複製元件會帶入原設定，不代表原層級在新位置也正確。新增一張卡片或插入一個區塊後，也應回頭看整頁章節順序。

改完儲存，再查實際輸出

儲存後用前台檢查目標元素的tagName與計算font-size，兩項都要符合目的。只看截圖，無法知道它是h2還是h3；只看HTML，則不能知道它最後看起來是否太大或太小。

再核對窄視窗下文字換行、行高和前後留白。本例只證明這個本地Heading兩次儲存結果，不把48px當成已完成所有裝置的字級設計。要調手機字級時，先確認該控制的裝置範圍，避免把桌面設定也一起改掉。

最後看整頁標題是否能清楚描述各節內容。把標籤與視覺分開處理，是為了同時保留可理解的結構與合適的外觀，不是為了承諾只改一個H標籤就能提高搜尋排名。

把層級決策留給內容，而非字型預設

網站使用同一套字型樣式，可以讓不同頁面看起來一致；但某個樣式名稱叫「主要標題」，也不一定表示每個套用它的元件都應使用H1。樣式名稱、視覺大小和HTML標籤仍應分別核對，不能只因名稱相似就視為同一個設定。

如果設計要求某個子節標題很大，可以保留它正確的層級，再安排字級。若主要標題需要較小的視覺外觀，也可以在保持內容結構的前提下調整樣式。這樣內容編輯和視覺設計都能清楚交接，不需要用錯誤標籤來補外觀。

交接時也可說明這個標題屬於哪一節、文字用途和局部字級，而不只留下「換成H3」這個操作。下一位維護者增加新章節時，便較容易判斷原本的層級是否仍合適。

參考資料