精选文章 html5语义化结构元素_语义HTML5在文档结构中的秘密

html5语义化结构元素_语义HTML5在文档结构中的秘密

作者:cukengwei3786 时间: 2021-02-05 09:43:14
cukengwei3786 2021-02-05 09:43:14
【摘要】html5语义化结构元素
 Look at the graph given above, and you can quickly see how extensively HTML 5 is growing popularity. The Semantic HTML 5 has almost replaced the HTML. Now, we are going to discuss Sem...

html5语义化结构元素

Look at the graph given above, and you can quickly see how extensively HTML 5 is growing popularity. The Semantic HTML 5 has almost replaced the HTML. Now, we are going to discuss Semantic HTML 5 and how it is used for structuring the document

查看上面给出的图表,您可以快速看到HTML 5越来越流行。 语义HTML 5几乎替代了HTML。 现在,我们将讨论语义HTML 5以及如何将其用于结构化文档

If you have the basic idea about HTML language that you probably know HTML (Hypertext Markup Language) is the standard markup language for web pages. We use HTML tags to format the content of the web pages as these tags instruct the browser how to display the content on the page. It’s a basic and simple thing that we all know. But, do HTML tags let the browser know what type of content they have, or the roles played by the different types of content? No, they don’t. This is precisely where Semantic HTML 5 plays the crucial role as it uses the particular tags to let the browser clearly understand what type of content those tags have.

如果您对HTML语言有基本的了解,那么您可能知道HTML(超文本标记语言)是网页的标准标记语言。 我们使用HTML标签来格式化网页的内容,因为这些标签指示浏览器如何在页面上显示内容。 这是我们都知道的基本而简单的事情。 但是,HTML标签是否会让浏览器知道它们拥有什么类型的内容,或者不同类型的内容扮演的角色? 不,他们没有。 这正是Semantic HTML 5发挥关键作用的地方,因为它使用特定的标签来使浏览器清楚地了解这些标签具有什么类型的内容。

Semantic HTML tags provide the precise information to the web crawler/robot like Google and Bing to clearly understand which content is crucial, which is a subsidiary, which is given for navigation and many other things. It is imperative to make Google and Bing understand what roles the different parts of your web page is playing, and by adding Semantic HTML tags to your pages, you can do it.

语义HTML标签向Google和Bing之类的网络爬虫/机器人提供准确的信息,以清楚地了解哪些内容至关重要,哪些内容是辅助内容,而导航和其他许多方面也是如此。 必须让Google和Bing了解您网页的不同部分所扮演的角色,并且通过向页面中添加语义HTML标签,您可以做到这一点。

HTML Semantic HTML 5
HTML tags tell browsers how the content should be presented. Semantic HTML 5 tags clearly tells browsers what type of content these tag contain and the roles played by the content
HTML 语义HTML 5
HTML标签告诉浏览器应如何显示内容。 语义HTML 5标签清楚地告诉浏览器这些标签包含什么类型的内容以及内容扮演的角色

For example, a tag like

is both semantic and presentational. Why? Well, it indicates that the enclosed text or content is a paragraph, so it serves both the purposes- it tells browsers that it’s a paragraph and how to display it.

例如,像

这样的标记既是语义的也是表示性的。 为什么? 好吧,它表明所包含的文本或内容是一个段落,因此它既达到了目的,又告诉浏览器这是一个段落以及如何显示它。

On the other hands, tags like and are non-semantic as they only define the appearance of the text – bold and italic, but they don’t say anything about the type of content or which role the content is playing.

另一方面,像这样的标记是非语义的,因为它们仅定义文本的外观(粗体和斜体),但它们并未说明内容的类型或内容的作用。玩。

Ideal examples of Semantic HTML tags include the header tags – from

to

, ,
and < em>. There are so many HTML tags that you can use to build a standard-compliant website.

语义HTML标签的理想示例包括标头标签-从

。 您可以使用许多HTML标签来构建符合标准的网站。

现在,您应该知道为什么要使用语义HTML 5? (Now, you should know why one should use Semantic HTML 5?)

We, the human users, can easily see and understand the different parts of the web page at a single glance. The header, menu, main content, footer – all are visually apparent to us but, what about the non-human bots like Google or Bing? They don’t see and understand the different parts of a page. So, you need to establish the communication with the bots and make them know about the different types of content and which roles they are playing – what part of your content is header, the main content, navigation, footer and so on. Furthermore, you can tell Google or Bing bots that which part of your content is essential and so that they can prioritize the content based on your information.

我们这些人类用户一眼就能轻松地看到和理解网页的不同部分。 页眉,菜单,主要内容,页脚-在我们看来都是显而易见的,但是Google或Bing这样的非人类机器人又如何呢? 他们看不到并理解页面的不同部分。 因此,您需要与机器人建立通信,并让它们知道内容的不同类型以及它们扮演的角色-内容的哪一部分是标题,主要内容,导航,页脚等。 此外,您可以告诉Google或Bing僵尸程序您内容的哪一部分是必不可少的,以便他们可以根据您的信息确定内容的优先级。

html5语义化结构元素_语义HTML5在文档结构中的秘密1

Semantic tags make the meaning of your content and page entirely apparent to the browser. This clarity is also communicated with the search engines so that they can deliver the right pages for the correct queries.

