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

1、什么是语义化?

必应网典的解释

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

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

2、语义化的好处?

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

3、HTML5的语义化

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

  结构:

<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/

时间: 2024-10-08 06:23:43

HTML的语义化和一些简单优化的相关文章

H5新特性之语义化标签

二月底,疫情仍未过去,在家逆战学习. 说道H5新特性的语义化标签,就不得不先简单说一下它的发展史,兼容和一些语法问题. H5在经过多达近百项的修改,包括HTML和XHTML的标签,相关的API,Canvas等,性 能得到进一步提升. H5仅仅是新增添了一些内容并优化了它们,而不是全盘否定之前的旧的内容.支持Html5 的浏览器包括Firefox(火狐浏览器),IE9及其更高版本,Chrome(谷歌浏览器),Safari, Opera等以及一些国内浏览器. 对于H5语法变化不大,文件的扩展名是不变

前端编程,语义化

什么是语义化?其实简单说来就是让机器可以读懂内容. 先随便扯扯.对于当前的 Web 而言,HTML 是联系大多数 Web 资源的纽带,也是内容的载体.在 Web 被刚刚设计出来的时候,Tim Berners-Lee 可能不会想到它现在会达到的规模以及深入到我们生活的那么多方面.也许起初的想法很简单:用来发布 Web 内容和资源的索引,方便人们查看. 但是随着 Web 规模的不断扩大,信息量之大已经不在人肉处理的范围之内了.这个时候人们开始用机器来处理 Web 上发布的各种内容,搜索引擎就诞生了.

html标签的语义化之搜索引擎优化

为了使我们的网站更好的被搜索引擎抓取收录,更自然的获得更高的流量, 网站标签的语义化就显得尤为重要.所谓标签语义化,就是指标签的含义.为了更好的理解标签的语义化,先看下面这个例子: <table> <tr> <td>娱乐项目</td> <td>项目支出</td> </tr> <tr> <td>聚餐</td> <td>200元</td> </tr> &l

什么是语义化的HTML?有何意义?为什么要做到语义化?

一.什么是语义化的HTML? 语义化的HTML就是正确的标签做正确的事情,能够便于开发者阅读和写出更优雅的代码的同时让网络爬虫很好地解析. 二.为什么要做到语义化? 1.有利于SEO,有利于搜索引擎爬虫更好的理解我们的网页,从而获取更多的有效信息,提升网页的权重. 2.在没有CSS的时候能够清晰的看出网页的结构,增强可读性. 3.便于团队开发和维护,语义化的HTML可以让开发者更容易的看明白,从而提高团队的效率和协调能力. 4.支持多终端设备的浏览器渲染. 三.语义化HTML该怎么做呢? 在做前

如何让你的JavaScript代码更加语义化

语义化这个词在 HTML 中用的比较多,即根据内容的结构化选择合适的标签.起作用不容小觑: 赋予标签含义,让代码结构更加清晰,虽然我们可以在标签上添加 class 来标识,但这种通过属性来表示本体的形式会显得不够直接,而且在一定程度上也有冗余. 优化搜索引擎(SEO),结构良好的网页对搜索引擎的亲和力是很高的,百度和 google 也给出了很多网页结构化的建议(规范),方便他们抓取网页. 利于设备解析,如盲人阅读器对页面的分析,目前淘宝很多网页都是支持盲人阅读的,这种体验上的优化得利于网页的良好

web标准和语义化

web语义化? 为了信息更加容易被机器理解和查找(主要是搜索引擎),有利于搜索引擎优化.同时,重点,便于苦逼的程序员进行阅读和维护(程序员已经够苦逼了,不要再折磨他了). HTML5进一步推进了web语义化发展,采用了footer.nav.header.sectiion等语义化标签. web标准? 简单的说就是将页面的结构.表现和行为各自独立实现(结构.表现和行为相分离原则),使它们更加模块化.

HTML5中最看重的理念“语义化”相比HTML有什么区别?

这里搜集整理了一些语义化标签方面的问题和解答,以供大家参考. 语义化这个概念应该说是伴着HTML5应运而生,那么什么是HTML5中所谓的语义化? 简单来说就是:描述内容的含义(meaning) 比如说<p>标签就是段落的意思,在HTML5中所有的标签都有它书面上的语义.而没有语义的标签在HTML中有,在HTML5中就没有了,比如<font>标签.而HTML5又为了补充HTML现在的不足而加上了一些新的标签,如<article>.<footer>.<he

HTML语义化:HTML5的新标签及IE5.5~9的部分兼容方案

一.前言 本文将介绍HTML5中新增的语义化标签,及在IE5.5~9(IE9已经开始支持部分HTML5新标签了)支持这些新标签的兼容性处理. 目录一坨: 二.语义化标签:article.aside.time.mark.section.header.footer.hgroup.progress.figure.figcaption.nav.meter.output.details.summary.ruby和main   三.让IE5.5~9支持HTML5新标签 1. IE5.5~8下对于不支持的标签

语义化 JavaScript 代码

语义化这个词在 HTML 中用的比较多,即根据内容的结构化选择合适的标签.其作用不容小觑: 赋予标签含义,让代码结构更加清晰,虽然我们可以在标签上添加 class 来标识,但这种通过属性来表示本体的形式会显得不够直接,而且在一定程度上也有冗余. 优化搜索引擎(SEO),结构良好的网页对搜索引擎的亲和力是很高的,百度和 google 也给出了很多网页结构化的建议(规范),方便他们抓取网页. 利于设备解析,如盲人阅读器对页面的分析,目前淘宝很多网页都是支持盲人阅读的,这种体验上的优化得利于网页的良好