語意化的 HTML ( Semantic HTML )
更新於 發佈於 閱讀時間約 3 分鐘
「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 是要有意義的，並適當的應用在其中
這樣說比較難懂，我們直接看圖片
圖片來源: What is Semantic HTML
圖片來源: 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
重點懶人包 :
- 使用有意義的 Tag Name ，將網頁結構化
- 讓人及搜尋引擎能夠輕鬆的看懂你的網站
- 優點 : SEO、下載速度快、好維護、無障礙網頁
- 正確使用 HTML 來強化網頁上內容的含義，而不僅僅是定義其外觀
參考與引用資料:
0會員
2內容數
留言0
查看全部
你可能也想看
Google News 追蹤
嘿，大家新年快樂~ 新年大家都在做什麼呢？
跨年夜的我趕工製作某個外包設計案，在工作告一段落時趕上倒數。
然後和兩個小孩過了一個忙亂的元旦。在深夜時刻，看到朋友傳來的解籤網站，興致勃勃熬夜體驗了一下，覺得非常好玩，或許有人玩過了，但還是想寫上來分享紀錄一下~
1. HTML 基礎：結構化內容
HTML（超文本標記語言）是用來描述網頁內容結構的語言。HTML 的核心由標籤（tags）組成，用於定義網頁的不同部分。
HTML 結構
HTML 的基本結構如下：
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
在這個章節中，我們介紹了HTML的基本概念，包括其作為結構化標記語言的特性、應用領域，以及主要使用者。這些知識為後續的深入學習和實踐奠定了基礎，幫助讀者了解HTML在現代網頁開發中的重要性。
要如何利用 HTML 標籤來增加網頁的結構性呢？HTML 標籤提供了 Google 爬蟲更多有用的資訊，讓爬蟲在爬行網站時可以更輕鬆且正確地分析網頁內容。本文將為你介紹 HTML 對於 SEO 的重要性以及 10 個常見的 HTML 語法。｜SEO
HTML 是什麼？
超文本標記語言（Hyper
一、SEO的基礎概念
搜索引擎優化（SEO, Search Engine Optimization）是指通過調整和改善網站內容、結構及其他因素，使網站在搜索引擎結果頁面（SERP）中的排名提升，以增加網站的可見性和流量。以下是SEO優化的幾個核心要素
在當今這個數位化的時代，網頁無處不在，我們每天都在使用互聯網瀏覽網頁，查找資訊、分享內容、購物等等。然而，網頁的背後是什麼？為什麼網頁能夠呈現出如此多元化的內容？
HTML（超文字標記語言）作為網頁設計的基礎語言，不僅影響了網頁的美學設計，同時也對網頁的功能性和互動性產生了重要影響。本文將探討HTML如何在網頁設計中影響美學與功能性，並進一步探討其如何與其他技術相結合，共同提升網頁設計的品質和效果。
首先，HTML在網頁設計中對美學方面的影響主要體現在網頁的
在當今數位化的時代，網頁設計已不僅僅是簡單地展示內容，更成為了吸引用戶和提升用戶體驗的重要手段。在這樣的背景下，HTML（超文字標記語言）作為網頁設計的基礎語言之一，對於網頁設計的靈活性和創意性有著深遠的影響。
人們對於學習HTML的興趣持續增長，本篇文章將解析HTML的架構、標籤、排序方式、標籤屬性和標籤結構解析的相關課程，為讀者提供全方位的學習體驗。
HTML 語意化標籤，不僅可以使網頁結構更加清晰、易於理解，也對搜索引擎優化(SEO)和提升網頁無障礙訪問性(Accessibility)有明顯的幫助。本文將介紹 HTML 語意化標籤的定義、重要性以及常見的語意化標籤。
嘿，大家新年快樂~ 新年大家都在做什麼呢？
跨年夜的我趕工製作某個外包設計案，在工作告一段落時趕上倒數。
然後和兩個小孩過了一個忙亂的元旦。在深夜時刻，看到朋友傳來的解籤網站，興致勃勃熬夜體驗了一下，覺得非常好玩，或許有人玩過了，但還是想寫上來分享紀錄一下~
1. HTML 基礎：結構化內容
HTML（超文本標記語言）是用來描述網頁內容結構的語言。HTML 的核心由標籤（tags）組成，用於定義網頁的不同部分。
HTML 結構
HTML 的基本結構如下：
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
在這個章節中，我們介紹了HTML的基本概念，包括其作為結構化標記語言的特性、應用領域，以及主要使用者。這些知識為後續的深入學習和實踐奠定了基礎，幫助讀者了解HTML在現代網頁開發中的重要性。
要如何利用 HTML 標籤來增加網頁的結構性呢？HTML 標籤提供了 Google 爬蟲更多有用的資訊，讓爬蟲在爬行網站時可以更輕鬆且正確地分析網頁內容。本文將為你介紹 HTML 對於 SEO 的重要性以及 10 個常見的 HTML 語法。｜SEO
HTML 是什麼？
超文本標記語言（Hyper
一、SEO的基礎概念
搜索引擎優化（SEO, Search Engine Optimization）是指通過調整和改善網站內容、結構及其他因素，使網站在搜索引擎結果頁面（SERP）中的排名提升，以增加網站的可見性和流量。以下是SEO優化的幾個核心要素
在當今這個數位化的時代，網頁無處不在，我們每天都在使用互聯網瀏覽網頁，查找資訊、分享內容、購物等等。然而，網頁的背後是什麼？為什麼網頁能夠呈現出如此多元化的內容？
HTML（超文字標記語言）作為網頁設計的基礎語言，不僅影響了網頁的美學設計，同時也對網頁的功能性和互動性產生了重要影響。本文將探討HTML如何在網頁設計中影響美學與功能性，並進一步探討其如何與其他技術相結合，共同提升網頁設計的品質和效果。
首先，HTML在網頁設計中對美學方面的影響主要體現在網頁的
在當今數位化的時代，網頁設計已不僅僅是簡單地展示內容，更成為了吸引用戶和提升用戶體驗的重要手段。在這樣的背景下，HTML（超文字標記語言）作為網頁設計的基礎語言之一，對於網頁設計的靈活性和創意性有著深遠的影響。
人們對於學習HTML的興趣持續增長，本篇文章將解析HTML的架構、標籤、排序方式、標籤屬性和標籤結構解析的相關課程，為讀者提供全方位的學習體驗。
HTML 語意化標籤，不僅可以使網頁結構更加清晰、易於理解，也對搜索引擎優化(SEO)和提升網頁無障礙訪問性(Accessibility)有明顯的幫助。本文將介紹 HTML 語意化標籤的定義、重要性以及常見的語意化標籤。