标签: semantic-markup

我经常想知道正确使用 <br>换行符.似乎通常它们被错误地用于定位或清除应该使用CSS的内容.

W3schoools.org表示<br>用于空行,但不用于创建或分隔段落.回顾一下W3C HTML5规范草案,<br>当内容需要换行符时会更加清晰,例如地址行或诗歌中的空行,作者有意.

但我仍然有兴趣进一步澄清或输入任何其他人.我经常发现自己选择不使用<br>标签,而只是使用所需的清除,边距,填充等样式元素来创建所需的空间.

并不是说这是非常重要的,但这里有一个让我思考这个问题的例子,一个流行的("权威的")网站使用了一个<br>我不确定是非常语义的网站.在这里,我只是<a>通过CSS 清除它的兄弟姐妹:

<p>Lorem ipsum dolor sit amet, consectetur tempor laborum.</p>
<br>
<a href="#readmore">more &gt;&gt;</a>

在12月16日,该<main>元素的HTML5扩展规范已经被称为编辑器草案提交给了W3C.摘要如下:

此规范是HTML5规范[HTML5]的扩展.它定义了用于标识文档主要内容区域的元素.除非本规范明确覆盖,否则HTML5规范中的所有规范性内容均旨​​在成为本规范的基础.

主要元素使用诸如"content"和"main"之类的id值来规范识别文档主要内容部分的通用实践.它还定义了一个HTML元素,它体现了WAI-ARIA [ARIA] landmark role = main的语义和功能.

例:

<!-- other content -->

<main>

  <h1>Apples</h1>
 <p>The apple is the pomaceous fruit of the apple tree.</p>

 <article>
 <h2>Red Delicious</h2>
  <p>These bright red apples are the most common found in many
  supermarkets.</p>
  <p>... </p>
  <p>... </p>
  </article>

  <article>
  <h2>Granny Smith</h2>
  <p>These juicy, green apples make a great filling for
  apple pies.</p>
  <p>... </p>
  <p>... </p>
  </article>

</main>

<!-- other content -->

它有所有信息,我觉得我应该开始将它合并到网页中.据我所知,HTML5规范只是渐进式的,新功能已被"固定"到规范而没有升级.我想这意味着浏览器会在可能的时候开始实现它 - 问题是,这需要多长时间以及我如何知道所有浏览器都支持它？我现在应该像现在这样构建它并使用polyfill吗？

在一个典型的文章索引(如没有摘录的博客),像这样的图像:

那些项目应该是list(<ul><li>)还是只是div？

而且,他们应该是数字/ figcaption？因为有些意义,但也...图片是一个艺术的一部分而不是主要内容,所以也许标题/描述不是图像的标题,而是文章的标题.

你怎么看？

编辑:一个实例 - https://news.google.com/?hl=en

我一直在看Twitter的Bootstrap框架,我真的很感动.但是,我不理解下拉导航菜单工作方式背后的想法.

首先,为了查看子链接,您必须单击父级.我可以看到这样做的好处,但为什么不将悬停方法更传统的下拉列为默认值呢？

其次,Twitter Bootstrap的下拉菜单背后的想法似乎照亮了父页面.我可能没有那么好解释......说,你有一个简单的网页结构:

• 家
• 关于
  • 团队
• 服务
  • 网页设计
  • 主机
  • 域
• 联系

在传统的下拉菜单结构中,您将鼠标悬停在"约"和"服务"上,并且会出现包含子链接的下拉菜单(例如"网页设计","托管"等).但是,您也可以单击父页面(即"关于"和"服务")并访问它们.

使用Bootstrap,您不能在结构中拥有父页面,您必须使用锚标记("#").单击此按钮后,您将看到下拉列表中的页面.如果有父页面,这是不好的.从语义("#"是什么意思？)和可访问性(javascript关闭,屏幕阅读器等)的观点来看,它也不是很好.

我可能错过了一些东西,但有人可以解释这背后的想法,特别是关于父页面和语义html /可访问性？

