語意化的 HTML ( Semantic HTML )

更新於 2021/03/10閱讀時間約 3 分鐘
你的 HTML 有結構嗎?
「The correct use of HTML to reinforce the meaning of content on a web page, rather than merely define its appearance.」
Semantic 直譯「語意」,我個人比較喜歡稱他為「有意義且結構化的」
Semantic HTML,直譯就是「語意化的 HTML」(也有人稱做: semantically-correct HTML , 語意正確的 HTML )
指的是我們使用 HTML 建立架構的 Tag Name 是要有意義的,並適當的應用在其中
這樣說比較難懂,我們直接看圖片
( 圖一)、Semantic HTML,使用結構化的tag

圖片來源: What is Semantic HTML
( 圖二 )、Non-semantic HTML,使用div

圖片來源: What is Semantic HTML
在 HTML 5 以前,都是使用( 圖二 ) 的方式去做網頁的排版
開發人員使用大量的div,在去賦予其 ID 或是 Class 的屬性,創造更多豐富且有意涵的標記。
「HTML 5 introduces a number of new elements. Some of these are what I've termed “structural”— section, nav, aside, header, and footer.」
──
Semantics in HTML 5 by John Allsopp
所以,在 HTML 5 之後,是使用 ( 圖一 ) 的方式去做網頁的排版
使用有意義的 Tag Name ,將網頁結構化,這種方式就是 Semantic HTML


使用 Semantic HTML 的優點

  • 搜尋引擎優化 ( SEO,Search Engine Optimisation) ─ 透過自然排序增加曝光度
  • 下載速度快 ─ HTML檔案會比較小
  • 好維護 ─ 開發人員維護較方便
  • 無障礙網頁 ─ 提供身障人士用聲音來聽網頁
Semantic HTML 也是 SEO 的基礎,出發點是讓人能夠清楚理解,輕鬆的看懂網站以及搜尋引擎 ( 、機器或程式 ) 能夠簡單去處理
其實這一點就跟網站優化的目的相同:
  • 可以讓人類能夠清楚理解 - SMO
  • 適合被機器或程式處理 - SEO

重點懶人包 :

  1. 使用有意義的 Tag Name ,將網頁結構化
  2. 讓人及搜尋引擎能夠輕鬆的看懂你的網站
  3. 優點 : SEO、下載速度快、好維護、無障礙網頁
  4. 正確使用 HTML 來強化網頁上內容的含義,而不僅僅是定義其外觀

參考與引用資料:
avatar-img
0會員
2內容數
留言0
查看全部
avatar-img
發表第一個留言支持創作者!
你可能也想看
Google News 追蹤
Thumbnail
*合作聲明與警語: 本文係由國泰世華銀行邀稿。 證券服務係由國泰世華銀行辦理共同行銷證券經紀開戶業務,定期定額(股)服務由國泰綜合證券提供。   剛出社會的時候,很常在各種 Podcast 或 YouTube 甚至是在朋友間聊天,都會聽到各種市場動態、理財話題,像是:聯準會降息或是近期哪些科
Thumbnail
人類面對不見終了的時空,知其渺小,體察無常,無論何時何地都有生命崛起與消失,但每一種生命都有其能與時間抗衡,伴其延續自我的方式。王意婷以作品成形的時間為刻度,將其關懷、境遇封存起來,送往每時各地,環形時間觀,無止息地縈繞在她的創作之中。
Thumbnail
要對別人付諸感情,就必須先面對自己,當帥哥主角開始回顧自己為什麼無法好好面對喜歡對方的心情時,發現原來自己對BL的創作欲是來自於自己壓抑了會對同性產生好感的心情。身為腐女的姊姊讓他認識了BL,創作BL讓他得到了讚賞,然而……
一家人又有機會出門玩,本來是要去遊樂園,後來在媽媽提議之下改去某外縣市的鄉下體驗鄉下生活,不料穿越時空,接連發生怪事,所幸一家最後又九死一生的平安離開了
Thumbnail
#潛意識的力量比意識大3萬倍! 首先要先知道什麼是潛意識?什麼是意識?
Thumbnail
完整標題:can’t stand 與 can’t help 及 can’t bear 和 can’t fight 在語意中的差異之橋接分析
語意 16 女孩這一年是美少女 男孩這一年是學抽菸 數字在互換之後 61歲的你和妳 進入銀髮族班級 語意 17 同學上課不要偷吃便當 同學下課不要校外打架 同學假日不可去打電玩機台 同學都要為考
Thumbnail
*合作聲明與警語: 本文係由國泰世華銀行邀稿。 證券服務係由國泰世華銀行辦理共同行銷證券經紀開戶業務,定期定額(股)服務由國泰綜合證券提供。   剛出社會的時候,很常在各種 Podcast 或 YouTube 甚至是在朋友間聊天,都會聽到各種市場動態、理財話題,像是:聯準會降息或是近期哪些科
Thumbnail
人類面對不見終了的時空,知其渺小,體察無常,無論何時何地都有生命崛起與消失,但每一種生命都有其能與時間抗衡,伴其延續自我的方式。王意婷以作品成形的時間為刻度,將其關懷、境遇封存起來,送往每時各地,環形時間觀,無止息地縈繞在她的創作之中。
Thumbnail
要對別人付諸感情,就必須先面對自己,當帥哥主角開始回顧自己為什麼無法好好面對喜歡對方的心情時,發現原來自己對BL的創作欲是來自於自己壓抑了會對同性產生好感的心情。身為腐女的姊姊讓他認識了BL,創作BL讓他得到了讚賞,然而……
一家人又有機會出門玩,本來是要去遊樂園,後來在媽媽提議之下改去某外縣市的鄉下體驗鄉下生活,不料穿越時空,接連發生怪事,所幸一家最後又九死一生的平安離開了
Thumbnail
#潛意識的力量比意識大3萬倍! 首先要先知道什麼是潛意識?什麼是意識?
Thumbnail
完整標題:can’t stand 與 can’t help 及 can’t bear 和 can’t fight 在語意中的差異之橋接分析
語意 16 女孩這一年是美少女 男孩這一年是學抽菸 數字在互換之後 61歲的你和妳 進入銀髮族班級 語意 17 同學上課不要偷吃便當 同學下課不要校外打架 同學假日不可去打電玩機台 同學都要為考