網(wǎng)站制作

Website development

HTML5的語義元素和Webflow：基本指南

發(fā)布時(shí)間：2017-02-13 09:22:03

了解如何建立更容易，隨著HTML5的權(quán)勢(shì)語義網(wǎng)站。

HTML5自帶的一些語義標(biāo)簽，讓你在你的站點(diǎn)上定義一個(gè)元素的目的。他們不影響網(wǎng)站是如何工作的（大多數(shù)人），或搜索引擎優(yōu)化。所以，我們應(yīng)該再使用HTML5標(biāo)簽？如果是這樣，如何做HTML5的語義標(biāo)簽工作在Webflow？

簡(jiǎn)短的回答：是的。使用HTML5的語義元素

語義標(biāo)簽已經(jīng)超越單純的效率和SEO好處多。他們幫助我們建立更好的網(wǎng)站結(jié)構(gòu)，更重要的是，他們能有效地提高網(wǎng)站的可訪問性

如果你“不太關(guān)注”關(guān)于你的網(wǎng)站的可訪問性，考慮了一下說，根據(jù)美國(guó)人口普查局的數(shù)據(jù)，大約1人中有5人有某種形式的殘疾

值得慶幸的是，Webflow是裝備精良的HTML5標(biāo)簽工作讓你的網(wǎng)站更容易，改善那些與一系列不良的用戶體驗(yàn)。在Webflow，定義一個(gè)HTML5標(biāo)簽一樣簡(jiǎn)單選擇一個(gè)元素，要設(shè)置選項(xiàng)卡，選擇從標(biāo)簽列表標(biāo)簽。

HTML5和語義

發(fā)表在十月2014，《enjoys HTML5標(biāo)準(zhǔn)幾乎萬向支架今天

It improves and rationalizes the markup available for documents. Plus, it natively handles multimedia and graphical content, with the addition of the new <video>, <audio>, and <canvas> elements, and support for scalable vector graphics (SVGs).

好的，那么什么是語義？什么是語義元素？

語義，簡(jiǎn)而言之，是意義的研究。你的粉絲的語言學(xué)，它是符號(hào)之間的關(guān)系的研究，能指和所指。

因此，在網(wǎng)頁設(shè)計(jì)中，一個(gè)語義單元是一種元素，具有內(nèi)在的意義，并傳達(dá)意義的瀏覽器開發(fā)商。

For example, <div> and <span> are non-semantic elements. They tell us nothing about their contents. But <form>, <table>, and <article>是語義元素：他們明確內(nèi)容。

豐富的文件內(nèi)容，介紹了幾種新的HTML5頁面結(jié)構(gòu)元素。

HTML5的語義元素可以用在Webflow

Webflow可以很容易地添加語義HTML5標(biāo)簽在您的設(shè)計(jì)元素，通過設(shè)置選項(xiàng)卡。

Webflow的HTML5標(biāo)簽包括：

<header>定義了文檔或部分標(biāo)題
<footer>定義了文檔或部分頁腳
<nav>定義文檔中的導(dǎo)航鏈接
<main>定義一個(gè)文檔的主要內(nèi)容
<section>定義一個(gè)部分文檔中的規(guī)范定義了這個(gè)“內(nèi)容專題分組，通常有一個(gè)標(biāo)題，所以你可以把它當(dāng)作一個(gè)章
<article>定義文檔中的一篇文章
<aside>定義頁面內(nèi)容之外內(nèi)容
<address>定義一個(gè)文件或一篇文章的作者/所有者的聯(lián)系信息
<figure>定義獨(dú)立的內(nèi)容，如插圖、圖表、照片、代碼塊等。

這是一個(gè)相當(dāng)簡(jiǎn)單的頁面分配使用這些元素的一個(gè)例子：

其他HTML5的語義元素

The HTML5 spec also includes several other tags with more precise uses. With the exception of <figcaption>, which Webflow automatically adds to image captions, these aren’t yet available in Webflow.

