最佳的侧边栏HTML5标记 [英] Best HTML5 markup for sidebar

问题描述

我为HTML5主题设置了我的WordPress侧边栏，并且真的想要使用 before_widget 和 after_widget 右键。

所以我的问题是：这两种标记模式中的哪一种更合适？以下代码完全在< article> 元素之外。

选项1：除了部分

 < aside id =sidebar> 
< section id =widget_1>< / section> 
< section id =widget_2>< / section> 
< section id =widget_3>< / section> 
< / aside> 
  

选项2：Div with Asides

 < div id =sidebar> 
< aside id =widget_1>< / aside> 
< aside id =widget_1>< / aside> 
< aside id =widget_1>< / aside> 
< / div> 
  

我想辅助问题是每个小部件标题的标题。如果我将每个小部件包装在< section> 中，那么< h1> 似乎最合适。如果我使用< aside> ，我无法确定。 欢迎所有意见。魔鬼的拥护者鼓励。

解决方案

首先所有ASIDE仅用于表示相关内容主要内容不适用于通用侧边栏。 第二，每个边栏只有一个

每个边栏只能有一个。侧边栏的元素是div或部分在旁边。

我会选择选项1：除了部分

 < aside id =sidebar> 
< section id =widget_1>< / section> 
< section id =widget_2>< / section> 
< section id =widget_3>< / section> 
< / aside> 
  

以下是规格 https://www.w3.org/wiki/HTML/Elements/aside

再次使用部分如果他们有标题或页脚，其他平原div

I'm setting up my WordPress sidebars for an HTML5 theme and really wanting to use before_widget and after_widget right.

So my question is this: which of the two markup patterns is more appropriate? The following code is all completely outside the <article> element.

Option 1: Aside with sections

<aside id="sidebar">
    <section id="widget_1"></section>
    <section id="widget_2"></section>
    <section id="widget_3"></section>
</aside>

Option 2: Div with Asides

<div id="sidebar">
    <aside id="widget_1"></aside>
    <aside id="widget_1"></aside >
    <aside id="widget_1"></aside >
</div>

I suppose the auxiliary question is then what heading to use for each widget title. If I wrap each widget in a <section> then <h1> seems most appropriate. If I use <aside>, I'm not sure.

All opinions welcome. Devil's advocates encouraged.

解决方案

First of all ASIDE is to be used only to denote related content to main content not for a generic sidebar. Second, One aside for each sidebar only

You will have only One aside for each sidebar. Elements of a sidebar are div's or section's inside a aside.

I would go with Option 1: Aside with sections

<aside id="sidebar">
    <section id="widget_1"></section>
    <section id="widget_2"></section>
    <section id="widget_3"></section>
</aside>

Here is the spec https://www.w3.org/wiki/HTML/Elements/aside

Again use section only if they have a header or footer in them else plain div

这篇关于最佳的侧边栏HTML5标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！