HTML的语义化和一些简单优化

编程爱好者联盟 2016-10-11

1、什么是语义化？

      必应网典的解释

[blockquote]

语义化是指用合理HTML标记以及其特有的属性去格式化文档内容。通俗地讲,语义化就是对数据和信息进行处理,使得机器可以理解. 语义化的(X)HTML文档有助于提升你的网站对访客的易用性，比如使用PDA、文字浏览器以及残障人士将从中受益。对于搜索引擎或者爬虫软件来说，则有助于它们建立索引，并可能给予一个较高的权值。 事实上SEO最有效的一种办法，就是对网页的HTML结构进行重构，实质上就是语义化。

[/blockquote]

简单来说，就是根据内容的结构化（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析，什么样的内容就用什么样的标签。

2、语义化的好处？

  • 在css文件没有成功加载的时候页面也能呈现好的内容结构；
  • 利于SEO，让搜索引擎和爬虫软件抓取更多有用的信息，建立索引，获取较高的权值；
  • 方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页；

3、HTML5的语义化

最新的HTML5就网页结构化增加了一系统的结构化标签

HTML的语义化和一些简单优化

结构：

<header>头部</header>
<nav>导航</nav>
<article>
    <section>内容1</section>
    <section>内容2</section>
    <section>内容3</section>
</article>
<aside>侧边栏</aside>
<footer>底部</footer>

4、写HTML需要注意的点

  • 标签闭合</>，/>;
  • 正确使用标签嵌套，避免行内元素包围块元素；
  • 合理使用标签，尽量少使用无语义的标签div，span，在css文件没有成功加载的时候页面也能呈现好的内容结构；
  • 使用<h1>、<h2>、<h3>、<h4>、<h5>、<h6>,作为标题使用，并且依据重要性递减，<h1>是最高的等级；
  • 使用<p>区分段落，避免使用<br />换行；
  • 不要使用纯样式的标签，b，font，u等，改为css设置；
  • 使用表格时，使用<thead>，<tbody>，<tfoot>包围头部，主体内容，表格；

5、关于SEO优化，HTML需要做些什么？

  • 文档类型统一使用HTML5 doctype <!DOCTYPE HTML>；
  • meta标签优化，主要有title、description、keywords三个地方，结束不要使用” />，应该直接写”>；
  • css文件最好使用一个，放在头部<head>标签里面；
  • js文件最好放在底部，避免因加载js文件阻塞HTML的渲染；
  • 使用外联文件，避免在HTML直接写css和js的代码；
  • 引入文件时使用绝对地址，绝对地址包括了网站的域名；
  • img标签加上alt关键字，利于SEO优化，尽量不要使用”的、”上、”好、”等等等，搜索引擎数据库默认不收录的字；
  • logo处加h1标签，搜索引擎默认h1标签这个标题是网页中最重要的信息，所以我们把最重要信息入在<H1>标签内；

关于html网页是否符合标准，可以在这个网页检查，直接输入链接即可查看检查结果

https://validator.w3.org/nu/

编程爱好者联盟

编程爱好者联盟

相关推荐

如何理解HTML语义化的？

通常由PHP后端来写HTML，但是他们并不会CSS，于是就用table来进行布局。但我们都知道，table其实是用来展示表格的，这一条就与语义化严重相悖。后来前端慢慢分离成一个单独的岗位，他们会使用DIV+CSS布局，并且主要利用float和绝对定位进行布

tianqi / 0评论 2020-07-05

HTML语义化

之前我一直没有重视过HTML语义化，觉得<div>+<span>，再用上一些基本的语义化标签，比如<p>,<h1>等等，写一些比较普通的页面足够了。但是，我们应当追求把语义化标签用对，而不是仅仅完成一个页面就

爱好HtmlCssJs / 0评论 2020-01-19

html标签语义化

HTML标签语义化，就是尽量使用有相对应结构含义的HTML标签，少用无语义的。比如<span>或<div>就是无意义的，看不出是什么东西，而<address>一看就知道这里面的是地址，<em>标签一看就知道这

swiftwwj / 0评论 2020-01-19

html5被忽略的语义化标签

在html5没出来之前，一直用html的div+css进行布局，通篇div+span，确实不优雅。html5新增了很多语义化的标签，帮助我们写出更优雅的html结构。<p>发布时间：<time pubdate='2019-05-06'&g

冯二爷 / 0评论 2019-11-18

为什么要用语义化标签？

语义化的HTML就是正确的标签做正确的事情，能够便于开发者阅读和写出更优雅的代码的同时让网络爬虫很好地解析。标签语义化有助于构架良好的HTML结构，有利于搜索引擎的建立索引、抓取。简单来说，试想在H1标签中匹配到的关键词和在div中匹配到的关键词搜索引擎会

