大厂都在”偷偷“用语义化标签,你却还在div?

日期:2024-07-10  作者:小天  来源:www.txunda.com  人气:30

        什么是HTML语义化标签?
        HTML中的语义标记是指具有特殊意义的标记,用来告知网页中的各个部分。 这就相当于把每一节的内容都标注得很清楚,让大家清楚这一节的作用。例如,如果你正在阅读一本书,那么它的封面,目录,章节标题等都被清楚地标注了,因此你可以很快地找到你要阅读的那一节。 与此类似, HTML标记的语义也可以使页面的内容更清晰、更容易理解。 比如……<header> 标记用于确定一个页面的标题,一般包括导航条,标志和其他信息;<nav> 标记被特别地用来定义导航链,以便让搜索引擎更好的了解站点的构造;<article> 标记被用来定义单独的内容,像是一条新闻或一篇博文。
天津天迅达科技有限公司
如果您需要相关服务,可以找天津天迅达科技有限公司,我们的业务有Web开发、iOS APPAndroid APP、微信开发、HTML5开发等,天迅达——您身边的App个性化定制专家!
        在此基础上,本文提出了一种基于语义的标记方法,该方法可以有效地增强页面的可读性、可维护性,并有助于搜索引擎更加精准的抓取并对其进行排序,以达到提高搜索引擎优化效果的目的。为什么使用语义化标签?使用 HTML语义化标记有许多优点,他们不但可以使代码更加清楚,而且具有实用的作用和方便。提高网页的可读性和结构化语义标记使 HTML代码变得更容易理解,当其它开发人员在编写和维护这些代码时,就能很快地明白它们是做什么的。 这样可以帮助团队工作,并能长久地维持这个项目。
有助于搜索引擎优化(SEO)
        搜索引擎利用爬行技术对网络内容进行抓取,并对其进行检索。 语义标记有助于搜索引擎了解页面的层次结构和关键信息,进而提高其在搜索引擎中的排名。
无障碍支持,语义标记对于视觉障碍者更好的理解网络内容具有重要意义。 比如,用“纳v”选项卡,就能让读者迅速进入导航栏。还记得那个内置的浸入式阅读器么? 他们大部分都是以语义标签为基础的。 比如“掘金者”的文章都被标注为< article>,这样您就可以在“掘金者”网页上开启浸入式阅读器,并且准确地捕捉到文章的主要内容。
而且,苹果公司在语义标签方面,也是做得非常好的。 难怪大家都说苹果公司的设计很有格调,原来是这样的。
        事实上,其他的大工厂也在用,只不过都是偷偷摸摸的。 他们并没有采用通用的语义标记,相反,他们在某些重要的地方用了一个语义标记,以“谄媚”搜索引擎或者浏览器所提供的可访问性。所以我觉得,有不少人都是很支持 div一把梭的。 但如果你能从那些大公司那里学到一些技巧,比如在 dv上加上一些语义标注,就可以糊弄一下搜索引擎和网站了。
常用的语义化标签
        搜索引擎钟爱的语义化标签
        搜索引擎(如谷歌、必应等)对特定的 HTML语义标记给予了极大的重视。这里有几个语义化标记引起了搜索引擎的注意:<header>在此基础上,我们提出了一种新的解决方案,即“标题”和“导航链接”。<nav>标签标示出导航链接区域,帮助搜索引擎理解网站的链接结构和页面之间的关系,有助于内部链接的优化。“article”标签代表了一些单独的内容,比如新闻文章,博客文章等等。搜索引擎会把注意力集中在那些含有重要信息的标签上。“< footer>”标签中含有页面底部的内容,一般含有版权信息,联系方式等。
浏览器的无障碍功能
        现在的浏览器提供了很多可访问性特征(accessibility features),使有特定要求的用户能够更好地进行网络浏览。这里有几个重要的可访问性特征:屏幕阅读器支持
一个能把网络上的内容变成声音或者点字的软件,来帮助有视力障碍的人进行网络导航。语义标记能大大提高阅读速度和准确度。比如,“< nav”选项卡会让使用者迅速进入导航栏,“文章”选项卡会让使用者更容易地定位到文章的主要内容。
键盘导无障碍的浏览器让使用者可以用键盘来进行导航,例如< header>、< nav>、< main>、< main>、< footer>等语义化的标记,能让键盘使用者迅速地跳跃到网页的各个区域,从而提升浏览的效率。
高对比度模式
        有些浏览器还提供了高反差模式,让视力受损的使用者可以轻松地看书中的内容。有了合适的语义标记,再加上好的结构,就能保证高反差模式下的内容更易读.ARIA(可访问性富互联网应用)标签
        尽管 ARIA标记并不属于 HTML语义标记,但是它可以作为 HTML标记的一种补充,从而为用户提供更多的可访问性信息。比如,关联标签、关联标签等属性能够对非文字元素进行文字说明,从而有助于技术人员更好的理解内容。
以上所有设计图和部分文字均来自网络,如有侵权,请call我删除,感谢~
天津天迅达科技有限公司经过多年来对APP小程序、以及网站建设的探索,已经帮助每一个客户快速开发出属于自己的APP小程序网站,是万千企业之选。
标签:天迅达科技 天津APP开发 天津网站建设 网站建设