<bdi>定義了一段文字，可能是從其他方向的不同格式的文本（例如，報(bào)價(jià)在希伯來語或阿拉伯語在英語文章）
<details>定義了額外的細(xì)節(jié)，人們可以查看或隱藏（像一個(gè)提示）
<dialog>定義一個(gè)對(duì)話框或窗口
<figcaption>defines the caption for a <figure>
<mark>定義標(biāo)記或突出顯示的文本
<menuitem>定義一個(gè)命令或菜單項(xiàng)，用戶可以從彈出菜單中選擇
<meter>在已知范圍內(nèi)定義一個(gè)標(biāo)量測(cè)量（計(jì)量）
<progress>定義一個(gè)任務(wù)的進(jìn)度
<rp>定義了如何在不支持Ruby注釋瀏覽器顯示
<rt>定義一個(gè)解釋/發(fā)音字符（東亞字體）
<ruby>定義一個(gè)Ruby注釋（東亞字體）
<summary>defines a visible heading for a <details> element
<time>定義日期/時(shí)間
<wbr>定義了一個(gè)可能的斷線

所以語義元素有什么用？

顧名思義，語義標(biāo)簽語義的目的，只有好的。他們都是塊級(jí)元素，會(huì)使預(yù)期，不管他們的HTML標(biāo)簽。

他們有其他重要的好處，我們下面的列表，但如果你讀過關(guān)于HTML5的語義元素在網(wǎng)頁上，你會(huì)經(jīng)常發(fā)現(xiàn)這樣的建議：

不要花太多時(shí)間設(shè)定語義要素在更重要的任務(wù)的損害。

這是公平的。畢竟，語義元素不影響SEO，與你的客戶和網(wǎng)站訪問者可能不會(huì)注意到他們。

但是一旦你了解到HTML5的影響可達(dá)性（下面），你可能會(huì)重新考慮你的網(wǎng)站結(jié)構(gòu)和考慮語義元素的重要-如果不是強(qiáng)制性的-你的網(wǎng)頁設(shè)計(jì)過程方面。

語義元素的設(shè)計(jì)師和開發(fā)者的利益

HTML5的語義元素幫助我們創(chuàng)造的代碼結(jié)構(gòu)，使其更具可讀性和易維護(hù)性。

他們幫助我們思考我們的動(dòng)態(tài)數(shù)據(jù)結(jié)構(gòu)，并選擇適當(dāng)?shù)臉?biāo)題的層次。

他們幫助我們區(qū)分我們的標(biāo)記的語義元素，我們僅用于布局的。

后，HTML5語義要素推動(dòng)我們學(xué)習(xí)意義HTML元素和更好地了解我們的觀眾，特別是那些有殘疾的生活。

語義要素效益的可訪問性

對(duì)于視力正常的用戶，以確定一個(gè)網(wǎng)站的各個(gè)部分很容易。標(biāo)題，菜單，和形式都是立即的，視覺明顯。

但對(duì)于一個(gè)機(jī)器像谷歌的蜘蛛，或屏幕閱讀器，這些視覺語義不太明顯。

By defining block-level elements as semantic elements, we tell the machines what they are, so the machines can render elements appropriately. For example, we no longer declare italic elements with an <i> for “italics,” (which is a purely visual change, without intrinsic meaning) but with an <em>, for “emphasize.”

On a screen, the browser will display text wrapped in an <em> in italics. But on an audio device for the visually impaired, the text will be pronounced with a corresponding emphasis, just like a friend would say it.

可達(dá)性和網(wǎng)頁

這里是無障礙的w3c.org：

Web可訪問性意味著殘疾人可以使用Web。更具體地說，Web可訪問性意味著殘疾人可以感知，理解，導(dǎo)航，和與網(wǎng)絡(luò)的互動(dòng)，和他們可以有助于網(wǎng)站。無障礙網(wǎng)頁也有益于他人，包括老年人由于衰老變化的能力。

操作系統(tǒng)包括默認(rèn)的許多輔助功能選項(xiàng)，包括文字大小控制，文本到語音，顏色和對(duì)比度控制，等有人瀏覽網(wǎng)頁的輔助設(shè)備，機(jī)器翻譯的文本和媒體音頻或盲文，例如。

你的網(wǎng)站使用HTML5的標(biāo)簽語義元素的命名是一個(gè)讓你的網(wǎng)站更容易的有效的方法。

For example, if you’ve properly tagged your navigation with <nav> and sidebars with <aside>, an assistive device will understand that these elements don’t belong to the main flow of the HTML document, enabling the device’s user to skip straight to the <article>.

現(xiàn)在，讓你的網(wǎng)站更容易，往往取決于你。中小客戶可能不會(huì)提出這個(gè)話題的話，除非他們專門針對(duì)殘疾人觀眾。但更大的項(xiàng)目和涉及國(guó)家或政府的組織可能會(huì)要求高標(biāo)準(zhǔn)的可訪問性

