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

吴秋彤的博客      2022-02-06     265

关键词:

一、什么是语义化的HTML?

语义化的HTML就是正确的标签做正确的事情,能够便于开发者阅读和写出更优雅的代码的同时让网络爬虫很好地解析。

二、为什么要做到语义化?

1、有利于SEO,有利于搜索引擎爬虫更好的理解我们的网页,从而获取更多的有效信息,提升网页的权重。

2、在没有CSS的时候能够清晰的看出网页的结构,增强可读性。

3、便于团队开发和维护,语义化的HTML可以让开发者更容易的看明白,从而提高团队的效率和协调能力。

4、支持多终端设备的浏览器渲染。

三、语义化HTML该怎么做呢?

在做前端开发的时候要记住:HTML 告诉我们一块内容是什么(或其意义),而不是它长的什么样子,它的样子应该由CSS来决定。(结构与样式分离!)

写语义化的 HTML 结构其实很简单,首先掌握 HTML 中各个标签的语义,在看到内容的时候想想用什么标签能更好的描述它,是什么就用什么标签。

<h1>~<h6> ,作为标题使用,并且依据重要性递减,<h1> 是最高的等级。

<p>段落标记,知道了 <p> 作为段落,你就不会再使用 <br /> 来换行了,而且不需要 <br /> 来区分段落与段落。<p> 中的文字会自动换行,而且换行的效果优于 <br />。段落与段落之间的空隙也可以利用 CSS 来控制,很容易而且清晰的区分出段落与段落。

<ul>、<ol>、<li>,<ul> 无序列表,这个被大家广泛的使用,<ol> 有序列表也挺常用。在 web 标准化过程中,<ul> 还被更多的用于导航条,本来导航条就是个列表,这样做是完全正确的,而且当你的浏览器不支持 CSS 的时候,导航链接仍然很好使,只是美观方面差了一点而已。

<dl>、<dt>、<dd>,<dl> 就是“定义列表”。比如说词典里面的词的解释、定义就可以用这种列表。

<em>、<strong>,<em> 是用作强调,<strong> 是用作重点强调。

<q>也不仅仅只是为文字增加双引号,而是代表这些文字是引用来的。

<table>、<td>、<th>、<caption>, (X)HTML中的表格不再是用来布局。

补充:网络爬虫,SEO等概念


SEO:Search Engine Optimization——搜索引擎优化,这是一种利用搜索引擎的搜索规则,采取优化策略或程序,提高网站在搜索结果中的排名。

网络爬虫:又称网络蜘蛛、网络机器人,是一种搜索引擎用于自动抓取网页资源的程序或者说叫机器人。从某一个网址为起点,去访问,然后把网页存回到数据库中,如此不断循环,一般认为搜索引擎爬虫都是靠链接爬行的,所以管他叫爬虫。这个只有开发搜索引擎才会用到。对于网站而言,只要有链接指向我们的网页,爬虫就会自动提取我们的网页。

来源:http://www.w3cfuns.com/notes/32557/6b91faf9614287c822fb49c6d8af02e2.html









































前端重要基础知识整理

HTML:1.什么是语义化的HTML?有何意义?为什么要做到语义化?2.行内元素和块元素分别有哪些?3.Doctype是什么?有啥作用?4.iframe的优缺点CSS:1.CSS盒子模型2.CSS优先级3.不使用js,元素垂直居中  1).简单版  2).高级版//未完  查看详情

什么是语义化?语义化有什么好处吗?

当你写html时,要按照人们的思考逻辑写。不但要自己和别人能看懂,也要让网页能看懂,不要让别人觉得你的代码很乱。语义化的主要目的就是让大家直观的认识标签和属性的用途和作用。那语义化的网页的好处,最主要的就... 查看详情

回顾html5的语义化元素

...就是语义化的元素,我们知道这个标签代表是什么。 为什么要推行语义化的元素   对浏览器:     更好的搜索引擎收录。    增强网页的结构性。   对用户,工程师和维护团队: 查看详情

02你是如何理解html语义化的,有什么好处

...HTML标签添加有意义的class和id来补充未表达的语义。05,为什么需 查看详情

