[英]HTML5 Structure - <article>, <section> and <div> usage
Good Day, 美好的一天,
I just started to learn HTML5 - have no issues, everything's going perfectly. 我刚刚开始学习HTML5 - 没有问题,一切都很顺利。
I have only one, small question about semantic usage of <article>
, <section>
and <div>
tags. 我只有一个关于<article>
, <section>
和<div>
标签的语义用法的小问题。
I know that <div>
element has no semantic meaning - in HTML5 it should be used mainly for scripting/styling purposes. 我知道<div>
元素没有语义含义 - 在HTML5中它应该主要用于脚本/样式目的。 Here everything is clear for me. 这里的一切都很清楚。 I found a lot of useful informations in SO question: HTML5 has new tags article, section and aside. 我在SO问题中找到了很多有用的信息: HTML5有新的标签文章,部分和旁边。 When should I use div tag? 我什么时候应该使用div标签? . 。
However, I have some issues with <article>
and <section>
usage. 但是,我有一些<article>
和<section>
用法的问题。 W3C HTML5 specification says that <article>
tag W3C HTML5规范说<article>
标签
Specifies independent, self-contained content, could be a news-article, blog post, forum post, or other articles which can be distributed independently from the rest of the site. 指定独立的,独立的内容,可以是新闻文章,博客文章,论坛帖子或其他可以独立于网站其他部分分发的文章。
where <section>
tag should be used 其中应使用<section>
标签
For a section in a document. 对于文档中的某个部分。 Such as chapters, headers, footers, or any other sections of the document. 例如章节,页眉,页脚或文档的任何其他部分。
In theory, everything's clear. 从理论上讲,一切都很清楚。 However, while preparing the code for my first HTML5 website I found it a bit hard to differ. 但是,在为我的第一个HTML5网站准备代码时,我发现它有点难以区分。
Let me explain my website structure: 让我解释一下我的网站结构:
To conclude explanation of my structure: 总结一下我的结构的解释:
<div class="container_12">
作为主要容器,我使用了<div class="container_12">
<header>
. 我的文档中的第一个元素是<header>
。 It contains few elements: slider and top bar. 它包含很少的元素:滑块和顶栏。 The top bar is a <section>
. 顶部栏是<section>
。 It has two child elements: telephone number on the left and language list on the right. 它有两个子元素:左边的电话号码和右边的语言列表。 For those elements, I have used <section>
too. 对于这些元素,我也使用了<section>
。 For a slider (or a short slogan placeholder on inner pages) I've used <section>
tag which contains two <section>
tags: left and right column. 对于滑块(或内页上的短口号占位符),我使用了<section>
标签,其中包含两个<section>
标签:左右列。 <section>
element. 作为主页的主要内容包装器,我决定使用<section>
元素。 For inner pages I'm using <article>
for pages like About Us, etc. For blogs list, I'm using a <section>
with a list of <article>
tags inside. 对于内页我正在使用<article>
来搜索关于我们等页面。对于博客列表,我正在使用带有<article>
标签列表的<article>
<section>
。 For a single post, I'm using <article>
element. 对于一篇文章,我正在使用<article>
元素。 <footer>
element with three <section>
elements as a column wrappers. 显然,对于页脚,我使用带有三个<section>
元素的<footer>
<section>
元素作为列包装器。 My layout before convertion to HTML5: 转换为HTML5之前的布局:
<div class="container_12">
<div class="grid_12 header">
<div class="bar grid_12 alpha omega">
<div class="grid_6 alpha">
Phone number
</div>
<div class="grid_6 omega">
German - English - French
</div>
</div>
<div class="grid_6 alpha">
LOGOTYPE
</div>
<div class="grid_6 omega">
<ul>
navigation
</ul>
</div>
<div class="grid_12 alpha omega">
<div class="grid_6 alpha">
Slider I col
</div>
<div class="grid_6 omega">
Slider II col
</div>
</div>
</div>
<div class="grid_12 content">
</div>
<div class="grid_12 footer">
<div class="grid_4 alpha">
Footer I col
</div>
<div class="grid_4">
Footer II col
</div>
<div class="grid_4 omega">
Footer III col
</div>
</div>
</div>
Here's my code after converting it to HTML5: 将其转换为HTML5后,这是我的代码:
<div class="container_12">
<header class="grid_12">
<section class="bar grid_12 alpha omega">
<section class="grid_6 alpha">
Phone number
</section>
<section class="grid_6 omega">
German - English - French
</section>
</section>
<section class="grid_6 alpha">
LOGOTYPE
</section>
<nav class="grid_6 omega">
<ul>
navigation
</ul>
</nav>
<section class="grid_12 alpha omega">
<section class="grid_6 alpha">
Slider I col
</section>
<section class="grid_6 omega">
Slider II col
</section>
</section>
</header>
<section class="grid_12 content">
</section>
<footer class="grid_12">
<section class="grid_4 alpha">
Footer I col
</section>
<section class="grid_4">
Footer II col
</section>
<section class="grid_4 omega">
Footer III col
</section>
</footer>
</div>
Is my approach correct? 我的方法是否正确? Could you add or correct something? 你能添加或更正一些东西吗?
To avoid any questions: I know that <section>
is not a replacement for a <div>
. 为了避免任何问题:我知道<section>
不是<div>
的替代品。
Well, one way to answer this is to have a look at the outline of the document using a tool like http://gsnedders.html5.org/outliner/ . 好吧,回答这个问题的一种方法是使用像http://gsnedders.html5.org/outliner/这样的工具查看文档的大纲。 You'll notice that each section needs a heading to make sense, so without some content it's hard to say. 你会注意到每个部分都需要一个标题来理解,所以没有一些内容就很难说。 If each section has a H! 如果每个部分都有一个H! tag that makes sense, then it's usually right. 有意义的标签,然后它通常是正确的。 If a section doesn't need a h1 then it's usually wrong. 如果某个部分不需要h1那么它通常是错误的。
Sections should make sense on their own, with no context. 章节应该自己有意义,没有背景。 An easy way to understand this is to think about an RSS feed - each entry on the feed is like a section. 理解这一点的一个简单方法是考虑RSS提要 - 提要上的每个条目都像一个部分。 If you would add it to an RSS feed (or it would make sense in that context), then it's probably a section. 如果你要将它添加到RSS提要(或者在那种情况下它是有意义的),那么它可能是一个部分。 If it's just a column on a footer, then you wouldn't put it on an RSS feed, so it's probably not a section. 如果它只是页脚上的一列,那么你就不会把它放在RSS源上,所以它可能不是一个部分。
Based on that, I'd probably do something like this (based on my assumption about what you are putting in each bit). 基于此,我可能会做这样的事情(基于我对你每个位置的假设)。 I'm also adding the WAI-ARIA landmark roles, as they are simple and make a lot of difference when you are using a screen reader. 我还添加了WAI-ARIA标志性角色,因为它们很简单,当您使用屏幕阅读器时会产生很大的不同。
<div class="container_12">
<header class="grid_12" role="banner">
<div class="bar grid_12 alpha omega">
<div class="grid_6 alpha">
Phone number
</div>
<div class="grid_6 omega">
German - English - French
</div>
</div>
<div class="grid_6 alpha">
LOGOTYPE
</div>
<nav class="grid_6 omega" role="navigation">
<ul>
navigation
</ul>
</nav>
<div class="grid_12 alpha omega">
<div class="grid_6 alpha">
Slider I col
</div>
<div class="grid_6 omega">
Slider II col
</div>
</div>
</header>
<section class="grid_12 content" role="main">
<!-- Not sure what goes in here? Let's assume it's the main content. -->
</section>
<footer class="grid_12">
<div class="grid_4 alpha">
Footer I col
</div>
<div class="grid_4">
Footer II col
</div>
<div class="grid_4 omega">
Footer III col
</div>
</footer>
</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.