`

如何理解HTML语义化?

    博客分类:
  • HTML
 
阅读更多

1、什么是HTML语义化?

<基本上都是围绕着几个主要的标签,像标题(H1~H6)、列表(li)、强调(strong em)等等>

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

2、为什么要语义化?

  • 为了在没有CSS的情况下,页面也能呈现出很好地内容结构、代码结构:为了裸奔时好看;
  • 用户体验:例如title、alt用于解释名词或解释图片信息、label标签的活用;
  • 有利于SEO和搜索引擎建立良好沟通,有助于爬虫抓取更多的有效信息:爬虫依赖于标签来确定上下文和各个关键字的权重;
  • 方便其他设备解析(如屏幕阅读器、盲人阅读器、移动设备)以意义的方式来渲染网页;
  • 便于团队开发和维护,语义化更具可读性,是下一步吧网页的重要动向,遵循W3C标准的团队都遵循这个标准,可以减少差异化。

3、写HTML代码时应注意什么?

  • 尽可能少的使用无语义的标签div和span;
  • 在语义不明显时,既可以使用div或者p时,尽量用p, 因为p在默认情况下有上下间距,对兼容特殊终端有利;
  • 不要使用纯样式标签,如:b、font、u等,改用css设置。
  • 需要强调的文本,可以包含在strong或者em标签中(浏览器预设样式,能用CSS指定就不用他们),strong默认样式是加粗(不要用b),em是斜体(不用i);
  • 使用表格时,标题要用caption,表头用thead,主体部分用tbody包围,尾部用tfoot包围。表头和一般单元格要区分开,表头用th,单元格用td;
  • 表单域要用fieldset标签包起来,并用legend标签说明表单的用途;
  • 每个input标签对应的说明文本都需要使用label标签,并且通过为input设置id属性,在lable标签中设置for=someld来让说明文本和相对应的input关联起来。

 4、HTML5新增了哪些语义标签,详述之。

  见这位前端大拿的blog

转载:https://www.cnblogs.com/freeyiyi1993/p/3615179.html

https://www.cnblogs.com/huoshanjun/p/6603580.html

分享到:
评论

相关推荐

    简单说下你理解的语义化,怎样来保证你写的符合语义化?HTML5语义化标签了解下?

    简单说下你理解的语义化,怎样来保证你写的符合语义化?HTML5语义化标签了解下?

    语义化的HTML结构怎么理解

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

    HTML语义化的调查问卷源代码

    通过分析和理解这个源代码,我们可以加深对HTML语义化的理解,提高网页设计的质量,提升用户和搜索引擎的满意度。对于任何想要提升网页开发技能的人来说,这都是一项值得投入的时间和精力的任务。

    语义化你的HTML标签和属性

    总之,理解并应用语义化HTML标签和属性是每个Web开发者的基本功,它能够提升网页的用户体验,增强SEO效果,并使页面在各种设备和浏览器上保持一致的呈现。因此,我们应该始终将语义化视为Web开发的核心原则之一。

    HTML语义化标签

    HTML语义化标签是网页开发中的重要概念,它关乎到网页内容的结构和可读性,对于搜索引擎优化(SEO)以及无障碍访问(Web Accessibility)都起着关键作用。语义化标签是那些能够明确表达其内容含义的标签,而不是仅仅...

    语义化标签兼容IE8以上文件

    语义化标签是HTML5中引入的一系列新特性,旨在提高网页内容的可读性和可访问性,同时优化搜索引擎优化(SEO)。这些标签为开发者提供了更精确的方式来描述页面内容,使得浏览器、屏幕阅读器和搜索引擎能更好地理解...

    HTML中语义化的理解

    搜索引擎优化(SEO):搜索引擎更喜欢能够理解和解析的页面内容,语义化的HTML结构可以提高页面在搜索引擎结果中的排名,增加网页的曝光和访问量。 代码可读性和可维护性:使用语义化的标签和属性,可以让代码更易于...

    html标签、html语义化

    HTML 语义化是指使用正确的 HTML 标签来描述网页的内容和结构,从而使搜索引擎和屏幕阅读器更好地理解网页的内容。这可以提高网页的可访问性和搜索引擎优化(SEO)。 常用的浏览器内核包括 IE、火狐(Firefox)、...

    3.语义化标签.pdf_html5_

    - 语义化标签更利于机器解析,而非语义化标签可能需要通过CSS类或ID来理解元素的用途。 总的来说,HTML5的语义化标签是构建高质量、可访问和易维护的网页的关键组成部分。它们不仅提高了代码质量,还促进了网页...

    学习html语义化练习代码

    html语义化学习代码

    HTML语义化.doc

    HTML语义化是一种重要的网页设计原则,它强调在编写HTML代码时使用具有明确含义的标签,以便更好地表达页面内容的结构和意图。语义化的HTML不仅有助于人类阅读和理解,而且对搜索引擎优化(SEO)、无障碍访问以及...

    最完整CSS语义化标准(图文版)

    【CSS语义化标准】是网页设计中一个重要的原则,旨在提高代码的可读性、可维护性和增强网页的无障碍性。它强调根据元素的功能、内容或者用途来定义CSS类名,而不是根据其视觉表现或者位置。这样做的好处在于,即使...

    CSS与HTML语义化结构讲座PPT

    通过这次讲座,公司员工将不仅能够理解CSS与HTML语义化结构的基础知识,还能掌握如何在实际工作中应用这些技术,从而提升网站的专业性和用户友好性。对于想要提升Web开发技能的人来说,这是一个不可多得的学习机会。

    语义化标签.html

    语义化标签.html

    Web-前端html+css从入门到精通 124 HTML5新语义化标签(2).zip

    首先,我们要理解什么是HTML5的语义化标签。在HTML4时代,开发者常使用和等非语义化的标签来构建网页结构,这导致了代码可读性差和搜索引擎难以理解页面内容的问题。HTML5引入了一系列新的语义化标签,如、、、、、...

    HTML:HTML5语义化标签解析.docx

    HTML:HTML5语义化标签解析.docx

    html5 语义化标签.docx

    HTML5的语义化标签是Web开发领域的一大进步,它为网页内容提供了更明确的结构和语义。在HTML5之前,开发者主要依赖`&lt;div&gt;`标签来组织...总之,理解并恰当运用HTML5的语义化标签,是提升网页质量和专业性的关键步骤。

    超详细CSS语义化命名规则及一些总结和扩展

    语义化命名不仅能够帮助我们更好地理解代码结构,而且有助于团队协作和项目交接。在本篇超详细CSS语义化命名规则中,我们将重点讨论命名规则以及一些总结和扩展。 首先,我们要了解CSS命名的基本原则。一个良好的...

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

    1、什么是语义化? 必应网典的解释 语义化是指用合理HTML标记以及其特有的属性去格式化文档内容。通俗地讲,语义化就是对数据和信息进行处理,使得机器可以理解. 语义化的(X)HTML文档有助于提升你的网站对访客的易用性...

    语义网基础理解

    通过使用一系列标准化的技术和协议,语义网使得机器能够理解网页上的数据,从而提高了信息处理的效率和准确性。尽管目前语义网技术仍处于发展阶段,但它已经展现出巨大的潜力,未来有望在各个领域发挥重要作用。 ...

Global site tag (gtag.js) - Google Analytics