给前端工程师和SEO优化人员的HTML5教学:语意标记入门
HTML5教学今天要来告诉大家一个入门小技巧!! 关于基础的语意标记~身为优化人员或是前端工程师的你可不能不会喔!!
HTML 5 的语意标记，对前端工程师来说，是不知不可的网路行销课程网页设计基础，决定了网页配置的逻辑；对于 SEO 优化师来说，虽然 HTML 5 的作用不是让网页可以被搜寻引擎自动撷取资料，但是却可以让搜寻引擎理解网页每个部份 (Section，在此有人翻成区块) 的排列逻辑、以及每个部份的作用等等，例如透过<header>告知搜寻引擎哪里是页头、<nav> 告知搜寻引擎哪里会列出导览内容等等，还 可以用来搭配 Schema 语意标记，协助搜寻引擎正确完成索引。
常见的 HTML 语意标记如下表所示：
|
标签名称 |
说明 |
|
<section> 区块 |
<section>主要是告知搜寻引擎「这是一个段落」，包覆的对象不以文章为限。 里面含标题<h1>-<h6>与内容<p>， 主要用途是告知搜寻引擎一个区块的主要内容 (内容就是这个<section>的标题) |
|
<article> 文章区块 |
<article>跟<section>性质相近，都有含标题<h1>-<h6>与内容。 但是相较于<section>，更强调所包覆的对象是「文章」 |
|
<header> 表头 |
以前用<div>架构会像这样写<div class="header">、<div class="footer">， HTML5 则可以分别使用<header>与<footer>标签来取代。在任何区块下的架构， 如果需要详细区分表头表尾时，就可使用<header>以及<footer>来架构，用于<body>标签下是最普遍的， 因为<body>的架构较大，需要清楚区分表头与表尾。 |
|
<footer> 表尾 |
|
|
<aside> 侧边栏位 |
逻辑上跟<header>以及<footer>的使用方式一样，只是位置是强调在「侧边」。 多用于WordPress、部落格、新闻网站常见的右边侧边栏， 显示最新文章、文章排行榜、其他连结、广告、推荐文章等等的讯息区块，就很适合用<aside>来做布局。 <aside>的语意算是跟本文无关的区块，也就是额外资讯，通常放的是跟主要文本无关的其他额外资讯 |
|
<main> 主要区块 |
在 HTML5 中用来放置这个页面主要的资讯，有点像以前的<div class="content"> 。 且每个页面中只能有一个<main>标签，且不能被置于在<nav><article><aside><footer><header>之中。 但是<article><aside><section>则可以可安被置于<main>当中。 |
|
<nav> 主要区块 |
网站内的导航区块，都适合使用<nav>来做架构，像是主选单、表尾选单等。 |
排版范例
如同以下的范例，<header>的内容就会出现在网页的页头；<nav>则是导览项目；<main>则是网页的主要区块，包含了<article>和<aside>，<article>内又分成不同的区块(<sector>)；<footer>则出现在页尾。
|
<header></header> <nav></nav> <main> <article></article> <sector></sector> <sector></sector> <aside></aside> </main> <footer> Updated on <time></time> </footer> |
既然语意标签和过去的<div>有相同的排版特性，那为什么要使用语意标签呢？最大的目的，是让搜寻引擎或是其他软体工具，可以更清楚的了解网页中每个区块的设计目的，让网页更容易被搜寻引擎"了解"，因此有增强网页SEO优化的效果。
其他阅读
14岁就成为IBM工程师!! Python是主要成功的原因? (上)
什么? AI人工智慧也会养虾? 电脑精准分析控制,结果让你一想不到!!
阿里巴巴也头疼!! 现在开始学习网路行销课程,就有机会帮马云解决烦恼!!
想知道屈臣氏是怎么利用大数据课程提升业绩的吗?看完这篇你就知道!!
