html 5中sideber小部件的语义正确容器是什么?

时间:2012-09-08 22:48:07

标签: html5 wordpress-theming semantic-markup

我有一个没有文字类型内容的页面。这是一个jquery标题,两个侧边栏和一个页脚。辅助侧栏是动态生成的插件Wordpress小部件列。

我喜欢的滑块是html5,所以我正在冒险。这是xhtml版本:

// Area 4 home secondary
register_sidebar( 
    array (
        'name' => 'Home Secondary Widget Area',
        'id' => 'home_secondary_widget_area',
        'before_widget' => '<div id="%1$s" class="widget-container %2$s">',
        'after_widget' => "</div>",
        'before_title' => '<h3 class="widget-title">',
        'after_title' => '</h3>'
     ) 
);

然后解析为:

<div id="primary" class="widget-area">
    <ul class="xoxo">
        <li id="search-2" class="widget-container widget_search">
          <form role="search" method="get" id="searchform" action="http://localhost/wordpress_testbed/" >
            <div>
                  <label class="screen-reader-text" for="s">Search for:</label>
              <input type="text" value="" name="s" id="s" />
              <input type="submit" id="searchsubmit" value="Search" />
            </div>
       </form>
         </li>      
         <li id="recent-posts-2" class="widget-container widget_recent_entries">            
           <h3 class="widget-title">Recent Posts</h3>       
           <ul>
            <li><a href="http://localhost/wordpress_testbed/?p=1" title="Hello world!">Hello world!</a></li>
            <li><a href="http://localhost/wordpress_testbed/?p=358" title="Readability Test">Readability Test</a></li>
            <li><a href="http://localhost/wordpress_testbed/?p=188" title="Layout Test">Layout Test</a></li>
            <li><a href="http://localhost/wordpress_testbed/?p=128" title="Images Test">Images Test</a></li>
            <li><a href="http://localhost/wordpress_testbed/?p=555" title="Post Format Test: Gallery">Post Format Test: Gallery</a></li>
          </ul>
        </li>
    </ul>
</div>

如何标记小部件?奖金将是一种称谓机制。

1 个答案:

答案 0 :(得分:2)

在这种情况下,使用<aside>完全可以接受,如下所示:http://html5doctor.com/aside-revisited/

您的HTML可以正常运行并验证为HTML5。我建议一些更简单的东西,比如:

<aside>
    <section>
        <h2>Item Title</h2>
        <ul>
            <li>Some Items</li>
        </ul>
    </section>
</aside>