HTML 程式札記 : 語意化標籤
HTML 語意化標籤，不僅可以使網頁結構更加清晰、易於理解，也對搜索引擎優化(SEO)和提升網頁無障礙訪問性(Accessibility)有明顯的幫助。本文將介紹 HTML 語意化標籤的定義、重要性以及常見的語意化標籤。
什麼是 HTML 語意化標籤？
HTML語意化標籤指的是那些具有明確含義，能夠描述其包含內容類型的標籤，如<header>、<footer>、<article>等。這些標籤的使用不僅有助於開發者快速識別網頁結構，也能讓搜索引擎更容易理解網頁內容，從而提升SEO效果。
為什麼要使用 HTML 語意化標籤？
- 提升SEO效果： 語意化標籤讓搜索引擎更容易解析網頁結構和內容，有利於提升網頁在搜索結果中的排名。
- 增強網頁可讀性： 清晰的標籤使得程式碼更容易理解和維護，提升開發效率。
- 促進無障礙訪問： 這些標籤可以改善使用輔助技術（如屏幕閱讀器）的用戶的網頁導航體驗。
常見的 HTML 語意化標籤
<header>和<footer>： 分別用於標記頁面或內容區塊的頭部和尾部。<nav>： 表示導航菜單，幫助用戶和搜索引擎理解網站結構。<main>： 指定網頁的主要內容區域。<article>： 代表一個獨立的內容塊，如博客帖子或新聞文章。<section>： 用於組織相關內容，劃分不同的章節。<aside>： 表示與主內容相關的輔助信息，如側欄。<mark>： 強調文本中的關鍵詞或句子。<time>： 明確標記時間或日期。<details>和<summary>： 提供可展開和收起的詳細信息。
😊 感謝你的耐心閱讀，若是你喜歡這篇內容，可以透過以下方式表達你的喜歡 😊
60會員
91內容數
「梧笙」即「吾生」，意即我的生命，朋友都叫我「阿梧(Awu)」，高雄人。我喜歡學習新技能，從程式設計到網路工具，再到社群經營和影片剪輯。日常興趣是打遊戲、看動漫、讀小說和聽音樂。我會把這些興趣寫成文章，如果你有任何想法或問題，歡迎來信到我的郵箱 [email protected]
留言0
查看全部
你可能也想看
Google News 追蹤
這個秋，Chill 嗨嗨！穿搭美美去賞楓，裝備款款去露營⋯⋯你的秋天怎麼過？秋日 To Do List 等你分享！
秋季全站徵文，我們準備了五個創作主題，參賽還有機會獲得「火烤兩用鍋」，一起來看看如何參加吧～
美國總統大選只剩下三天， 我們觀察一整週民調與金融市場的變化（包含賭局）， 到本週五下午3:00前為止， 誰是美國總統幾乎大概可以猜到60-70%的機率， 本篇文章就是以大選結局為主軸來討論近期甚至到未來四年美股可能的改變
Faker昨天真的太扯了，中國主播王多多點評的話更是精妙，分享給各位
王多多的點評
「Faker是我們的處境，他是LPL永遠繞不開的一個人和話題，所以我們特別渴望在決賽跟他相遇，去直面我們的處境。
我們曾經稱他為最高的山，最長的河，以為山海就是盡頭，可是Faker用他28歲的年齡...
圖片按鈕是網頁中常見的互動元素之一，它可以讓用戶進行操作，同時也為網頁增添了視覺吸引力。在這個教學中，我們將會學習如何使用 HTML 與 jQuery 創建一個簡單的圖片按鈕，並添加點擊事件。
本篇習作內容，除了練習六角預習影音內的常用語法章節外，也額外整理了其它常用於文本的 HTML 元素，希望能透過這樣的整理，在未來設計結構更複雜的網站介面內容時，能扎穩根基。
雖然知道可以透過 HTML 的 red, white, black 等顏色單字而非色票 (color code) 來使用顏色，一直以來開發上都是在找好適合的顏色後，使用 Sass 將色票紀錄到變數再做使用，不過最近接觸到 w3schools 的 HTML Color Names 才知道有將近...
img tag 必須使用direct link圖床，因此要看檔案副檔名是否為常見的圖片名稱。
有些網站會限制外網直接連結，所以篩選圖片要注意。
網頁輸入欄位動態改變範例
Html Dynamic DropDown Example
一個網頁只會有一個h1
標籤(h1.p.img)裡面可以放多個屬性(src.background.color)
建立 HTML 環境
告訴大家這是html5的語法
關於整個專案的資訊放這裡面
頁籤標題
寫給別人看的要放這裡面
Emmet 預設安裝
/*語意使用英文*/
/*使
初學程式的時候，可能會有幾個問題讓你的開發速度低落，腦袋動得很快，但是手卻跟不上想法。
舉例來說： 瀏覽器的DevTool一直報錯，畫面的邏輯出錯，或是畫面根本出不來，但你卻不知道問題出在哪。
在HTML程式語言中，有一種能讓HTML元素與其他程式語言（CSS、JavaScript）運作的更加順利的語法，它叫做「HTML屬性（HTML Attribute）」。
那HTML屬性是怎麼運作的呢？
HTML一種建立網頁架構的程式語言，對於初學程式的人來說，HTML是非常好上手的。
它沒有不像是CSS及JavaScript，沒有複雜的邏輯，只要更改程式碼，馬上就可以透過瀏覽器或是模擬器將結果顯示出來。
許多初學網頁開發的朋友們，一開始都不太理解HTML、CSS、 JavaScript之間的差異性，導致初期規劃學習計畫時毫無頭緒。
會有這樣的困擾，主要在於不了解HTML、CSS、 JavaScript之間的關係，以及這三者在網頁運作時所扮演什麼角色，導致越學越阿雜的狀況。
這個秋，Chill 嗨嗨！穿搭美美去賞楓，裝備款款去露營⋯⋯你的秋天怎麼過？秋日 To Do List 等你分享！
秋季全站徵文，我們準備了五個創作主題，參賽還有機會獲得「火烤兩用鍋」，一起來看看如何參加吧～
美國總統大選只剩下三天， 我們觀察一整週民調與金融市場的變化（包含賭局）， 到本週五下午3:00前為止， 誰是美國總統幾乎大概可以猜到60-70%的機率， 本篇文章就是以大選結局為主軸來討論近期甚至到未來四年美股可能的改變
Faker昨天真的太扯了，中國主播王多多點評的話更是精妙，分享給各位
王多多的點評
「Faker是我們的處境，他是LPL永遠繞不開的一個人和話題，所以我們特別渴望在決賽跟他相遇，去直面我們的處境。
我們曾經稱他為最高的山，最長的河，以為山海就是盡頭，可是Faker用他28歲的年齡...
圖片按鈕是網頁中常見的互動元素之一，它可以讓用戶進行操作，同時也為網頁增添了視覺吸引力。在這個教學中，我們將會學習如何使用 HTML 與 jQuery 創建一個簡單的圖片按鈕，並添加點擊事件。
本篇習作內容，除了練習六角預習影音內的常用語法章節外，也額外整理了其它常用於文本的 HTML 元素，希望能透過這樣的整理，在未來設計結構更複雜的網站介面內容時，能扎穩根基。
雖然知道可以透過 HTML 的 red, white, black 等顏色單字而非色票 (color code) 來使用顏色，一直以來開發上都是在找好適合的顏色後，使用 Sass 將色票紀錄到變數再做使用，不過最近接觸到 w3schools 的 HTML Color Names 才知道有將近...
img tag 必須使用direct link圖床，因此要看檔案副檔名是否為常見的圖片名稱。
有些網站會限制外網直接連結，所以篩選圖片要注意。
網頁輸入欄位動態改變範例
Html Dynamic DropDown Example
一個網頁只會有一個h1
標籤(h1.p.img)裡面可以放多個屬性(src.background.color)
建立 HTML 環境
告訴大家這是html5的語法
關於整個專案的資訊放這裡面
頁籤標題
寫給別人看的要放這裡面
Emmet 預設安裝
/*語意使用英文*/
/*使
初學程式的時候，可能會有幾個問題讓你的開發速度低落，腦袋動得很快，但是手卻跟不上想法。
舉例來說： 瀏覽器的DevTool一直報錯，畫面的邏輯出錯，或是畫面根本出不來，但你卻不知道問題出在哪。
在HTML程式語言中，有一種能讓HTML元素與其他程式語言（CSS、JavaScript）運作的更加順利的語法，它叫做「HTML屬性（HTML Attribute）」。
那HTML屬性是怎麼運作的呢？
HTML一種建立網頁架構的程式語言，對於初學程式的人來說，HTML是非常好上手的。
它沒有不像是CSS及JavaScript，沒有複雜的邏輯，只要更改程式碼，馬上就可以透過瀏覽器或是模擬器將結果顯示出來。
許多初學網頁開發的朋友們，一開始都不太理解HTML、CSS、 JavaScript之間的差異性，導致初期規劃學習計畫時毫無頭緒。
會有這樣的困擾，主要在於不了解HTML、CSS、 JavaScript之間的關係，以及這三者在網頁運作時所扮演什麼角色，導致越學越阿雜的狀況。