為什么？因?yàn)榇笮途W(wǎng)站想要大的可視性和可用性，和公共場(chǎng)所經(jīng)常為法律要求必須符合無障礙標(biāo)準(zhǔn)。這一法律規(guī)定公共場(chǎng)所必須使用輪椅和公共網(wǎng)站的人訪問必須是可訪問的任何人，在任何設(shè)備上。

當(dāng)然，讓你的網(wǎng)站可以不停止在使用HTML5標(biāo)簽。主題是巨大的，但這里的幾個(gè)要點(diǎn)：

使用標(biāo)題正確的構(gòu)造你的內(nèi)容
包括描述性的ALT文本的圖像Webflow輕松地在設(shè)計(jì)師的圖片添加ALT文本和編輯，所以一定要在這個(gè)時(shí)間。沒有文本到語音轉(zhuǎn)換系統(tǒng)可以描述圖像比你可以。
給你獨(dú)特的描述性文本鏈接即.,別用“學(xué)習(xí)”或“閱讀更多”或“在這里?！?。
使用顏色與護(hù)理8%的人口患有紅綠色盲。這是一個(gè)很多人。紅色綠色色盲是一個(gè)色盲的各種形式。不要僅依靠顏色來傳達(dá)意義的用戶。
訪問窗體設(shè)計(jì)形式領(lǐng)域需要適當(dāng)?shù)貥?biāo)記為屏幕閱讀器來處理它們。
表格數(shù)據(jù)用表格布局，不
確保所有內(nèi)容都可以單獨(dú)使用鍵盤訪問
保持你的點(diǎn)擊區(qū)域明顯大
更多關(guān)于可訪問性，看看我們的文章”5種方法可以提高你的網(wǎng)站的內(nèi)容的可訪問性和整體用戶體驗(yàn)”

了解如何以及為什么你應(yīng)該使用Webflow HTML5元素

使用HTML5語義元素

相信它或沒有，HTML5標(biāo)簽不是一門精確的科學(xué)，所以對(duì)他們的使用意見紛歧的房間。

但是有足夠的共識(shí)，讓我們推薦一個(gè)簡(jiǎn)單的和邏輯的方式來命名你的元素。

所以現(xiàn)在讓我們走過你怎么會(huì)在兩個(gè)不同的頁面類型：經(jīng)典的內(nèi)容頁，和一個(gè)更加模塊化的主頁。

# 1：HTML5標(biāo)簽的經(jīng)典內(nèi)容頁

讓我們考慮一個(gè)標(biāo)準(zhǔn)，常見的網(wǎng)站結(jié)構(gòu)。一個(gè)標(biāo)題，菜單，一篇文章，一個(gè)側(cè)邊欄和頁腳。

一個(gè)簡(jiǎn)單的，普通內(nèi)容頁結(jié)構(gòu)。

有這樣一個(gè)經(jīng)典的頁面結(jié)構(gòu)，它的標(biāo)簽不太具有挑戰(zhàn)性的部分適當(dāng)。馬上，4塊是顯而易見的：標(biāo)題、菜單、主要地區(qū)，和頁腳。

So we can confidently tag these: <header>, <navbar>, <main>, and <footer>.

A content page with <header>, <navbar>, <main> and <footer> elements

?怎么語義標(biāo)簽的這種布局的主要元素。

That’s the easy part. Now let’s dig into the <main> element.

On the right, there’s a sidebar listing related articles and ways to support the publisher. None of it’s essential to a reader’s understanding of the page, so it all gets the <aside> tag. On the left, there’s an independent piece of content有道理的。如果你在你的RSS feed，看到它，你不會(huì)感覺到你錯(cuò)過了什么。

So, no hesitation: it’s an <article>.

<article> is the most important HTML5 tag, because it’s the one that defines what’s essential: the content.

A content page with <article> and <aside> elements

?The <main> area is divided into an <article> and an <aside>.

To recap, the <article> element is one of the most important element to identify. You identify it with two simple questions:

這樣的內(nèi)容對(duì)自己有意義嗎？

難道要上市，說，一個(gè)RSS？

Digging deeper, we can now break down the <article> element even further. Since it has two principle parts with their own subheadings, we can wrap these parts with the <section> tag.

<article> elements can contain several <section> elements

?The <article> is divided into sections.

每一段必須且只能有一個(gè)標(biāo)題。在這種情況下，H2標(biāo)題作為章節(jié)標(biāo)題。

