https://tutorial.jumpdesign.tw/web_tutorial.html

📌  標頭標籤 <header>

<header>元素表示用於介紹內容或一組導航鏈接的容器。一個<header>元素通常包含： 一個或多個標題元素(<h1> - <h6>)標誌、圖標、作者信息。

*<header>標籤不能放置在<footer>，<address>或另一個<header>元素中。

<header>
	<h1>田老大設計工作室</h1>
	<nav>...</nav>
</header>

<section>
	<header>
		<h2>關於我們</h2>
		<h3>About us</h3>
	</header>
</section>

🖥️  延伸閱讀：

w3schools: https://www.w3schools.com/tags/tag_header.asp

📌  導覽標籤<nav>

是以Navigation縮寫定義。

建立網頁的導覽區段，連結其他網頁的超連結集合，

通常只有主要導覽區段會建立在<nav>中。

<header>
	<h1>田老大設計工作室</h1>
	<nav>
		<ul> 
			<li><a href=”/news/”>最新消息</a></li>
			<li><a href=”/services/”>關於我們</a></li>
			<li><a href=”/about/”>服務項目</a></li>
		</ul>
	</nav>
</header>

🖥️  延伸閱讀：

w3schools: https://w3schools.com/tags/tag_nav.asp

📌  影像群組標籤<figure>

✏️ 影像群組標籤<figure>

  用來將多個影像封裝成一個群組。

✏️ 相片標題標籤<figcaption>

   用來定義影像名稱。
   *必須置於<figure>中，不可獨立使用

<article>
	<figure>
		<img src=”photo1.jpg”>
		<img src=”photo2.jpg”>
	</figure>
	<p>...</p>
</article>

<article>
	<figure>
		<img src=”photo3.jpg”>
		<figcaption>相片名稱標題</figcaption>
	</figure>
	<p>...</p>
</article>

🖥️  延伸閱讀：

w3schools: https://w3schools.com/tags/tag_figure.asp

📌  區塊元素說明

【main】

【article】

【section】