HTML 語意化(Sematic)

# 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)

Syntax	Example	Reference
# Header	Header	基本排版
- Unordered List	Unordered List
1. Ordered List	Ordered List
- [ ] Todo List	Todo List
> Blockquote	Blockquote
Bold font	Bold font
Italics font	Italics font
~~Strikethrough~~	~~Strikethrough~~
19^th^	19^th
H~2~O	H₂O
++Inserted text++	Inserted text
==Marked text==	Marked text
[link text](https:// "title")	Link
![image alt](https:// "title")	Image
`Code`	`Code`	在筆記中貼入程式碼
```javascript var i = 0; ```	`var i = 0;`
:smile:		Emoji list
{%youtube youtube_id %}	Externals
$L^aT_eX$	L^aT_eX
:::info This is a alert area. :::	This is a alert area.