---
# System prepended metadata

title: HTML 語意化(Sematic)
tags: ['HTML, CSS']

---

# HTML 語意化(Sematic) 

---
tags: HTML CSS relate
---

###### tags: `HTML, CSS`

左邊是模糊的結構組成的網頁，右邊則是語意化過、被定義過的結構，這樣的做法可以讓SEO更好處理，提高目的網站在有關搜尋引擎內排名的方式

![](https://i.imgur.com/e1YwAmC.png)

> 搜尋引擎最佳化(search engine optimization，SEO），是一種透過了解搜尋引擎的運作規則來調整網站，以及提高目的網站在有關搜尋引擎內排名的方式。由於不少研究發現，搜尋引擎的用戶往往只會留意搜尋結果最前面的幾個條目，所以不少網站都希望透過各種形式來影響搜尋引擎的排序，讓自己的網站可以有優秀的搜尋排名。當中尤以各種依靠廣告維生的網站為甚。


--------------

`<nav>`  當作網頁的導覽索引用的標籤

`<article>` 文章本身就有意思的時候可以使用此標籤

`<aside>` 當作邊欄使用的標籤

`<figure>` 當作附錄的標籤使用 可放入圖片圖像code等等

`<section>` 一段有標題的內容時可以使用此標籤

appropriate element 如下元素`<P> <address> <blockquote> <pre>`被分在這邊

`<div>` 無上述語意化內容的化則使用此標籤



![](https://i.imgur.com/KoesfLG.png)
