HTML 程式札記 : 語意化標籤

閱讀時間約 1 分鐘

HTML 語意化標籤,不僅可以使網頁結構更加清晰、易於理解,也對搜索引擎優化(SEO)和提升網頁無障礙訪問性(Accessibility)有明顯的幫助。本文將介紹 HTML 語意化標籤的定義、重要性以及常見的語意化標籤。

什麼是 HTML 語意化標籤?

HTML語意化標籤指的是那些具有明確含義,能夠描述其包含內容類型的標籤,如<header><footer><article>等。這些標籤的使用不僅有助於開發者快速識別網頁結構,也能讓搜索引擎更容易理解網頁內容,從而提升SEO效果。

為什麼要使用 HTML 語意化標籤?

  • 提升SEO效果: 語意化標籤讓搜索引擎更容易解析網頁結構和內容,有利於提升網頁在搜索結果中的排名。
  • 增強網頁可讀性: 清晰的標籤使得程式碼更容易理解和維護,提升開發效率。
  • 促進無障礙訪問: 這些標籤可以改善使用輔助技術(如屏幕閱讀器)的用戶的網頁導航體驗。

常見的 HTML 語意化標籤

  • <header><footer> 分別用於標記頁面或內容區塊的頭部和尾部。
  • <nav> 表示導航菜單,幫助用戶和搜索引擎理解網站結構。
  • <main> 指定網頁的主要內容區域。
  • <article> 代表一個獨立的內容塊,如博客帖子或新聞文章。
  • <section> 用於組織相關內容,劃分不同的章節。
  • <aside> 表示與主內容相關的輔助信息,如側欄。
  • <mark> 強調文本中的關鍵詞或句子。
  • <time> 明確標記時間或日期。
  • <details><summary> 提供可展開和收起的詳細信息。

😊 感謝你的耐心閱讀,若是你喜歡這篇內容,可以透過以下方式表達你的喜歡 😊

❤️按個愛心|💬留言互動|🔗分享此文|📌追蹤阿梧|☕請喝咖啡

