HTML5结构 – 和用法

前端之家收集整理的这篇文章主要介绍了HTML5结构 – 和用法前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
美好的一天,

我刚开始学习HTML5 – 没有问题,一切都很顺利.

关于< article>,< section>的语义用法,我只有一个小问题.和< div>标签.

我知道< div> element没有语义含义 – 在HTML5中,它应该主要用于脚本/样式目的.这里的一切都很清楚.我在SO问题中找到了很多有用的信息:HTML5 has new tags article,section and aside. When should I use div tag?.

但是,我在< article>中遇到了一些问题.和< section>用法. 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.

其中< section>应该使用标签

For a section in a document. Such as chapters,headers,footers,or any other sections of the document.

从理论上讲,一切都很清楚.但是,在为我的第一个HTML5网站准备代码时,我发现它有点难以区分.

让我解释一下我的网站结构:

>背景被添加到body元素.工作完美.
>我在每个HTML / CSS项目中使用960.gs网格系统.这次我也在使用它.你肯定知道,它需要添加一个容器(在我的例子中有一个类:container_12).

总结我的结构的解释:

>作为主要容器,我使用了< div class =“container_12”>
>我的文档中的第一个元素是< header>.它包含很少的元素:滑块和顶栏.顶栏是< section>.它有两个子元素:左侧的电话号码和右侧的语言列表.对于这些元素,我使用了< section>太.对于滑块(或内页上的短口号占位符),我使用了< section>标签包含两个< section>标签:左右列.
>作为主页的主要内容包装器,我决定使用< section>元件.对于我正在使用的内页< article>对于像关于我们等页面,对于博客列表,我正在使用< section>列表< article>里面的标签.对于单个帖子,我正在使用< article>元件.
>显然,对于一个页脚,我正在使用< footer>具有三个< section>的元素元素作为列包装器.

转换为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>

将其转换为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>

我的方法是否正确?你能添加或更正一些东西吗?

为了避免任何问题:我知道< section>不是< div>的替代品.

解决方法

好吧,回答这个问题的一种方法是使用像 http://gsnedders.html5.org/outliner/这样的工具来查看文档的大纲.你会发现每个部分都需要一个标题来理解,所以没有一些内容就很难说.如果每个部分都有一个H!有意义的标签,然后它通常是正确的.如果某个部分不需要h1那么它通常是错误的.

章节应该自己有意义,没有背景.理解这一点的一种简单方法是考虑RSS提要 – 提要上的每个条目都像一个部分.如果你将它添加RSS提要(或者在那种情况下它会有意义),那么它可能是一个部分.如果它只是页脚上的一列,那么你就不会把它放在RSS源上,所以它可能不是一个部分.

基于此,我可能会做这样的事情(基于我对你每个位置的假设).我还添加了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>
原文链接:https://www.f2er.com/html5/168468.html

猜你在找的HTML5相关文章