这是博客拥有存档页面(例如按日期或类别)列出相关博客文章,摘录(段落或)和链接的常见模式.但是,我无法确定哪个HTML5元素最适合用于各个帖子.

该<article>标签似乎是一个不错的选择(当然是如果你显示的全部内容),但我不知道它是否适合摘录.该规范说:

article元素表示文档,页面,应用程序或站点中的自包含组合,并且原则上可独立分发或可重用,例如在联合中.

摘录真的是一个独立且可独立分发的内容吗？我不确定.

其他选项可能是<blockquote>标签(但引用自己的帖子很奇怪),或者只是<ol>包含标题和段落的列表(按发布日期排序).

有什么想法吗？

制作搜索结果列表(比如Google)并不是很难,只要你需要一些有用的东西.但是,现在,我希望利用HTML5语义的优势完美地完成它.目标是定义标记搜索结果列表的事实方式,该列表可能被任何未来的搜索引擎使用.

对于每一次打击,我想

• 通过增加数量来订购它们
• 显示可点击的标题
• 显示一个简短的摘要
• 显示其他数据,如类别,发布日期和文件大小

我的第一个想法是这样的:

<ol>
  <li>
    <article>
      <header>
        <h1>
          <a href="url-to-the-page.html">
            The Title of the Page
          </a>
        </h1>
      </header>
      <p>A short summary of the page</p>
      <footer>
        <dl>
          <dt>Categories</dt>
          <dd>
            <nav>
               <ul>
                  <li><a href="first-category.html">First category</a></li>
                  <li><a href="second-category.html">Second category</a></li>
                </ul>
            </nav>
          </dd>
          <dt>File size</dt>
          <dd>2 kB</dd>
          <dt>Published</dt>
          <dd>
            <time datetime="2010-07-15T13:15:05-02:00" pubdate>Today</time>
          </dd>
        </dl>
      </footer>
    </article>
  </li>
  <li>
    ...
  </li>
  ...
</ol>

我不是真正的快乐关于<article/>内<li/>.首先,搜索结果命中本身并不是一篇文章,而只是一篇非常简短的摘要.其次,我甚至不确定你是否可以在列表中放置一篇文章.

Maybe the <details/> and <summary/> tags are more suitable than <article/>, but …

举个例子

是<a href="#"><h1>Heading</h1></a>有效的HTML5？

如果这是结构:

<table cellspacing="0" cellpadding="0">
   <tr>
      <td>I don't need anything here, should I always put a &nbsp; here?</td>
      <td>item </td>
   </tr>
   <tr>
      <td>model</td>
      <td>one</td>
   </tr>
   <tr>
      <td>model</td>
      <td>two</td>
   </tr>
   <tr>
      <td>model</td>
      <td>three</td>
   </tr>
</table>

屏幕阅读器如何读取空白td？它在语义上是否正确？

我想知道我的一些网络开发人员/设计人员认为什么是最好的HTML 5元素,用于模式对话框,如灯箱,超级盒,厚箱,或者你最喜欢的风格.

由于这些类型的UI的并不遵循"正常"网页的典型流程(其中,显然,按照HTML 5规范大师本质上是一个博客),他们并不真正陷入类似的地方<header>,<nav>,<section>,<article>或者<footer>(在其他新的"语义"元素中)可能.

当然,总会有<div>,但是,我只是在想,可能会有一些更具语义准确性的东西.

不幸的是,没有<modal>元素.您对规范中是否应该有一个有什么看法？由于元素不存在,您的下一个最佳选择是什么？

我是HTML的新手.当我开始阅读列表的文档,我注意到一个无处不在<ul>,<li>结构用,甚至用于创建非常简单的列表.

但对我来说,只<a>使用CSS元素是最舒服的:

display: block;
/* and/or */
float: left;

那么,为什么要使用<ul>,<li>而不仅仅是<a>？

非常感谢.