avatar-img
60會員
91內容數
「梧笙」即「吾生」,意即我的生命,朋友都叫我「阿梧(Awu)」,高雄人。我喜歡學習新技能,從程式設計到網路工具,再到社群經營和影片剪輯。日常興趣是打遊戲、看動漫、讀小說和聽音樂。我會把這些興趣寫成文章,如果你有任何想法或問題,歡迎來信到我的郵箱 aowulife109@gmail.com
留言0
查看全部
avatar-img
發表第一個留言支持創作者!
梧笙の領域展開 的其他內容
在網頁設計中,圖片是增強用戶體驗的重要元素。本文將介紹如何在 HTML 中使用圖片,包括基本語法、屬性設定等,幫助你更好的在網頁中使用圖片。
HTML 表單扮演著收集用戶資訊的重要角色。無論是登入頁面、註冊表、問卷調查,或是任何需要用戶輸入的場景,都離不開 HTML 表單。本文將帶你快速了解 HTML 表單的基礎知識,包括表單的結構、元素及其驗證方式。
在網頁開發中,HTML 表格是展示資料的一種重要方式。本文將介紹HTML表格的基本結構和合併單元格,並通過實際範例幫助你理解。
無論是跳轉到另一個網頁,還是在同一頁面內導航,HTML 連結都扮演著關鍵角色。本文將簡單的介紹 HTML 連結的基礎語法和使用方法。
在網頁設計中,列表是基本且重要的元素之一。透過 HTML 列表,我們能夠提高網頁內容的可讀性。本文將帶你了解 HTML 中的列表類型,以及它們的使用方式。
本文將介紹 HTML 中的標題、段落、文本格式化、引用和註釋,這些文本標籤有助於建立一個結構良好的網站。
在網頁設計中,圖片是增強用戶體驗的重要元素。本文將介紹如何在 HTML 中使用圖片,包括基本語法、屬性設定等,幫助你更好的在網頁中使用圖片。
HTML 表單扮演著收集用戶資訊的重要角色。無論是登入頁面、註冊表、問卷調查,或是任何需要用戶輸入的場景,都離不開 HTML 表單。本文將帶你快速了解 HTML 表單的基礎知識,包括表單的結構、元素及其驗證方式。
在網頁開發中,HTML 表格是展示資料的一種重要方式。本文將介紹HTML表格的基本結構和合併單元格,並通過實際範例幫助你理解。
無論是跳轉到另一個網頁,還是在同一頁面內導航,HTML 連結都扮演著關鍵角色。本文將簡單的介紹 HTML 連結的基礎語法和使用方法。
在網頁設計中,列表是基本且重要的元素之一。透過 HTML 列表,我們能夠提高網頁內容的可讀性。本文將帶你了解 HTML 中的列表類型,以及它們的使用方式。
本文將介紹 HTML 中的標題、段落、文本格式化、引用和註釋,這些文本標籤有助於建立一個結構良好的網站。
你可能也想看
Google News 追蹤
Thumbnail
這個秋,Chill 嗨嗨!穿搭美美去賞楓,裝備款款去露營⋯⋯你的秋天怎麼過?秋日 To Do List 等你分享! 秋季全站徵文,我們準備了五個創作主題,參賽還有機會獲得「火烤兩用鍋」,一起來看看如何參加吧~
Thumbnail
11/20日NVDA即將公布最新一期的財報, 今天Sell Side的分析師, 開始調高目標價, 市場的股價也開始反應, 未來一週NVDA將重新回到美股市場的焦點, 今天我們要分析NVDA Sell Side怎麼看待這次NVDA的財報預測, 以及實際上Buy Side的倉位及操作, 從
Thumbnail
Hi 大家好,我是Ethan😊 相近大家都知道保濕是皮膚保養中最基本,也是最重要的一步。無論是在畫室裡長時間對著畫布,還是在旅途中面對各種氣候變化,保持皮膚的水分平衡對我來說至關重要。保濕化妝水不僅能迅速為皮膚補水,還能提升後續保養品的吸收效率。 曾經,我的保養程序簡單到只包括清潔和隨意上乳液
Thumbnail
圖片按鈕是網頁中常見的互動元素之一,它可以讓用戶進行操作,同時也為網頁增添了視覺吸引力。在這個教學中,我們將會學習如何使用 HTML 與 jQuery 創建一個簡單的圖片按鈕,並添加點擊事件。
Thumbnail
本篇習作內容,除了練習六角預習影音內的常用語法章節外,也額外整理了其它常用於文本的 HTML 元素,希望能透過這樣的整理,在未來設計結構更複雜的網站介面內容時,能扎穩根基。
Thumbnail
雖然知道可以透過 HTML 的 red, white, black 等顏色單字而非色票 (color code) 來使用顏色,一直以來開發上都是在找好適合的顏色後,使用 Sass 將色票紀錄到變數再做使用,不過最近接觸到 w3schools 的 HTML Color Names 才知道有將近...
img tag 必須使用direct link圖床,因此要看檔案副檔名是否為常見的圖片名稱。 有些網站會限制外網直接連結,所以篩選圖片要注意。
網頁輸入欄位動態改變範例 Html Dynamic DropDown Example
Thumbnail
一個網頁只會有一個h1 標籤(h1.p.img)裡面可以放多個屬性(src.background.color) 建立 HTML 環境 告訴大家這是html5的語法 關於整個專案的資訊放這裡面 頁籤標題 寫給別人看的要放這裡面 Emmet 預設安裝 /*語意使用英文*/ /*使
Thumbnail
初學程式的時候,可能會有幾個問題讓你的開發速度低落,腦袋動得很快,但是手卻跟不上想法。 舉例來說: 瀏覽器的DevTool一直報錯,畫面的邏輯出錯,或是畫面根本出不來,但你卻不知道問題出在哪。
Thumbnail
在HTML程式語言中,有一種能讓HTML元素與其他程式語言(CSS、JavaScript)運作的更加順利的語法,它叫做「HTML屬性(HTML Attribute)」。 那HTML屬性是怎麼運作的呢?
Thumbnail
HTML一種建立網頁架構的程式語言,對於初學程式的人來說,HTML是非常好上手的。 它沒有不像是CSS及JavaScript,沒有複雜的邏輯,只要更改程式碼,馬上就可以透過瀏覽器或是模擬器將結果顯示出來。
Thumbnail
許多初學網頁開發的朋友們,一開始都不太理解HTML、CSS、 JavaScript之間的差異性,導致初期規劃學習計畫時毫無頭緒。 會有這樣的困擾,主要在於不了解HTML、CSS、 JavaScript之間的關係,以及這三者在網頁運作時所扮演什麼角色,導致越學越阿雜的狀況。
Thumbnail
這個秋,Chill 嗨嗨!穿搭美美去賞楓,裝備款款去露營⋯⋯你的秋天怎麼過?秋日 To Do List 等你分享! 秋季全站徵文,我們準備了五個創作主題,參賽還有機會獲得「火烤兩用鍋」,一起來看看如何參加吧~
Thumbnail
11/20日NVDA即將公布最新一期的財報, 今天Sell Side的分析師, 開始調高目標價, 市場的股價也開始反應, 未來一週NVDA將重新回到美股市場的焦點, 今天我們要分析NVDA Sell Side怎麼看待這次NVDA的財報預測, 以及實際上Buy Side的倉位及操作, 從
Thumbnail
Hi 大家好,我是Ethan😊 相近大家都知道保濕是皮膚保養中最基本,也是最重要的一步。無論是在畫室裡長時間對著畫布,還是在旅途中面對各種氣候變化,保持皮膚的水分平衡對我來說至關重要。保濕化妝水不僅能迅速為皮膚補水,還能提升後續保養品的吸收效率。 曾經,我的保養程序簡單到只包括清潔和隨意上乳液
Thumbnail
圖片按鈕是網頁中常見的互動元素之一,它可以讓用戶進行操作,同時也為網頁增添了視覺吸引力。在這個教學中,我們將會學習如何使用 HTML 與 jQuery 創建一個簡單的圖片按鈕,並添加點擊事件。
Thumbnail
本篇習作內容,除了練習六角預習影音內的常用語法章節外,也額外整理了其它常用於文本的 HTML 元素,希望能透過這樣的整理,在未來設計結構更複雜的網站介面內容時,能扎穩根基。
Thumbnail
雖然知道可以透過 HTML 的 red, white, black 等顏色單字而非色票 (color code) 來使用顏色,一直以來開發上都是在找好適合的顏色後,使用 Sass 將色票紀錄到變數再做使用,不過最近接觸到 w3schools 的 HTML Color Names 才知道有將近...
img tag 必須使用direct link圖床,因此要看檔案副檔名是否為常見的圖片名稱。 有些網站會限制外網直接連結,所以篩選圖片要注意。
網頁輸入欄位動態改變範例 Html Dynamic DropDown Example
Thumbnail
一個網頁只會有一個h1 標籤(h1.p.img)裡面可以放多個屬性(src.background.color) 建立 HTML 環境 告訴大家這是html5的語法 關於整個專案的資訊放這裡面 頁籤標題 寫給別人看的要放這裡面 Emmet 預設安裝 /*語意使用英文*/ /*使
Thumbnail
初學程式的時候,可能會有幾個問題讓你的開發速度低落,腦袋動得很快,但是手卻跟不上想法。 舉例來說: 瀏覽器的DevTool一直報錯,畫面的邏輯出錯,或是畫面根本出不來,但你卻不知道問題出在哪。
Thumbnail
在HTML程式語言中,有一種能讓HTML元素與其他程式語言(CSS、JavaScript)運作的更加順利的語法,它叫做「HTML屬性(HTML Attribute)」。 那HTML屬性是怎麼運作的呢?
Thumbnail
HTML一種建立網頁架構的程式語言,對於初學程式的人來說,HTML是非常好上手的。 它沒有不像是CSS及JavaScript,沒有複雜的邏輯,只要更改程式碼,馬上就可以透過瀏覽器或是模擬器將結果顯示出來。
Thumbnail
許多初學網頁開發的朋友們,一開始都不太理解HTML、CSS、 JavaScript之間的差異性,導致初期規劃學習計畫時毫無頭緒。 會有這樣的困擾,主要在於不了解HTML、CSS、 JavaScript之間的關係,以及這三者在網頁運作時所扮演什麼角色,導致越學越阿雜的狀況。