谷歌架构师 / 0评论 2019-11-05

为什么要用语义化标签？

语义化的HTML就是正确的标签做正确的事情，能够便于开发者阅读和写出更优雅的代码的同时让网络爬虫很好地解析。标签语义化有助于构架良好的HTML结构，有利于搜索引擎的建立索引、抓取。简单来说，试想在H1标签中匹配到的关键词和在div中匹配到的关键词搜索引擎会

wysjwh / 0评论 2019-11-05

为什么要用语义化标签？

语义化的HTML就是正确的标签做正确的事情，能够便于开发者阅读和写出更优雅的代码的同时让网络爬虫很好地解析。标签语义化有助于构架良好的HTML结构，有利于搜索引擎的建立索引、抓取。简单来说，试想在H1标签中匹配到的关键词和在div中匹配到的关键词搜索引擎会

tanjiayq / 0评论 2019-11-05

HTML基础复习——语义化

HTML语义化概念官方解释：语义化是指用合理的HTML标记以及其特有的属性去格式化文档内容。通俗地讲,语义化就是对数据和信息进行处理,使得机器可以理解。我认为最好的理解就是将office中的Word与其对比。包括我现在写的文章是用Markdown来完成的，

谷歌架构师 / 0评论 2019-07-01

HTML语义化、结构化标签（个人小结）

结构化的标签，它在一个网页结构中，可以清楚的表示该部分在文档中的结构含义。HTML5关注的不仅是呈现出一个页面的效果，它更加关注如何构造一个结构化的代码内容优雅地页面。HTML5新增的结构化标签虽然本质上都是div标签，但它用语义化的命名方式使得一个HTM

冯二爷 / 0评论 2019-06-29

前端进阶系列(一):SEO和HTML语义化

基本概念SEO：意为搜索引擎优化。搜索引擎优化是一种利用搜索引擎的搜索规则来提高目的网站的自然排名的方式。说白了就是对品牌的自我宣传，从而获取收益。HTML语义化：根据内容的结构的语义化，选择合适的标签便于开发者阅读和写出更优雅的代码的同时利于SEO优化。

冯二爷 / 0评论 2019-06-28

HTML&CSS基础学习笔记1.21-语义化标签

“语义化”指的是机器在需要更少的人类干预的情况下能够研究和收集信息，让网页能够被机器理解，最终让人类受益。HTML 标签语义化是让大家直观的认识标签和属性的用途和作用，很明显<hx>看起来很像标题，因为拥有粗体和较大的字号。HTML标签语义化的

wysjwh / 0评论 2016-08-19

Web语义化详解

Web语义化主要包括：HTTP语义化、HTML语义化和CSS命名语义话。对于HTML体系而言，Web语义化是指使用语义恰当的标签，使页面有良好的结构，页面元素有含义，能够让人和机器都容易理解。如<h1>标签的表现样式是粗体，字体大小2em，其样

e度空间 / 0评论 2016-07-21

html标签的语义化

而不是长的是什么样子？<h1>、<h2>、<h3>、<h4>、<h5>、<h6>,作为标题使用，并且依据重要性递减。<h1>是最高的等级。p中的文字会自动换行，而且换行的效

knijiokm / 0评论 2015-08-03

web语义化

web语义化是指能够让机器读懂语言。我所了解的web语义化包含两个方面：html标签语义化合css类名语义化。为了更快地让搜索引擎搜到查找的内容。我们常见的css类名有 left-content right-bar等通过方位来命名的，如果我想把right

zhaosnow / 0评论 2015-03-03

对HTML语义化的一些理解和记录

什么是HTML语义化说HTML语义化就要先说说HTML到底负责的什么？下面摘自维基百科：。超文本标记语言是一种用于创建网页的标准标记语言。<p> 中的文字会自动换行，而且换行的效果优于 <br />。段落与段落之间的空隙也可以利用

renpinghao / 0评论 2019-06-27

标签语义化

分离结构与表现的另一个重要方面是使用语义化的标记来构造文档内容。section 不仅仅是一个普通的容器标签。一般来说，当元素内容明确地出现在文档大纲中时，section 就是适用的。article 是一个特殊的 section 标签，它比 section

luffot / 0评论 2014-08-06

html5 语义化标签

HTML 5的革新之一：语义化标签一节元素标签。在HTML 5出来之前，我们用div来表示页面章节，但是这些div都没有实际意义。这些标签只是我们提供给浏览器的指令，只是定义一个网页的某些部分。但现在，那些之前没“意义”的标签因为因为html5的出现消失了

zxcasd / 0评论 2014-04-15

