今天要介紹的東西是"標籤屬性"。

標籤屬性(Attributes)是讓標籤有更多變化、增加其他功能。最常用到的就是添加CSS，這時候我們就會用到style屬性，接下來我們將介紹怎麼使用。

例如我們有個h1的標題，我想要讓它是黃色的。

<h1 style="color: yellow;">標題</h1>

我們就可以在h1的後面空一格，加上style屬性，調整你想要的顏色，當然還可以增加許多屬性，邊框、字體顏色，置中，這些等之後的CSS介紹我們在更深入的討論!

常用語意標籤

首先我們要知道語意標籤是什麼呢?讓我們先看看這張圖

這是一個網頁基本組成的區塊，有最上方的頁首、依次是導覽列、內容的區塊、側邊欄位、及最底下的頁尾。

而其實如果你了解了我們前面所教學的div跟span區塊的定義，就會對語意標籤上手的十分快速，因為他們區別不大，只是善用這些語意標籤可以讓人更快速、更直白的了解到這個區塊是屬於網頁的哪個部分!

語意標籤:

<header>：網頁的最上方，通常會是標題，網站LOGO。
<nav>：網頁的選單、導覽列。
<main>：網頁的中間部分、主要內容。
<aside>：網頁的側邊欄、輔助內容。
<article>：一篇文章內容。
<section>：常見三欄或是四攔的自訂區塊，可以透過自行排版設定。
<footer>：網頁的頁尾，會有版權提醒、聯絡方式等等。
<mark>：強調特定區塊內容。
<time>：日期時間。

讓我們來看看他們的區別:

這是沒有語意標籤的部分

<div class="header"></div>
<div class="nav"></div>
<div class="main">
    <div class="article"></div>
    <div class="section"></div>
    <div class="aside"></div>
</div>
<div class="footer">
    &copy; making by jason
</div>

有語意標籤的部分

<header></header>
<nav></nav>
<main>
    <article></article>
    <section></section>
    <aside></aside>
</main>
<footer>
    &copy; making by jason
</footer>

看出來了嗎，最主要的區別是你直接將語意標籤拿出來用，或者是你一樣使用div，然後穩扎穩打的將分類名稱一一做好，其實兩者都是行得通的，但若是你能夠兩者都精通，是不是更上一層樓了呢!?