html是网络的语言 - 它确定网页上的内容以及按什么顺序显示。那些新的语言的人迅速得知，通常有几种方法可以通过HTML和HTML和accompanying styling。< / p >

但是，并非所有方法都是平等的。通常，您如何编写HTML与HTML对访问者的展示一样重要。< / p >

具体地说,我说话的g aboutsemantic HTML, HTML code that says what it does. In this introductory guide, I’ll introduce you to semantic HTML — what it is, how to write it, and why it’s important for every marketer and burgeoning web developer to adopt. We’ll finish up by listing some common semantic elements to add to your tool belt.< / p >

What is semantic HTML?

Semantic HTML (also called semantic markup) is HTML code that uses HTML tags to effectively describe the purpose of page elements. Semantic HTML code communicates the meaning of its elements to both computers and humans, which helps web browsers, search engines, assistive technologies, and human developers understand the components of a web page.< / p >

The key to well-written semantic HTML is the use of semantic tags. Semantic HTML tags have names that tell the person or machine reading the code what exactly they’re meant to do.< / p >

Here’s a basic example: The

(paragraph) tag is a semantic HTML tag — all content between its opening

标签和关闭< / p >tag is a block of paragraph of text. Anyone or any device reading this tag will understand its purpose.< / p >

其他一些常见的语义HTML标签是：< / p >

• ,

  ,

  , etc.: Headings on the page in descending order of importance.

• : A hyperlink.
• : A button element.
• 和：这些元素表明其中的文字很重要。
• 和
  : Ordered and unordered lists, respectively
  • 和

  In each of these examples, the tag itself tells us exactly what the element is used for. In fact, many HTML elements can convey meaning with their tags, as long as they’re being used for the correct purpose (e.g., not using a

  tag for a heading or an

  标签段落）。< / p >

  然后提示一个问题：哪些HTML标签是非语义的？< / p >

  最常见的非语义，HTML标签是

  ，一个通用的块级元素，以及, a generic inline element. While these tags are very useful for styling and formatting web pages, they don’t tell us much about the purpose of the content inside of them.< / p >

  看看下面的示例。在这里，我们有两个相同的按钮元素。但是，第一个元素使用tag while the second uses the

  标签。< / p >

  See the PenSemantic HTML - button vs divby Christina Perricone (@hubspot) onCodePen。

  This example illustrates how different tags can achieve the same visual results — to a sighted, human user, the experience of using these buttons is the same. Even so, it’s always better to opt for the semantic implementation, in this case

  。接下来，我们将探讨为什么语义标记比通用标记更好。< / p >

  What are the benefits of semantic HTML?

  Semantic HTML not only makes your code neater and easier to read — it also makes it moreaccessible to assistive technology和search engines. Let’s unpack each benefit below.< / p >

  可访问性

  屏幕读取器rely on semantically-rich HTML to process web pages and help users with low vision navigate them. Semantic tags tell screen reader users where they are and how they can interact with the current page.< / p >

  如果页面构造为

  和标签，对于那些看不到页面如何相互关系的人来说，尚不清楚。解决方案是将页面分为其组成部分的语义标签。在基本层面

  和

  element on a page, it allows this element to be “clicked” with the enter key. The same can’t be said for the generic

  - 单独的标签不会告诉屏幕读取器此元素充当按钮。< / p >

  As another example, when a screen reader detects a<表>element, users can use special keyboard controls to move up and down rows and across columns. By writing clean, semantic HTML, you enable extra accessibility features with no extra work.< / p >

  屏幕读取器also let their users navigate the page more efficiently by jumping between like elements, or pulling up a list of similar elements to summarize page content — one more reason to use semantic tags appropriately.< / p >

  SEO

  Like with assistive technologies, semantic markup helps search engine crawlers navigate your page to better understand its structure and contents. Semantic HTML is a great way to show search engines what to index and get the most from your crawl budget.< / p >

  例如，

  tag encloses the main content of a page — use it to signal the unique parts of a page and avoid wasting indexing on repeated page elements. Place the less important content inside

  ,