语意标签-30天学会HTML＋CSS，制作精美网站

在HTML5中新增了语意标签，取代以前只能用<div>划分区块，可以更清楚知道网页区块设计目的，也有有利SEO的搜寻。下图是网站标签的结构，依序跟大家说明每个标签的意义

<header>网页页首

通常会放置logo、选单、搜寻框、注册按钮等元素。下面用三个网站不同排版的范例：

图片来源(https://syoss-selfcoloring.jp/ )

图片来源(https://fabric-tokyo.com/ )

图片来源(https://www.lacoste.jp/ )

<nav>导览列选单

用来连结到网站其他的页面。通常会放在标签内，或是独立一区块。以下两个范例都是选单独立成一块

图片来源(https://www.kyoto-tower.jp/)

图片来源(https://otent-nankai.jp/)

<main>网页主要的内容

这页面的主要资讯内容，也就是除了<header>、<nav>、<aside>、<footer>区块以外的内容，且一个网页只能有一个<main>标签

<aside>非主要的内容

与主要内容无关的额外资讯，像是侧边栏、广告、推荐文章....。范例旁边是与内容无关的资讯

图片来源(https://digitalist-web.jp/article/business/rKzdJ)

<article>文章

独立的区块包含一篇完整的内容，通常会有一个标题，像是新闻、部落格网站的文章

<section>群组或区块

制作一个区块的内容，用於章节段落的区分，会有标题及内容。

图片来源(https://digitalist-web.jp/)

与<article>不同的是，<section>不一定是独立内容，但一定会有标题。

<footer>网页页尾

通常会放置版权声明、相关连结、联络方式。以下三是三个不同footer排版的范例

图片来源(https://digitalist-web.jp/)

图片来源(https://pu-ca.jp/)

图片来源(https://www.mag2.co.jp/)

<div>无特定意义的区块

没有任何意义的区块，当想要组成群组，但不知道要放哪个区块

介绍完每个标签的意义後，以下用https://www.teinei.co.jp/ 网站来做整个网站的区块切割范例说明