html5语义化标记元素

html5语义化标记元素

Semantic HTML elements are those that clearly describe their meaning in a human- and machine-readable way.

语义HTML元素是以人类和机器可读的方式清楚地描述其含义的元素。

Elements such as , and are all considered semantic because they accurately describe the purpose of the element and the type of content that is inside them.

诸如 ， 和元素都被认为是语义的，因为它们准确地描述了元素的用途以及它们内部内容的类型。

HTML was originally created as a markup language to describe documents on the early internet. As the internet grew and was adopted by more people, its needs changed.

HTML最初是作为一种标记语言创建的，用于描述早期Internet上的文档。 随着互联网的发展和越来越多的人采用互联网，其需求发生了变化。

Where the internet was originally intended for sharing scientific documents, now people wanted to share other things as well. Very quickly, people started wanting to make the web look nicer.

互联网最初旨在​​共享科学文档，而现在人们也希望共享其他内容。 很快，人们开始希望使网络看起来更好。

Because the web was not initially built to be designed, programmers used different hacks to get things laid out in different ways. Rather than using the to describe information using a table, programmers would use them to position other elements on a page.

因为最初并不是为设计网络而设计的，所以程序员使用不同的技巧来以不同的方式布置事物。 程序员不是使用来使用来描述信息，而是会使用它们在页面上放置其他元素。

As the use of visually designed layouts progressed, programmers started to use a generic “non-semantic” tag like . They would often give these elements a class or id attribute to describe their purpose. For example, instead of this was often written as .

随着视觉设计布局的使用的发展，程序员开始使用通用的“非语义”标记，例如 。 他们通常会给这些元素一个class或id属性来描述它们的目的。 例如，它通常代替编写为 。

As HTML5 is still relatively new, this use of non-semantic elements is still very common on websites today.

由于HTML5仍然是相对较新的，因此在当今的网站上，非语义元素的这种使用仍然非常普遍。

The semantic elements added in HTML5 are:

HTML5中添加的语义元素是：

Elements such as , , , , , and act more or less like elements. They group other elements together into page sections. However where a tag could contain any type of information, it is easy to identify what sort of information would go in a semantic region.

诸如 ， ， ， ， 和类的元素或多或少类似于元素。 他们将其他元素组合到页面部分中。 但是，在标记可以包含任何类型的信息的地方，很容易确定语义区域中将包含哪种信息。

An example of semantic element layout by w3schools

w3schools的语义元素布局示例

To look at the benefits of semantic elements, here are two pieces of HTML code. This first block of code uses semantic elements:

为了查看语义元素的好处，这里有两段HTML代码。 第一部分代码使用语义元素：

Whilst this second block of code uses non-semantic elements:

尽管第二个代码块使用非语义元素：

First, it is much easier to read. This is probably the first thing you will notice when looking at the first block of code using semantic elements. This is a small example, but as a programmer you can be reading through hundreds or thousands of lines of code. The easier it is to read and understand that code, the easier it makes your job.

首先，它更容易阅读 。 当使用语义元素查看第一段代码时，这可能是您会注意到的第一件事。 这是一个小例子，但是作为程序员，您可以阅读成百上千的代码行。 越容易阅读和理解该代码，就越容易完成工作。

It has greater accessibility. You are not the only one that finds semantic elements easier to understand. Search engines and assistive technologies (like screen readers for users with a sight impairment) are also able to better understand the context and content of your website, meaning a better experience for your users.

它具有更大的可访问性 。 您不是唯一发现语义元素更容易理解的人。 搜索引擎和辅助技术(例如视力障碍用户的屏幕阅读器)也可以更好地了解您网站的上下文和内容，从而为用户带来更好的体验。

Overall, semantic elements also lead to more consistent code. When creating a header using non-semantic elements, different programmers might write this as , , , or simply . There are so many ways that you can create a header element, and they all depend on the personal preference of the programmer. By creating a standard semantic element, it makes it easier for everyone.

总体而言，语义元素还会导致代码更加一致 。 使用非语义元素创建标头时，不同的程序员可能将其写为 ， ， 或简称为 。 创建标题元素的方法有很多，它们都取决于程序员的个人喜好。 通过创建标准语义元素，它使每个人都更容易。