Note that <section> elements shouldn’t be nested in HTML5. They must always have a unique title (only one H1 if it’s an H1, only one H2 if it’s a H2, etc.) and their own internal hierarchy. The first heading element defines the heading of the given section. The following heading tags inside the same section need to be relative to this. So, if the first heading in a section is an H3, use H4, H5, etc.

為規(guī)范提出：

每段的主題應(yīng)該是確定的，通常包括標(biāo)題（H1–H6元）作為子元素的部分。

好的，那么我們可以定義其他什么嗎？

The image in the first section gets a <figure> tag, for two reasons: 1) it’s an image, and 2) it could be moved into an appendix. And since the image has a caption, we can also add the <figcaption> tag.

<figcaption> nested in a <figure> element

?The <figure> element contains a <figcaption> element.

好的，現(xiàn)在我們已經(jīng)習(xí)慣幾乎all the semantic HTML5 tags Webflow offers. The only one left is <address>, and we can wrap the information in the footer with it.

Here, our contact info appears in the footer, but it could be anywhere else. Also, there can be multiple <address> tags. If the article included the author’s name and a link to their Twitter account, we’d wrap both in an <address> tag as well.

主頁有點(diǎn)打破由于內(nèi)容類型，它們通常含有混合不明顯。讓我們考慮我們的示例站點(diǎn)的主頁。

A classic CMS website's homepage

一個(gè)典型的、簡(jiǎn)單的CMS網(wǎng)站主頁。

Here, our <header>, <nav>, and <footer> elements remain unchanged.

Now for the <main> area. The right-hand column is still an obvious <aside>. But on the left, it’s suddenly not so obvious. Are the areas with orange headings (i.e. Articles and Resources) articles? No, they wouldn’t make sense in an RSS feed. Do they require a title? Kind of, yes. So, they’re <sections>.

Structure of a classic dynamic homepage's <main> area

?Structure of a classic homepage’s <main> area.

Inside the first section, we have a list of posts teasers. They represent articles, but don’t provide the whole of the article. Should they be <articles>? To decide, let’s ask ourselves the essential question again:

原創(chuàng)不易，未經(jīng)授權(quán)，嚴(yán)禁轉(zhuǎn)載

原文地址：http://mpian.cn/i,72,7095,0.html

上一篇：一個(gè)輕量級(jí)的JavaScript框架：到苗條的JS介紹

下一篇：2017移動(dòng)營(yíng)銷的狀態(tài)

您還有可能感興趣的內(nèi)容

建站流程

Website development

網(wǎng)站需
求分析
網(wǎng)站策
劃方案
頁面風(fēng)
格設(shè)計(jì)
程序設(shè)
計(jì)研發(fā)
資料錄
入優(yōu)化
確認(rèn)交
付使用
后續(xù)跟
蹤服務(wù)
+86 10 64758810
18510861135

熱門標(biāo)簽

Website development

客戶評(píng)價(jià)

更多+

感謝云智互聯(lián)，系統(tǒng)提前完成，在整個(gè)項(xiàng)目周期內(nèi)，云智互聯(lián)對(duì)待我們并不像是對(duì)待客戶，更像是朋友一樣，每一次，都能以專業(yè)的角度向我們提出更合理、更有效的解決方案，并快速、細(xì)致地完成我們的每一個(gè)需求，再次感謝以至誠(chéng)之心做事的云智互聯(lián)團(tuán)隊(duì)。

潘濤
我是東方龍馬集團(tuán)，在云智家做了2個(gè)企業(yè)官網(wǎng)，服務(wù)態(tài)度超級(jí)好。如果想做網(wǎng)站，選擇他家一定不后悔。性價(jià)比高，服務(wù)態(tài)度好。值得你的信賴！

譚嬌
技術(shù)好，設(shè)計(jì)精良，操作便利，很專業(yè)！配套的服務(wù)和后續(xù)的服務(wù)都很好,網(wǎng)站封面堪稱精品，運(yùn)行方便，后臺(tái)操作的簡(jiǎn)單。技術(shù)還會(huì)耐心教我,很好的云智互聯(lián)（北京）科技有限公司，建站很不錯(cuò)的。

陳曦
不錯(cuò)，價(jià)格比較合適，重點(diǎn)是響應(yīng)速度蠻快，有什么問題都會(huì)馬上給你解決，公司很滿意，因?yàn)樗麄兌际轻槍?duì)每個(gè)項(xiàng)目建了相應(yīng)的討論組，有問題可以再里面提出，人員分工到位，解決問題很及時(shí)。

張經(jīng)理