会说话的HTML--语义化杂谭-TGideas-腾讯游戏官方设计团队

家里有个熊孩子，经常会有一些意想不到的事情发生：回家的时候，他会笑呵呵冲过来，大声喊着“臭爸爸”；你让他把鞋穿上，他会提起鞋子往楼下扔...在小孩的世界里，他虽然会说话，但不一定明白其中的意思，不能正确表达；同样他也会做一些事情，但不一定按正常大人的逻辑，

zljiaa / 0评论 2014-03-24

语义化HTML标签

CSS是装饰材料，是油漆，是用来装饰房子的。CSS如果没有HTML结构那就什么也不是了，没有了实际使用价值。CSS完全依靠引用它的HTML文档。还好随着CSS的重现江湖，表格也终于回到他的本质工作——列表数据。<h1>是最高的等级。p中的文字会

zjnig的信息仓库 / 0评论 2013-09-30

HTML 5 新特性--语义化新标签<footer> &<header>

<header>标签定义文档的页眉。与<head>相同，<header>也旨在提供一些介绍性信息，但是这两个标签的作用域不同。虽然<head>标签能够提供关于整个文档的信息，但是<header>仅

owhile / 0评论 2013-06-28

HTML语义化

何为HTML语义化语义化是指根据内容的结构化，选择合适的标签，便于开发者阅读和写出更优雅的代码的同时，让浏览器的爬虫和机器很好的解析。有利于SEO，有助于爬虫抓取更多的有效信息，爬虫是依赖于标签来确定上下文和各个关键字的权重。尽可能少的使用无语义的标签di

renpinghao / 0评论 2019-06-21

标签语义化

主要总结标签语义化方面的内容。HTML的标签都是有语义的。下面列出一些常见的标签及其语义：。由于css 很强大，无论有没有按照语义选择标签，都可以实现需要的设计。事实上，css布局只是web标准的一部分。so, 正确的做法是：先确定html, 确定语义的标

renpinghao / 0评论 2019-06-21

代码语义化是最好的SEO

小站开张之后，我就一直在关注小站的站名“CSS魔法”在搜索引擎里的表现。在发布了 某篇 CSS 教程 之后，“二级导航制作”、“折叠二级导航”等关键词也给小站带来了少许流量。在建博之前，小站的页面均为手写，力求语义化标签的合理运用；同时，对页面头部的 ti

SEO笔者小丹i / 0评论 2009-12-31

SEO 用语义化的HTML制作网页

不，这不是一些新的网页设计上的时尚的宣传- POSH是Plain Old Semantic HTML缩写。语义的HTML这个词被用于各种各样的事情，但它起源于一个目标：使用语义化的标记和属性建立XHTML文档，而不是用表象的HTML 。POSH这个名词被创

linfei0 / 0评论 2009-11-28

html语义化(转)

作为一个前端开发人员，你要是没有听说过 CSS，那你肯定是一个 “out-man” 。随着 CSS 的深入人心，结构、表现与行为的逐渐分离，HTML 语义化成了炙手可热的卖点。CSS 是装饰材料，是油漆，是用来装饰房子的。CSS 完全依靠引用它的 HTML

andyhu00 / 0评论 2011-11-27

扣丁学堂HTML5培训简述HTML5新特性之语义化标签

HTML5 只有一个简单的文档类型：&lt;!DOCTYPE html&gt;，表示浏览器会按照标准模式解析。你现在可以在meta 标签中使用"charset"：&lt;meta charset="ut

lihaikuo / 0评论 2018-11-21

web前端技术课程内容详解之语义化标签的理解

在学习HTML阶段的最后，我们会涉及到学习语义化标签，明明用div等标签就可以构成页面，那么为什么还会有语义化标签的存在？学好语义化标签又会在哪方面应用？接下来会从上面几个方面说一下我的理解。再就是便于团队开发和维护，语义化更具可读性，遵循W3C标准的团队

haohong / 0评论 2018-11-22

语义化HTML结构漫谈

相信大家都知道HTML和CSS，知道HTML结构和CSS表现分离，知道HTML语义化，这些都是这几年的热门关键字。语义化的HTML在国内也是一两年前才开始被追捧的，看看现在群里谈论的HTML结构，关于HTML结构的面试题，语义化的HTML占据了很大一部分。

hitris / 0评论 2009-07-14

web前端及HTML语义化的理解

WEB前端开发主要是使用HTML、CSS、JavaScript技术，将美工提供的美工图转化为网页。同时，需要顾及SEO以及后台的数据。WEB前端，相当于是一个连接美工、后台以及用户的中间平台。

编程爱好者联盟 / 0评论 2016-10-29