Since October 2014, HTML4 got upgraded to HTML5, along with some new “semantic” elements. To this day, some of us might still be confused as to why so many different elements that doesn’t seem to show any major changes.

自2014年10月起，HTML4和一些新的“语义”元素已升级为HTML5。 时至今日，我们中的某些人可能仍对为什么这么多不同的元素似乎没有显示出任何重大变化感到困惑。

“What’s the difference?”, you may ask. Both these elements are used for sectioning a content, and yes, they can definitely be used interchangeably. It’s a matter of in which situation. HTML4 offered only one type of container element, which is . While this is still used in HTML5, HTML5 provided us with and in a way to replace .

您可能会问：“有什么区别？”。 这两个元素都用于分割内容，是的，它们可以互换使用。 这取决于哪种情况。 HTML4仅提供一种容器元素，即 。 尽管在HTML5中仍使用此功能，但HTML5为我们提供了和来代替 。

The and elements are conceptually similar and interchangeable. To decide which of these you should choose, take note of the following:

和元素在概念上相似并且可以互换。 要决定应选择哪种方式，请注意以下几点：

Top Stories

News

Sport

The element is generally found at the top of a document, a section, or an article and usually contains the main heading and some navigation and search tools.

元素通常位于文档，节或文章的顶部，通常包含主要标题以及一些导航和搜索工具。

The element should be used where you want a main heading with one or more subheadings.

元素应用于需要一个或多个子标题的主标题的地方。

REMEMBER, that the element can contain any content, but the element can only contain other headers, that is to and including .

请记住， 元素可以包含任何内容，但是元素只能包含其他标题，即至并包括 。

The element is intended for content that is not part of the flow of the text in which it appears, however still related in some way. This of as a sidebar to your main content.

元素用于不属于其出现的文本流的内容，但仍以某种方式相关。 作为主要内容的侧边栏。

This is a sidebar, for example a terminology definition or a short background to a historical figure.

Before HTML5, our menus were created with ’s and ’s. Now, together with these, we can separate our menu items with a , for navigation between your pages. You can have any number of elements on a page, for example, its common to have global navigation across the top (in the ) and local navigation in a sidebar (in an element).

在HTML5之前，我们的菜单是使用和的。 现在，连同这些，我们可以使用分隔菜单项，以在页面之间进行导航。 您可以在页面上具有任意数量的元素，例如，在顶部进行全局导航(在 )和在侧栏中进行局部导航(在元素中)是常见的做法。

If there is a there must be a . A is generally found at the bottom of a document, a section, or an article. Just like the the content is generally metainformation, such as author details, legal information, and/or links to related information. It is also valid to include elements within a footer.

如果有一个则必须有一个 。 通常在文档，节或文章的底部找到 。 就像 ，内容通常是元信息，例如作者详细信息，法律信息和/或相关信息的链接。 在页脚中包含元素也是有效的。

The element often appears within a or element which would usually contain copyright information or legal disclaimers, and other such fine print. However, this is not intended to make the text smaller. It is just describing its content, not prescribing presentation.

元素通常出现在或元素内，该元素通常包含版权信息或法律免责声明以及其他此类精美文字。 但是，这并不是要使文本变小。 它仅是描述其内容，而不是规定演示。

The element allows an unambiguous ISO 8601 date to be attached to a human-readable version of that date.

元素允许将明确的ISO 8601日期附加到该日期的人类可读版本。

Why bother with ? While humans can read time that can disambiguate through context in the normal way, the computers can read the ISO 8601 date and see the date, time, and the time zone.

为什么要困扰 ？ 虽然人类可以正常方式读取可以通过上下文进行歧义的时间，但计算机可以读取ISO 8601日期并查看日期，时间和时区。

is for wrapping your image content around it, and is to caption your image.

用于将图像内容包装在其周围，而用于为图像添加标题。

w3schools provides simple and clear descriptions of many of the news elements and how/where they should be used.

w3schools提供了许多新闻元素及其使用方式/位置的简单明了描述。

MDN also provides a great reference for all HTML elements and goes deeper into each.

MDN还为所有HTML元素提供了很好的参考，并且对每个元素都有更深入的介绍。

翻译自: https://www.freecodecamp.org/news/semantic-html5-elements/

html5语义化标记元素