语义标签使您的内容和页面的含义对浏览器完全可见。 还与搜索引擎交流了这种清晰度,以便它们可以为正确的查询提供正确的页面。

Semantic tags give you a lot of styling options for your content. Maybe now you prefer your content displayed in the default browser style, but a few days later, you may decide to add a grey background and then, you want to define monospaced font family for your samples. You can quickly implement all these things with Semantic HTML markup which can be successfully applied to CSS.

语义标签为您的内容提供了许多样式选择。 也许现在您希望以默认的浏览器样式显示内容,但是几天后,您可能决定添加灰色背景,然后为样本定义等宽字体系列。 您可以使用语义HTML标记快速实现所有这些功能,这些标记可以成功应用于CSS。

html5语义化结构元素_语义HTML5在文档结构中的秘密2

语义HTML的外观如何? (How Does Semantic HTML look like?)

Basic examples of Semantic HTML include

勿删,copyright占位
分享文章到微博
分享文章到朋友圈

上一篇:向顺序容器vector、string、deque、list、forward_list中插入\删除元素时迭代器、引用、指针的变化

下一篇:删除的通用代码

您可能感兴趣

  • 中文RFC文档远程COM选项(二)

    插图=====================¦                  ¦¦                  ¦¦      客户       ¦¦                  ¦ / < ---- 本地的区域/=====================  /      企业网络=============================¦      远程登录接口...

  • [讨论]关于VXD中的地址

    发信人: wwwwww (困困), 信区: Programming 标  题: 关于VXD的问题 发信站: BBS 水木清华站 (Mon Feb 16 02:46:39 1998)  VXD相对于所有的应用程序都是全局的, 也就是说应用程序可以直接存取VXD中的 全局变量。这是经过证实的。 现在的疑问是:   1。所有的VXD都在同一线性地址空间里吗?      这个线性地址空间的长度最多是...

  • 电脑游戏中的人工智能制作

    电脑游戏随着硬件执行效率与显示解析度等大幅提升,以往很多不可能或非常难以实现的电脑游戏如此都得以顺利完成。虽然电脑游戏的呈现是那么地多样化,然而却与我们今日所要探讨的主题,人工智能几乎都有着密不可分的关系。 在角色扮演游戏中,程序员与企划人员需要精确地在电脑上将一个个所谓的“怪物”在战门过程中栩栩如生地制作出来;所以半兽人受了重伤懂得逃跑,法师懂得施展攻性法术。 目前能让人立刻想到与人工智能...

  • JPEG 简易文档 V2.11

    JPEG 简易文档 V2.11 ------------------------------ 最后修订 2000.11.22 作者: 云风 Email: cloudwu@263.net Homepage: http://member.netease.com/~cloudwu 写在前面 -------- 1. 为什么写这个文档? 云风想对 JPEG/MPEG 有一个系统的研究, 但是苦于找到...

  • ODBC文件DSN 的结构

    ODBC文件DSN 的小秘密1. 用附件带的WORDPAD文本编辑器,  建立一后缀名为 .DSN的文件,  格式如下, 然后按文本格式存起来:注意: 格式很重要且必须存为'文本格式',否则不认,  别的编辑器应该也可以.#################################[ODBC]DRIVER=驱动程序名UID=用户名PWD=密码DATABASE=数据库名WSID=服务器名...

  • 一位通信工程师眼中的电信及移动(转)

    我不是电信的人,我只不过是通信厂商的,到今年已经从事通信工作4年了,也就是为中国电信以及现在的移动和联通服务4年了.我作为一个通信工程师就说说我所看到的电信及移动. 1.ISDN. 我认为ISDN纯粹是废物,无丝毫用途,毫无利用价值.可能有点偏激了,但是事实就是这样,ISDN的提法10年前就有了,早已过时的技术.为什么西方大力推行ADSL的时候,中国在大力推行ISDN?我认为还是企业的体制问...

  • 一个统一的链表结构

    这是在Linux下面最常用的一个统一的链表结构,Linux就是用这个结构将所有的Driver、Device什么的都分别串在一起。我觉得写得非常好,大家来看一看。 ----------------------------------------------------------------------------------------------------- #ifndef _LINUX...

  • XML入门精解之结构与语法

    (作者:廖家序 2000年12月13日 13:04)  ■创建XML文件的工具   XML文件和HTML文件一样,实际上是一个文本文件。显然大家立刻就会明白,创建XML文件最普通的工具和HTML一样,就是“记事本”了。除了“记事本”之外,当然还有一些更加方便的工具,如XML Notepad、XML Pro、CLIP!XML Editor等,这些工具的一大特点是:能够检查你所建立的XML文件是...

CSDN

CSDN

中国开发者社区CSDN (Chinese Software Developer Network) 创立于1999年,致力为中国开发者提供知识传播、在线学习、职业发展等全生命周期服务。

华为云40多款云服务产品0元试用活动

免费套餐,马上领取!
html5语义化结构元素_语义HTML5在文档结构中的秘密介绍:华为云为您免费提供html5语义化结构元素_语义HTML5在文档结构中的秘密在博客、论坛、帮助中心等栏目的相关文章,同时还可以通过 站内搜索 查询更多html5语义化结构元素_语义HTML5在文档结构中的秘密的相关内容。| 移动地址: html5语义化结构元素_语义HTML5在文档结构中的秘密 | 写博客