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.
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.
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.
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">.
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.
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代码。 第一部分代码使用语义元素：
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 <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.
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.
“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>.
The <section> and <article> elements are conceptually similar and interchangeable. To decide which of these you should choose, take note of the following:
An article is intended to be independently distributable or reusable. 文章旨在独立分发或可重复使用。
A section is a thematic grouping of content. 一节是内容的主题分组。
Top Stories
News
Story 1 Story 2 Story 3
Sport
Story 1 Story 2 Story 3
<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.
The <hgroup> element should be used where you want a main heading with one or more subheadings.
<hgroup>元素应用于需要一个或多个子标题的主标题的地方。
Heading 1
Subheading 1
Subheading 2
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>.
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.
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).
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.
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.
The <time> element allows an unambiguous ISO 8601 date to be attached to a human-readable version of that date.
<time>元素允许将明确的ISO 8601日期附加到该日期的人类可读版本。
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.
