HTML5文档大纲和语义_Html - Fatal编程技术网

HTML5文档大纲和语义

html

HTML5文档大纲和语义,html,Html,我已经使用HTML5的一些元素有一段时间了，但我从来没有真正投入到其中，所以我把我的屁股放在首位我已经阅读了我能找到的每一个方面，并为自己建立了一个小测试仪。我已经通过大纲视图工具运行了它，所有的东西看起来都是特朗普。我只是想知道是否有人愿意看一看我的完整测试文档，看看我是否忽略了一些事情/做了一些严重错误的事情 <body>  <header> <img src="logo.jpg" a

我已经使用HTML5的一些元素有一段时间了，但我从来没有真正投入到其中，所以我把我的屁股放在首位

我已经阅读了我能找到的每一个方面，并为自己建立了一个小测试仪。我已经通过大纲视图工具运行了它，所有的东西看起来都是特朗普。我只是想知道是否有人愿意看一看我的完整测试文档，看看我是否忽略了一些事情/做了一些严重错误的事情

<body>
    <!-- Header --> 
    <header>
        <img src="logo.jpg" alt="Logo" />
        <h1>Slogan</h1>
        <nav>
            <header><h2 class="hide-element">Navigation</h2></header>
            <ul>
                <li>Nav Item</li>
                <li>Nav Item</li>
                <li>Nav Item</li>
            </ul>
        </nav>
    </header>       
    <!-- Main Content -->       
    <section id="wrapper">
        <header>
            <h2>Page Heading</h2>
        </header>               
        <section>               
            <h2 class="hide-element">Section Heading</h2>
            <article>
                <header>
                    <h3>Sub Heading</h3>
                    <time datetime="2013-02-08">February 8th 2013</time>
                </header>
                <p>Section Text</p>
                <footer>
                    Like Button
                </footer>
            </article>

            <article>
                <header>
                    <h3>Sub Heading</h3>
                </header>
                <p>Section Text</p>
                <figure>
                    <img src="" alt="" />
                    <figcaption>Caption</figcaption>
                </figure>
                <footer>
                    Like Button
                </footer>
            </article>              
        </section>

        <aside>
            <h2 class="hide-element">Sidebar</h2>
            <nav>
                <header>
                    <h3>Categories</h3>
                </header>
                <ul>
                    <li>Sidebar Nav Item</li>
                    <li>Sidebar Nav Item</li>
                    <li>Sidebar Nav Item</li>
                </ul>
            </nav>
        </aside>            
    </section>

    <!-- Footer -->     
    <footer>
        <nav>
            <h3>Links</h3>
            <ul>
                <li>Link</li>
                <li>Link</li>
                <li>Link</li>
            </ul>
        </nav>
        <section>
            <h3>Social</h3>
            <a href="">Link to Twitter</a>
            <a href="">Link to Facebook</a>
        </section>
        <p class="copyright">&#169; Copyright 2013</p>
        <p class="credit"><a href="" target="_blank">Credit</a></p>
    </footer>   
</body>


标语
航行

导航项目
导航项目
导航项目

页眉
章节标题
&169；版权所有2013

更新

在标记内的h2周围添加。我不知道你可能在里面。谢谢

将div#包装更改为节

div元素不是，这意味着在相同的大纲级别有两个

标题

元素，一个是

body

的直接子元素，另一个是

div#wrapper

的直接子元素。这当然不是无效的，甚至不是，但它确实看起来有点奇怪。如果希望它成为

#wrapper

中内容的标题，而不仅仅是整个页面的第二个标题，那么

#wrapper

元素应该是

节或文章。除此之外，我认为标记结构很好。
您可能应该在顶部添加
和
，并在末尾添加
。这可能更适合html5中的代码复查堆栈交换，h1-h6标记的工作方式与html4中的不同，您可以在每个分段元素中添加整个h1-h6堆栈（剖面图/导航图/等）所以几乎所有的h2/h3都应该是h1。除此之外，还有一个建议是使用版权标签。你好，罗杰C。谢谢。我读到你可以在每个标题上使用h1，但它不适合传统浏览器。你的建议对所有浏览器都适用吗？另外，小标签对版权或信用最好吗？我知道我自己也试过，它在所有浏览器上都很好用。不过我不确定搜索引擎是否喜欢。。