面试--html语义化的理解和作用

...写出更优雅的代码2、让浏览器的爬虫和机器很好的解析为什么要语义化有利于seo方便其他设备监听屏幕阅读设备盲人阅读器方便团队协作开发语义化元素headerfooterhgroup网页或者section的标题nav导航aside特殊的section与当前文章主要... 查看详情

面试--html语义化的理解和作用

...写出更优雅的代码2、让浏览器的爬虫和机器很好的解析为什么要语义化有利于seo方便其他设备监听屏幕阅读设备盲人阅读器方便团队协作开发语义化元素headerfooterhgroup网页或者section的标题nav导航aside特殊的section与当前文章主要... 查看详情

标签语义化对seo来说有多重要

...html结构的面试题,语义化的html占据了很大一部分。那么为什么要使用语义化的HTML看语义化的HTML到底有什么好处呢看  HTML是提供网页文档内容的上下文结构和含义;html本身是没有表现的,我们看到例如<h1>是粗体,字体... 查看详情

语义化的html结构的好处

...的作用就是结构和含义,通俗点说就是划分内容,这里放什么,我们放的是什么 查看详情

html语义化

...是标题,根据p判断内容是段落、input标签是输入框等。2为什么要标签语义化?1.搜素引擎友好2.更容易让屏幕阅读器读出网页内容3.去掉或者丢失样式的时候能让页面呈现出清晰地结构4.便于团队开发和维护3常用语义化的标签有... 查看详情

html说说你对语义化的理解

...标题用h系列标签,头部用header标签,侧边栏用aside标签等为什么要关注HTML语义化?对人:便于团队开发和维护在没有加载CSS的情况下也能呈现较好的内容结构与代码结构,易于阅读对机器:SEO是指和搜索引擎建立良好的沟通,... 查看详情

如何理解html语义化的?

什么是语义化其实说到语义化的问题,显而易见是有段不那么语义化的历史的。最早的时候,前端并不是一个细分的岗位。通常由PHP后端来写HTML,但是他们并不会CSS,于是就用table来进行布局。但我们都知道,table其实是用来展... 查看详情

html语义元素

...签的语义就是用它来标识特定网页或部分最重要的标题。为什么要语义化?代码结构: 使页面没有css的情况下,也能够呈现出很好的 查看详情

web前端及html语义化的理解

1.什么是web前端  WEB前端是由网页设计与制作发展而来的,随着工作的细化,需要有人完成美工图到网页的制作,从而出现了WEB前端开发这个词。WEB前端开发主要是使用HTML、CSS、JavaScript技术,将美工提供的美工图转化为网页... 查看详情

什么是语义化

语义化简介语义化是指用合理HTML标记以及其特有的属性去格式化文档内容。通俗地讲,语义化就是对数据和信息进行处理,使得机器可以理解.语义化的(X)HTML文档有助于提升你的网站对访客的易用性,比如使用PDA、文字浏览器以及... 查看详情

html语义化的理解

1、什么是HTML语义化?“语义化”指的是在需要更少的人类干预的情况下,能够研究和手机信息,让网页能够被机器理解,最终让人类受益。语义化的目的就是让大家直观的认识标签(markup)和属性(attribute)的用途和作用。很... 查看详情

什么是语义化

语义化是指用合理HTML标记以及其特有的属性去格式化文档内容。通俗地讲,语义化就是对数据和信息进行处理,使得机器可以理解.语义化的HTML文档有助于提升你的网站对访客的易用性,比如使用PDA、文字浏览器以及残障人士将从... 查看详情

什么是语义化?

什么是语义化?       为什么我们提倡书写语义化的代码?①语义化的代码,结构清晰,具有良好的可读性,利于维护。       试想一下,当你回顾几个月前甚至是几年前写的代... 查看详情

对html语义化的理解

...中的大部分都是由“语义化”标签所担任  那么,它有什么用呢?    我认为,它主要有以下四点用处:  1,去掉或者丢失样式的时候能够让页面呈现出清晰完整的结构  2,有利于SEO:和搜索引擎建立良好沟通,有... 查看详情