html5语义化结构元素_语义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标签，您可以做到这一点。

For example, a tag like <p> 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.

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

On the other hands, tags like <b> and <i> 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.

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

Ideal examples of Semantic HTML tags include the header tags – from <h1> to <h6>, <code>, <blockquote> and < em>. There are so many HTML tags that you can use to build a standard-compliant website.

语义HTML标签的理想示例包括标头标签-从<h1>到<h6>，<code>，<blockquote>和<em>。 您可以使用许多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这样的非人类机器人又如何呢？ 他们看不到并理解页面的不同部分。 因此，您需要与bot建立通信，并使它们了解不同类型的内容以及它们所扮演的角色-内容的哪一部分是标题，主要内容，导航，页脚等。 此外，您可以告诉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 <nav>, <footer> and <section>. There are so many Semantic tags that can be used, such as <blockquote>, <em>, <code> , etcetera. But in this section of the article, we are going to talk about the semantic tags that you will require the break the page content into its basic parts.

语义HTML的基本示例包括<nav>，<footer>和<section>。 可以使用的语义标记很多，例如<blockquote>，<em>，<code>等。 但是在本文的这一部分中，我们将讨论语义标记，您将需要将页面内容分成其基本部分。

Instead of using an old HTML tag like <div>, using the following Semantic HTML tags can be a perfect decision to break the page content into identified parts each of which has a specific roles to play:
<header>
<nav>
<main>
<article>
<section>
<aside>
<footer>

代替使用像<div>这样的旧HTML标记，使用以下语义HTML标记可以完美地决定将页面内容分成已标识的部分，每个部分都扮演特定的角色：
<标题>
<导航>
<主要>
<文章>
<部分>
<aside>
<页脚>

One of the best advantages of attributing a clear role of each part of the content is that that it enables Google and Bing to index the page correctly and promptly.

为内容的每个部分赋予清晰的角色的最大优点之一是，它使Google和Bing能够正确，Swift地为页面建立索引。

知道如何正确使用语义HTML标签 (Know how to make the correct use of Semantic HTML tags)

When it comes to using Semantic tags, you must ensure they convey the meaning, instead of using it for the presentational purposes.
A lot of web designing solutions make a mistake at the time of using these semantic tags :

在使用语义标签时，必须确保它们传达了含义，而不是将其用于表达目的。
在使用这些语义标记时，许多网页设计解决方案都会出错：

Blockquote: a lot of people use blockquote to indenting text, which is not a quotation. The reason is blockquotes are indented by default. The smart way to use the benefit of indentation without using the blockquote is using CSS margin instead.

块引用：很多人使用块引用来缩进文本，这不是引号。 原因是默认情况下，块引用被缩进。 在不使用blockquote的情况下使用缩进的好处的聪明方法是使用CSS边距。

<p>: some people use <p>abcd</p> for adding space between page elements, but it is supposed to be used for defining the actual paragraph for the text of the page. Just like the indenting example given above, using padding style property or margin would be the right idea to use space.

<p>：有些人使用<p> abcd </ p>在页面元素之间添加空格，但是应该使用它来定义页面文本的实际段落。 就像上面给出的缩进示例一样，使用padding style属性或margin是使用空间的正确想法。

<ul>: just like blockquotes, some people use <ul> to indent the text for most browsers. It is a semantically incorrect and invalid HTML as only <li> tags work with the <ul> tag. Using the margin or padding style to indent the text is the best idea.

<ul>：就像块引用一样，某些人使用<ul>来缩进大多数浏览器的文本。 这是语义上不正确且无效HTML，因为只有<li>标记与<ul>标记一起使用。 最好使用边距或填充样式来缩进文本。

哪些HTML标签是语义的？ (Which HTML tags are Semantic?)

While nearly all the HTML 4 and five tags have semantic meaning but, some of them are primarily semantic

尽管几乎所有HTML 4和5标签都有语义含义，但是其中一些主要是语义

Semantic HTML tags :

语义HTML标签：

<abbr> Abbreviation
<acronym> Acronym
<blockquote> Long quotation
<dfn> Definition
<address> Address for author(s) of the document
<cite> Citation
<code> Code reference
<tt> Teletype text
<div> Logical division
<span> Generic inline style container
<del> Deleted text
<ins> Inserted text
<em> Emphasis
<strong> Strong emphasis
<h1> First-level headline
<h2> Second-level headline
<h3> Third-level headline
<h4> Fourth-level headline
<h5> Fifth-level headline
<h6> Sixth-level headline
<hr> Thematic break
<kbd> Text to be entered by the user
<pre> Pre-formatted text
<q> Short inline quotation
<samp> Sample output
<sub> Subscript
<sup> Superscript
<var> Variable or user defined text

<abbr>缩写
<acronym>首字母缩写词
<blockquote>长引号
<dfn>定义
<地址>文件作者的地址
<引用>引用
<code>代码参考
<tt>电传文本
<div>逻辑除法
<span>通用内联样式容器
<del>删除的文字
<ins>插入的文字
<em>重点
<strong>重点突出
<h1>一级标题
<h2>二级标题
<h3>三级标题
<h4>第四级标题
<h5>第五级标题
<h6>第六级标题
<hr>专题休息
<kbd>用户要输入的文本
<pre>预格式化的文本
<q>短内联报价
<样品>样品输出
<sub>下标
<sup>上标
<var>变量或用户定义的文本

An example of using Semantic HTML 5 tags is given below

下面给出了使用语义HTML 5标签的示例