新闻发布
管理系统了解如何建立更容易，随着HTML5的权势语义网站。
HTML5自带的一些语义标签，让你在你的站点上定义一个元素的目的。他们不影响网站是如何工作的（大多数人），或搜索引擎优化。所以，我们应该再使用HTML5标签？如果是这样，如何做HTML5的语义标签工作在Webflow？
简短的回答：是的。使用HTML5的语义元素
语义标签已经超越单纯的效率和SEO好处多。他们帮助我们建立更好的网站结构，更重要的是，他们能有效地提高网站的可访问性
如果你“不太关注”关于你的网站的可访问性，考虑了一下说，根据美国人口普查局的数据，大约1人中有5人有某种形式的残疾
值得庆幸的是，Webflow是装备精良的HTML5标签工作让你的网站更容易，改善那些与一系列不良的用户体验。在Webflow，定义一个HTML5标签一样简单选择一个元素，要设置选项卡，选择从标签列表标签。
HTML5和语义
发表在十月2014，《enjoys HTML5标准几乎万向支架今天
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).
好的，那么什么是语义？什么是语义元素？
语义，简而言之，是意义的研究。你的粉丝的语言学，它是符号之间的关系的研究，能指和所指。
因此，在网页设计中，一个语义单元是一种元素，具有内在的意义，并传达意义的浏览器开发商。
For example, <div> and <span> are non-semantic elements. They tell us nothing about their contents. But <form>, <table>, and <article>是语义元素：他们明确内容。
丰富的文件内容，介绍了几种新的HTML5页面结构元素。
HTML5的语义元素可以用在Webflow
Webflow可以很容易地添加语义HTML5标签在您的设计元素，通过设置选项卡。
Webflow的HTML5标签包括：
<header>定义了文档或部分标题
<footer>定义了文档或部分页脚
<nav>定义文档中的导航链接
<main>定义一个文档的主要内容
<section>定义一个部分文档中的规范定义了这个“内容专题分组，通常有一个标题，所以你可以把它当作一个章
<article>定义文档中的一篇文章
<aside>定义页面内容之外内容
<address>定义一个文件或一篇文章的作者/所有者的联系信息
<figure>定义独立的内容，如插图、图表、照片、代码块等。
这是一个相当简单的页面分配使用这些元素的一个例子：
其他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>定义了一段文字，可能是从其他方向的不同格式的文本（例如，报价在希伯来语或阿拉伯语在英语文章）
<details>定义了额外的细节，人们可以查看或隐藏（像一个提示）
<dialog>定义一个对话框或窗口
<figcaption>defines the caption for a <figure>
<mark>定义标记或突出显示的文本
<menuitem>定义一个命令或菜单项，用户可以从弹出菜单中选择
<meter>在已知范围内定义一个标量测量（计量）
<progress>定义一个任务的进度
<rp>定义了如何在不支持Ruby注释浏览器显示
<rt>定义一个解释/发音字符（东亚字体）
<ruby>定义一个Ruby注释（东亚字体）
<summary>defines a visible heading for a <details> element
<time>定义日期/时间
<wbr>定义了一个可能的断线
所以语义元素有什么用？
顾名思义，语义标签语义的目的，只有好的。他们都是块级元素，会使预期，不管他们的HTML标签。
他们有其他重要的好处，我们下面的列表，但如果你读过关于HTML5的语义元素在网页上，你会经常发现这样的建议：
不要花太多时间设定语义要素在更重要的任务的损害。
这是公平的。毕竟，语义元素不影响SEO，与你的客户和网站访问者可能不会注意到他们。
但是一旦你了解到HTML5的影响可达性（下面），你可能会重新考虑你的网站结构和考虑语义元素的重要-如果不是强制性的-你的网页设计过程方面。
语义元素的设计师和开发者的利益
HTML5的语义元素帮助我们创造的代码结构，使其更具可读性和易维护性。
他们帮助我们思考我们的动态数据结构，并选择适当的标题的层次。
他们帮助我们区分我们的标记的语义元素，我们仅用于布局的。
后，HTML5语义要素推动我们学习意义HTML元素和更好地了解我们的观众，特别是那些有残疾的生活。
语义要素效益的可访问性
对于视力正常的用户，以确定一个网站的各个部分很容易。标题，菜单，和形式都是立即的，视觉明显。
但对于一个机器像谷歌的蜘蛛，或屏幕阅读器，这些视觉语义不太明显。
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.
可达性和网页
这里是无障碍的w3c.org：
Web可访问性意味着残疾人可以使用Web。更具体地说，Web可访问性意味着残疾人可以感知，理解，导航，和与网络的互动，和他们可以有助于网站。无障碍网页也有益于他人，包括老年人由于衰老变化的能力。
操作系统包括默认的许多辅助功能选项，包括文字大小控制，文本到语音，颜色和对比度控制，等有人浏览网页的辅助设备，机器翻译的文本和媒体音频或盲文，例如。
你的网站使用HTML5的标签语义元素的命名是一个让你的网站更容易的有效的方法。
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>.
现在，让你的网站更容易，往往取决于你。中小客户可能不会提出这个话题的话，除非他们专门针对残疾人观众。但更大的项目和涉及国家或政府的组织可能会要求高标准的可访问性
为什么？因为大型网站想要大的可视性和可用性，和公共场所经常为法律要求必须符合无障碍标准。这一法律规定公共场所必须使用轮椅和公共网站的人访问必须是可访问的任何人，在任何设备上。
当然，让你的网站可以不停止在使用HTML5标签。主题是巨大的，但这里的几个要点：
使用标题正确的构造你的内容
包括描述性的ALT文本的图像Webflow轻松地在设计师的图片添加ALT文本和编辑，所以一定要在这个时间。没有文本到语音转换系统可以描述图像比你可以。
给你独特的描述性文本链接即.,别用“学习”或“阅读更多”或“在这里。”。
使用颜色与护理8%的人口患有红绿色盲。这是一个很多人。红色绿色色盲是一个色盲的各种形式。不要仅依靠颜色来传达意义的用户。
访问窗体设计形式领域需要适当地标记为屏幕阅读器来处理它们。
表格数据用表格布局，不
确保所有内容都可以单独使用键盘访问
保持你的点击区域明显大
更多关于可访问性，看看我们的文章”5种方法可以提高你的网站的内容的可访问性和整体用户体验”
了解如何以及为什么你应该使用Webflow HTML5元素
使用HTML5语义元素
相信它或没有，HTML5标签不是一门精确的科学，所以对他们的使用意见纷歧的房间。
但是有足够的共识，让我们推荐一个简单的和逻辑的方式来命名你的元素。
所以现在让我们走过你怎么会在两个不同的页面类型：经典的内容页，和一个更加模块化的主页。
# 1：HTML5标签的经典内容页
让我们考虑一个标准，常见的网站结构。一个标题，菜单，一篇文章，一个侧边栏和页脚。
一个简单的，普通内容页结构。
有这样一个经典的页面结构，它的标签不太具有挑战性的部分适当。马上，4块是显而易见的：标题、菜单、主要地区，和页脚。
So we can confidently tag these: <header>, <navbar>, <main>, and <footer>.
A content page with <header>, <navbar>, <main> and <footer> elements
怎么语义标签的这种布局的主要元素。
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，看到它，你不会感觉到你错过了什么。
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:
这样的内容对自己有意义吗？
难道要上市，说，一个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.
每一段必须且只能有一个标题。在这种情况下，H2标题作为章节标题。
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.
为规范提出：
每段的主题应该是确定的，通常包括标题（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.
好的，现在我们已经习惯几乎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.
主页有点打破由于内容类型，它们通常含有混合不明显。让我们考虑我们的示例站点的主页。
A classic CMS website's homepage
一个典型的、简单的CMS网站主页。
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:
