html5語義化標記元素

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

語義HTML元素是以人類和機器可讀的方式清楚地描述其含義的元素。

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

諸如<header> ， <footer>和<article>元素都被認為是語義的，因為它們準確地描述了元素的用途以及它們內部內容的類型。

什么是語義元素？ (What are Semantic Elements?)

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 <table></table> to describe information using a table, programmers would use them to position other elements on a page.

因為最初并不是為設計網絡而設計的，所以程序員使用不同的技巧來以不同的方式布置事物。 程序員不是使用<table></table>來使用<table></table>來描述信息，而是會使用它們在頁面上放置其他元素。

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

隨著視覺設計布局的使用的發展，程序員開始使用通用的“非語義”標記，例如<div> 。 他們通常會給這些元素一個class或id屬性來描述它們的目的。 例如，它通常代替<header>編寫為<div class="header"> 。

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

由于HTML5仍然是相對較新的，因此在當今的網站上，非語義元素的這種使用仍然非常普遍。

新語義元素列表 (List of new semantic elements)

The semantic elements added in HTML5 are:

HTML5中添加的語義元素是：

• <article>

  <article>

• <aside>

  <aside>

• <details>

  <details>

• <figcaption>

  <figcaption>

• <figure>

  <figure>

• <footer>

  <footer>

• <header>

  <header>

• <main>

  <main>

• <mark>

  <mark>

• <nav>

  <nav>

• <section>

  <section>

• <summary>

  <summary>

• <time>

  <time>

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

諸如<header> ， <nav> ， <section> ， <article> ， <aside>和<footer>類的元素或多或少類似于<div>元素。 他們將其他元素組合到頁面部分中。 但是，在<div>標記可以包含任何類型的信息的地方，很容易確定語義<header>區域中將包含哪種信息。

An example of semantic element layout by w3schools

w3schools的語義元素布局示例

為什么要使用語義元素？ (Why use semantic elements?)

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

為了查看語義元素的好處，這里有兩段HTML代碼。 第一部分代碼使用語義元素：

<header></header>
<section><article><figure><img><figcaption></figcaption></figure></article>
</section>
<footer></footer>

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

盡管第二個代碼塊使用非語義元素：

<div id="header"></div>
<div class="section"><div class="article"><div class="figure"><img><div class="figcaption"></div></div></div>
</div>
<div id="footer"></div>

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 <div class="header">, <div id="header">, <div class="head">, or simply <div>. 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.

總體而言，語義元素還會導致代碼更加一致 。 使用非語義元素創建標頭時，不同的程序員可能將其寫為<div class="header"> ， <div id="header"> ， <div class="head">或簡稱為<div> 。 創建標題元素的方法有很多，它們都取決于程序員的個人喜好。 通過創建標準語義元素，它使每個人都更容易。

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。 時至今日，我們中的某些人可能仍對為什么這么多不同的元素似乎沒有顯示出任何重大變化感到困惑。

<section>和<article> (<section> and <article>)

“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 <div>. While this is still used in HTML5, HTML5 provided us with <section> and <article> in a way to replace <div>.

您可能會問：“有什么區別？”。 這兩個元素都用于分割內容，是的，它們可以互換使用。 這取決于哪種情況。 HTML4僅提供一種容器元素，即<div> 。 盡管在HTML5中仍使用此功能，但HTML5為我們提供了<section>和<article>來代替<div> 。

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

<section>和<article>元素在概念上相似并且可以互換。 要決定應選擇哪種方式，請注意以下幾點：

1. An article is intended to be independently distributable or reusable.
   文章旨在獨立分發或可重復使用。
2. A section is a thematic grouping of content.
   一節是內容的主題分組。

<section><p>Top Stories</p><section><p>News</p><article>Story 1</article><article>Story 2</article><article>Story 3</article></section><section><p>Sport</p><article>Story 1</article><article>Story 2</article><article>Story 3</article></section>
</section>

<header>和<hgroup> (<header> and <hgroup>)

The <header> 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.

<header>元素通常位于文檔，節或文章的頂部，通常包含主要標題以及一些導航和搜索工具。

<header><h1>Company A</h1><ul><li><a href="/home">Home</a></li><li><a href="/about">About</a></li><li><a href="/contact">Contact us</a></li></ul><form target="/search"><input name="q" type="search" /><input type="submit" /></form>
</header>

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

<hgroup>元素應用于需要一個或多個子標題的主標題的地方。

<hgroup><h1>Heading 1</h1><h2>Subheading 1</h2><h2>Subheading 2</h2>
</hgroup>

REMEMBER, that the <header> element can contain any content, but the <hgroup> element can only contain other headers, that is <h1> to <h6> and including <hgroup>.

請記住， <header>元素可以包含任何內容，但是<hgroup>元素只能包含其他標題，即<h1>至<h6>并包括<hgroup> 。

<aside> (<aside>)

The <aside> 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 <aside> as a sidebar to your main content.

<aside>元素用于不屬于其出現的文本流的內容，但仍以某種方式相關。 <aside>作為主要內容的側邊欄。

<aside><p>This is a sidebar, for example a terminology definition or a short background to a historical figure.</p>
</aside>

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

在HTML5之前，我們的菜單是使用<ul>和<li>的。 現在，連同這些，我們可以使用<nav>分隔菜單項，以在頁面之間進行導航。 您可以在頁面上具有任意數量的<nav>元素，例如，在頂部進行全局導航(在<header> )和在側欄中進行局部導航(在<aside>元素中)是常見的做法。

<nav><ul><li><a href="/home">Home</a></li><li><a href="/about">About</a></li><li><a href="/contact">Contact us</a></li></ul>
</nav>

<footer> (<footer>)

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

如果有一個<header>則必須有一個<footer> 。 通常在文檔，節或文章的底部找到<footer> 。 就像<header> ，內容通常是元信息，例如作者詳細信息，法律信息和/或相關信息的鏈接。 在頁腳中包含<section>元素也是有效的。

<footer>&copy;Company A</footer>

<small> (<small>)

The <small> element often appears within a <footer> or <aside> 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.

<small>元素通常出現在<footer>或<aside>元素內，該元素通常包含版權信息或法律免責聲明以及其他此類精美文字。 但是，這并不是要使文本變小。 它僅是描述其內容，而不是規定演示。

<footer><small>&copy;Company A</small> Date</footer>

<time> (<time>)

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

<time>元素允許將明確的ISO 8601日期附加到該日期的人類可讀版本。

<time datetime="2017-10-31T11:21:00+02:00">Tuesday, 31 October 2017</time>

Why bother with <time>? 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.

為什么要困擾<time> ？ 雖然人類可以正常方式讀取可以通過上下文進行歧義的時間，但計算機可以讀取ISO 8601日期并查看日期，時間和時區。

<figure>和<figcaption> (<figure> and <figcaption>)

<figure> is for wrapping your image content around it, and <figcaption> is to caption your image.

<figure>用于將圖像內容包裝在其周圍，而<figcaption>用于為圖像添加標題。

<figure><img src="https://en.wikipedia.org/wiki/File:Shadow_of_Mordor_cover_art.jpg" alt="Shadow of Mordor" /><figcaption>Cover art for Middle-earth: Shadow of Mordor</figcaption>
</figure>

詳細了解新HTML5元素： (Learn more about the new HTML5 elements:)

• 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語義化標記元素