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僵尸程序您内容的哪一部分是必不可少的，以便他们可以根据您的信息确定内容的优先级。
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。
语义HTML的外观如何？ (How Does Semantic HTML look like?)
Basic examples of Semantic HTML include
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僵尸程序您内容的哪一部分是必不可少的，以便他们可以根据您的信息确定内容的优先级。
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。
语义HTML的外观如何？ (How Does Semantic HTML look like?)
Basic examples of Semantic HTML include
