# HTML & SEO

**< pre >**
preformatted text 保留完整格式

**< table >** 表格
**< tr >** table row
**< td >** table cell
**< th >** table header

**< a >** anchor 錨點

href :
hypertext reference

**< a href=“ 網址 ” >** 超連結

target :

**< a href=“ 網址 ” target =“ _self ” >** 當下自動跳轉
**< a href=“ 網址 ” target =“ _blank ” >** 另開新分頁

當頁面內容快速抵達的錨點使用：
先把要抵達的地方設 id 後，寫成 **< a href=“ #id ” >**

---

### 語意化元素 semantic elements :

便於搜尋機器人或是視障人士閱讀的標籤

_

<header>
<nav>  navigation 導覽
<main> 
<section>
<article>
<aside>
<mark>
<figure>
<time>
<suummary>
<footer>

更多資料：

MDN Semantics：https://developer.mozilla.org/en-US/docs/Glossary/Semantics
New Semantic Elements in HTML5：https://www.w3schools.com/html/html5_semantic_elements.asp

---

**iframe 使用別人寫好的網頁**

< iframe src=“ 網址” / >

可以下 X-Frame-Options 防止別人存你的網頁

---

**表單相關標籤**

**< form >** 表單

**< input >** 輸入框

type:

text 純文字
password (輸入文字時，瀏覽器會自動遮蔽不顯示)
email (送出表單時有些瀏覽器會自動驗證，但基本上還是要自己寫驗證)
date (可以預設自動選日期)
radio
checkbox
submit 送出表單

**< textarea >**

_

簡易範例

<form>
	姓名<input type=“text” />
	密碼<input type=“password” />
	信箱<input type=“email” />
	日期<input type=“date” />
	性別<input type=“radio” name=“gender” id=“male” />
    <label for=“male”>男</label>
	<input type=“radio”	name=“gender” id=“female” />
    <label for=“female”>女</label>
	<input type=“submit” value=“按鈕文字” />
    </form>

補充 radio 的部分，如果字沒有反應，只能按圓點才能選到的話，會很難選到，所以可以使用 < label >標籤，在 input標籤內加上 id後，在 label 標籤內加上 for 屬性，就可以文字也有反應區。
checkbox 也適用以上狀況。

*補充更多的 input 屬性：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input

---

### SEO 搜尋引擎優化

主動幫助搜尋引擎理解你的網頁

**1. meta 標籤**

範例

<mata name=“keywords” content=“ 餐廳,食物,信義區”>
<mata name=“description” content=“鼎泰豐信義區評價...”> 

＊但是聽說Google已經公告宣布此欄位無效

**2. OG (open graph protocol)**
通常是拿來給 FB 用的

**3. Json-ld (JSON for Linking Data)**
通常是 google 在看的
在搜尋結果會撈出一些我們主動提供想被撈出來的資訊，例如評價，分類等等

**4. robots.txt**
給網頁爬蟲看的檔案
通常放在根目錄底下，不想要被爬的可以使用 disallow 阻止

**5. Sitemap.xml**
給網頁爬蟲看的檔案

可以使用 google search console 看搜尋成效

_

如何在網頁瀏覽器內顯示標籤：Escape

& 換成 &
< 換成 &lt;
> 換成 &gt;