html5语义化标记元素_语义HTML5元素介绍
html5語(yǔ)義化標(biāo)記元素
Semantic HTML elements are those that clearly describe their meaning in a human- and machine-readable way.
語(yǔ)義HTML元素是以人類和機(jī)器可讀的方式清楚地描述其含義的元素。
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>元素都被認(rèn)為是語(yǔ)義的，因?yàn)樗鼈儨?zhǔn)確地描述了元素的用途以及它們內(nèi)部?jī)?nèi)容的類型。
什么是語(yǔ)義元素？ (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最初是作為一種標(biāo)記語(yǔ)言創(chuàng)建的，用于描述早期Internet上的文檔。 隨著互聯(lián)網(wǎng)的發(fā)展和越來越多的人采用互聯(lián)網(wǎng)，其需求發(fā)生了變化。
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.
互聯(lián)網(wǎng)最初旨在??共享科學(xué)文檔，而現(xiàn)在人們也希望共享其他內(nèi)容。 很快，人們開始希望使網(wǎng)絡(luò)看起來更好。
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.
因?yàn)樽畛醪⒉皇菫樵O(shè)計(jì)網(wǎng)絡(luò)而設(shè)計(jì)的，所以程序員使用不同的技巧來以不同的方式布置事物。 程序員不是使用<table></table>來使用<table></table>來描述信息，而是會(huì)使用它們?cè)陧?yè)面上放置其他元素。
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">.
隨著視覺設(shè)計(jì)布局的使用的發(fā)展，程序員開始使用通用的“非語(yǔ)義”標(biāo)記，例如<div> 。 他們通常會(huì)給這些元素一個(gè)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仍然是相對(duì)較新的，因此在當(dāng)今的網(wǎng)站上，非語(yǔ)義元素的這種使用仍然非常普遍。
新語(yǔ)義元素列表 (List of new semantic elements)
The semantic elements added in HTML5 are:
HTML5中添加的語(yǔ)義元素是：
<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>元素。 他們將其他元素組合到頁(yè)面部分中。 但是，在<div>標(biāo)記可以包含任何類型的信息的地方，很容易確定語(yǔ)義<header>區(qū)域中將包含哪種信息。
An example of semantic element layout by w3schools
w3schools的語(yǔ)義元素布局示例
為什么要使用語(yǔ)義元素？ (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:
為了查看語(yǔ)義元素的好處，這里有兩段HTML代碼。 第一部分代碼使用語(yǔ)義元素：
<header></header> <section><article><figure><img><figcaption></figcaption></figure></article> </section> <footer></footer>Whilst this second block of code uses non-semantic elements:
盡管第二個(gè)代碼塊使用非語(yǔ)義元素：
<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.
首先，它更容易閱讀 。 當(dāng)使用語(yǔ)義元素查看第一段代碼時(shí)，這可能是您會(huì)注意到的第一件事。 這是一個(gè)小例子，但是作為程序員，您可以閱讀成百上千的代碼行。 越容易閱讀和理解該代碼，就越容易完成工作。
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.
它具有更大的可訪問性 。 您不是唯一發(fā)現(xiàn)語(yǔ)義元素更容易理解的人。 搜索引擎和輔助技術(shù)(例如視力障礙用戶的屏幕閱讀器)也可以更好地了解您網(wǎng)站的上下文和內(nèi)容，從而為用戶帶來更好的體驗(yàn)。
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.
總體而言，語(yǔ)義元素還會(huì)導(dǎo)致代碼更加一致 。 使用非語(yǔ)義元素創(chuàng)建標(biāo)頭時(shí)，不同的程序員可能將其寫為<div class="header"> ， <div id="header"> ， <div class="head">或簡(jiǎn)稱為<div> 。 創(chuàng)建標(biāo)題元素的方法有很多，它們都取決于程序員的個(gè)人喜好。 通過創(chuàng)建標(biāo)準(zhǔn)語(yǔ)義元素，它使每個(gè)人都更容易。
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和一些新的“語(yǔ)義”元素已升級(jí)為HTML5。 時(shí)至今日，我們中的某些人可能仍對(duì)為什么這么多不同的元素似乎沒有顯示出任何重大變化感到困惑。
<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>.
您可能會(huì)問：“有什么區(qū)別？”。 這兩個(gè)元素都用于分割內(nèi)容，是的，它們可以互換使用。 這取決于哪種情況。 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>元素在概念上相似并且可以互換。 要決定應(yīng)選擇哪種方式，請(qǐng)注意以下幾點(diǎn)：
<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>元素通常位于文檔，節(jié)或文章的頂部，通常包含主要標(biāo)題以及一些導(dǎo)航和搜索工具。
<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>元素應(yīng)用于需要一個(gè)或多個(gè)子標(biāo)題的主標(biāo)題的地方。
<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>.
請(qǐng)記住， <header>元素可以包含任何內(nèi)容，但是<hgroup>元素只能包含其他標(biāo)題，即<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>元素用于不屬于其出現(xiàn)的文本流的內(nèi)容，但仍以某種方式相關(guān)。 <aside>作為主要內(nèi)容的側(cè)邊欄。
<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>的。 現(xiàn)在，連同這些，我們可以使用<nav>分隔菜單項(xiàng)，以在頁(yè)面之間進(jìn)行導(dǎo)航。 您可以在頁(yè)面上具有任意數(shù)量的<nav>元素，例如，在頂部進(jìn)行全局導(dǎo)航(在<header> )和在側(cè)欄中進(jìn)行局部導(dǎo)航(在<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.
如果有一個(gè)<header>則必須有一個(gè)<footer> 。 通常在文檔，節(jié)或文章的底部找到<footer> 。 就像<header> ，內(nèi)容通常是元信息，例如作者詳細(xì)信息，法律信息和/或相關(guān)信息的鏈接。 在頁(yè)腳中包含<section>元素也是有效的。
<footer>©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>元素通常出現(xiàn)在<footer>或<aside>元素內(nèi)，該元素通常包含版權(quán)信息或法律免責(zé)聲明以及其他此類精美文字。 但是，這并不是要使文本變小。 它僅是描述其內(nèi)容，而不是規(guī)定演示。
<footer><small>©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> ？ 雖然人類可以正常方式讀取可以通過上下文進(jìn)行歧義的時(shí)間，但計(jì)算機(jī)可以讀取ISO 8601日期并查看日期，時(shí)間和時(shí)區(qū)。
<figure>和<figcaption> (<figure> and <figcaption>)
<figure> is for wrapping your image content around it, and <figcaption> is to caption your image.
<figure>用于將圖像內(nèi)容包裝在其周圍，而<figcaption>用于為圖像添加標(biāo)題。
<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>詳細(xì)了解新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提供了許多新聞元素及其使用方式/位置的簡(jiǎn)單明了描述。
MDN also provides a great reference for all HTML elements and goes deeper into each.
MDN還為所有HTML元素提供了很好的參考，并且對(duì)每個(gè)元素都有更深入的介紹。
翻譯自: https://www.freecodecamp.org/news/semantic-html5-elements/
html5語(yǔ)義化標(biāo)記元素
總結(jié)
以上是生活随笔為你收集整理的html5语义化标记元素_语义HTML5元素介绍的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 老是梦到自己喜欢的人是什么意思
- 下一篇： HTML DOM方法