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

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

作者:cukengwei3786 时间: 2020-08-05 05:44:16
cukengwei3786 2020-08-05 05:44:16

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占位
分享文章到微博
分享文章到朋友圈

上一篇:UBoot命令操作

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

您可能感兴趣

  • 第七章-函数

    我始终不明白为什么还要麻烦的函数原型。如果只是把所有函数的定义放置在 main函数的前面,不就没有问题了吗? 不可能只有main函数调用其他函数。 如果函数之间互相调用,因为不允许调用未定义的函数,所以必须仔细斟酌他们的顺序,是很麻烦的。 总之最好是用上函数原型。 错。首先,你是假设只有main 函数调用其他函数,当然这是不切实际的。实际上,某些函数将会相互调用。如果把所有的函数定义放在 m...

  • 渗透测试 QA 收集

    目录 1、拿到一个待检测的站,你觉得应该先做什么? 2、判断出网站的CMS对渗透有什么意义? 3.一个成熟并且相对安全的CMS,渗透时扫目录的意义? 4.常见的网站服务器容器。 5.mysql注入点,用工具对目标站直接写入一句话,需要哪些条件? 6.目前已知哪些版本的容器有解析漏洞,具体举例。 7.如何手工快速判断目标站是windows还是linux服务器? 8.为何一个mysql数据库的站...

  • 【笔记】前端学习常见概念

    跟随百度学院学前端。 常见前端概念:HTML、CSS、JAvaScript、SQL、WebServices、PHP等。 一个普通网站访问的过程 先了解一个网站访问的大概过程: 用户操作浏览器访问,浏览器向服务器发出一个 HTTP 请求; 服务器接收到 HTTP 请求,Web Server 进行相应的初步处理,使用服务器脚本生成页面; 服务器脚本(利用Web Framework)调用本地和客户...

  • 你们的魔鬼又来咯!Android App的设计架构:MVC,MVP,MVVM与架构经验谈,看完泪流满

    作者:周鸿博 和MVC框架模式一样,Model模型处理数据代码不变在Android的App开发中,很多人经常会头疼于App的架构如何设计: 我的App需要应用这些设计架构吗? MVC,MVP等架构讲的是什么?区别是什么? 本文就来带你分析一下这几个架构的特性,优缺点,以及App架构设计中应该注意的问题。 1.架构设计的目的 通过设计使程序模块化,做到模块内部的高聚合和模块之间的低耦合。这样做...

  • 『经典』百年大师-利弗摩尔留下的9点启示

    全部都要记住,比去参加讲座有用多了,九年的实践证明,每句话都是对的,这本书半年看一遍,二十遍不算多。他唯一做错的就是舍不得走,除此无法超越。 在人类奋斗的每一个领域,永远都只有极少数的人出类拔萃非同寻常!杰西.利弗摩尔就是这样一个人,他是一个孤独的人,一个沉默而神秘的人;他是投机领域中的天才,是华尔街的一个传奇!利弗摩尔15岁开始股票交易,不到30岁,就身价百万;他正确预见了1907年的市场...

  • 某职业院校二级学院的发展规划

    目录 一、 发展信息技术学院的必要性 4 二、 专业发展规划 5 (一)发展方向与规模 5 (二) 各专业实验室与实训规划-软件技术专业与大数据分析与应用 6 1、软件技术专业实验室建设规划 6 2、 大数据分析与应用(商务数据分析方向)专业实验室建设规划 9 3、 软件与信息技术服务业(测试方向) 12 4、 移动通信技术 12 (三) 师资队伍建设 12 (四) 办学与教学形式 13 1...

  • 程序员必备:那些GitHub上最受欢迎的框架你收藏了几个?

    转眼间2020年已经过去了近两个月,在祈祷疫情尽快消散的同时,大家也不要忘了学习啊! 众所周知前端开发是一个综合性比较强的编程工作,前端开发人员不仅需要一定的审美观和设计观,同时还需要精通诸如HTML、CSS、JavaScript等错综复杂的技术。因此,在前端开发工作中,借用一些开发框架往往能达到事半功倍的效果。 今天的文章小渡为大家搜罗了数十款目前最受程序员欢迎的前端CSS框架,其中有的霸...

  • 28.正则表达式和前端性能优化

    一。正则表达式 正则表达式主要用在表单验证 1.什么是正则表达式 能让计算机读懂的字符串匹配规则 2.正则表达式的写法: var re = new RegExp("规则","可选参数") var re = /规则/参数 3.规则中的字符 a。普通字符匹配 如:/a/ 匹配字符 "a" , /a,b/匹配字符"a,b" b。转义字符匹配 \d 匹配一个数字,即0-9 \D 匹配一个非数字,即除...

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

免费套餐,马上领取!
CSDN

CSDN

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