标签: semantic-markup

我只是想知道你在FORM-tag中对DIV-tag的看法是什么？

我需要这样的东西:

<form>
  <input type="text"/>
  <div> some </div>
  <div> another </div>
  <input type="text" />
</form>

DIV在内部使用FORM或我需要不同的东西是一般做法吗？

以下哪一项是构建页面的正确方法:

1)h1仅限于header

<header>
    <h1>Site title</h1>
    <nav>...</nav>
</header>
<section>
    <h2>Page title</h2>
</section>

如果我仅使用h1内部header作为网站的标题,则每个页面都将具有相同的h1标记内容.这似乎没有很多信息.

2)h1in header和section,用于站点和页面标题

<header>
    <h1>Site title</h1>
    <nav>...</nav>
</header>
<section>
    <h1>Page title</h1>
</section>

我也看过h1两次header和section标签中使用不止一次的例子.但是,同一页面有两个标题是不是错了？此示例显示了多个标题和h1标记http://orderedlist.com/resources/html-css/structural-tags-in-html5/

3)h1仅在section,强调页面标题

<header>
    <p>Site title</p>
    <nav>...</nav>
</header>
<section>
    <h1>Page title</h1>
</section>

最后,W3似乎建议h1在主section元素中使用,这是否意味着我不应该在header元素中使用它？

章节可能包含任何等级的标题,但强烈建议作者仅使用h1元素,或者使用适当等级的元素作为该部分的嵌套级别.

这是我一直在努力解决的问题.标记名称/值对的正确方法是什么？

我喜欢<dl>元素,但它提出了一个问题:没有办法将一对与另一对分开 - 它们没有唯一的容器.在视觉上,代码缺乏定义.但从语义上讲,我认为这是正确的标记.

<dl>
    <dt>Name</dt>
    <dd>Value</dd>
    <dt>Name</dt>
    <dd>Value</dd>
</dl>

在上面的代码中,很难在视觉上和代码中正确地偏移对.例如,如果我想,但每对的边界,这将是一个问题.

我们可能会指向表格.可以说,名称 - 值对是表格数据.这似乎对我不正确,但我看到了这个论点.但是,除了位置或添加类名外,HTML不会将名称与值区分开来.

<table>
    <tr>
        <td>Name</td>
        <td>Value</td>
    </tr>
    <tr>
        <td>Name</td>
        <td>Value</td>
    </tr>
</table>

从视觉角度来看,这在代码和CSS中都更有意义.设计上述边界是微不足道的.然而,如上所述,语义最多是模糊的.

想法,评论,问题？

编辑/更新 也许这是我应该在结构方面明确提到的,但是定义列表也存在不对语义进行分组的问题.a dd和a 之间的排序和隐含边界dt很容易理解,但它们对我来说仍然感觉有些偏差.

在网站的页脚中包含版权声明的最佳和最具语义标记/方法是什么？

为HTML列表提供语义标题的正确方法是什么？例如,以下列表具有"标题"/"标题".

水果

• 苹果
• 梨
• 橙子

应该如何处理"水果"这个词,以便它在语义上与列表本身相关联？

我正在为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>,我不确定.

欢迎所有意见.魔鬼的拥护者鼓励.

是否是适当的HTML实体给出维度×？我希望在语义上是正确的,但这引出了一个问题,即将维度列为2" x 3"甚至语义？如果x代表"by",我会使用字母x还是×？

在我的代码中,我一直在使用2″ × 3″,或2"×3".根据"应用于Web的印刷样式元素"中的建议,不间断空格是为了防止尺寸被包裹.

以下所有内容是否具有相同的语义含义？如果没有,请解释你的答案.

1.

<nav>
    <ul>
        <li><a href="#">link</li>
        <li><a href="#">link</li>
        <li><a href="#">link</li>
        <li><a href="#">link</li>
    </ul>
</nav>

2.

<div role="navigation">
    <ul>
        <li><a href="#">link</li>
        <li><a href="#">link</li>
        <li><a href="#">link</li>
        <li><a href="#">link</li>
    </ul>
</div>

3.

<ul role="navigation"> 
<! -- breaks HTML5 specification 3.2.7.4 Implicit ARIA Semantics
      navigation is not an allowed value of role on ul -->
    <li><a href="#">link</li>
    <li><a href="#">link</li>
    <li><a href="#">link</li>
    <li><a href="#">link</li>
</ul>

注意:我知道<b>这<span style="font-weight:bold>是一种表现形式,是一种更好的方式,<strong>并且<em>是强调的,但我的问题不是关于这一点.

如果我们把每一个<b>到<strong>盲目？许多人这样做,他们认为<b>不符合网络标准,因此他们将每个网站转换<b>为<strong>现场重新设计,内容重新填充,新网站设计,人们也向其他人提出这一点.

Dreamweaver中还向所有转换选项<b>,并<i>以<strong>与<em>上粘贴代码在设计视图中,当我们使用B和我哪些人盲目使用.

alt text http://shup.com/Shup/280420/1101118332-My-Desktop.png

和Dreamweaver(如果上面的选项被选中),以及网上WYSIWYG编辑器给输出<strong>和<em>而按钮显示乙和我.

alt text http://shup.com/Shup/280425/1101118921-My-Desktop.png

在我看来,它正在制造一种对<strong>和的错误观念<b>

当我们从客户端获取内容时,我们不知道客户想要强调的位置以及他只想使用粗体文本进行演示.在这种情况下我们该怎么做？谁也没有给决定为每个实例(我们和客户端)的时候,是否应该<b>或者<strong>,<i>或<em>

有什么利弊的每一个转换<b>和<i>成<strong>和<em>盲目的,如果我们说我们的网站是访问？

更新:记住<b>并且<i>不要弃用它们是HTML 5规范

在我的HTML中,我很好奇是否在语义上正确使用唯一标识符,例如<toys> </toys>保存图像而不是图像<h2>.例如:

是否首选: <toys class="grid_4 push_2">&nbsp</toys>

与CSS:

    toys {
    background: url("toys.png") no-repeat scroll 0 0 transparent;
    width: 181px;
    height: 93px;
    margin-top: -8px;
    }

而不是:我目前有: <h1 class="grid_4 push_2">&nbsp</h1>

与CSS:

    h1 {
    background: url("toys.png") no-repeat scroll 0 0 transparent;
    width: 181px;
    height: 93px;
    margin-top: -8px;
    }

是否使用像<toys>语义正确的唯一标识符？