11

我有一个类似以下的网页：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Title</title>
    </head>
    <body>
        <header>
            <span>Logo</span>
            <nav>Navigation</nav>
        </header>
        <main>
            <h1>Page heading</h1>
            <div>
                Page content
            </div>
        </main>
        <footer>
            Content information
        </footer>
    </body>
</html>

页面结构类似于当前 HTML5 草案中的一个示例：http: //www.w3.org/html/wg/drafts/html/master/grouping-content.html#the-main-element我认为是语义正确。

现在我想使用 CSS 来设置这个文档的样式。我想成为顶部的页眉和底部的页脚，这当然很容易做到。在标题内，我想将徽标放在右侧，将导航放在中间，这也可以（例如，通过使用现代浏览器以一种或另一种方式支持的灵活框布局模型，或者通过使用浮动）。

当我想将主要的内容标题（h1 元素）直观地放在标题的左侧时，我的问题就开始了。我可以使用 position: absolute 但这样的布局不是很灵活，并且一旦标题或标题的大小发生变化就会中断。建议的 CSS 网格布局http://www.w3.org/TR/css3-grid-layout/可能能够完全满足我的要求，但据我所知，它仅在 IE 10 中（不知何故）受支持.

一种简单且可行的解决方案是简单地重组我的页面：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Title</title>
    </head>
    <body>
        <div>
            <h1 id="heading">Page heading</h1>
            <header>
                <span>Logo</span>
                <nav>Navigation</nav>
            </header>
        </div>
        <main aria-labelledby="heading">
            <div>
                Page content
            </div>
        </main>
        <footer>
            Content information
        </footer>
    </body>
</html>

然而，这种解决方案虽然易于布局，但其完整语义仅通过 aria-* 属性表示，并且似乎违背了 HTML5 语义的精神（尤其是主要元素）。

虽然我的示例页面可能很简单，但您可以轻松想象一个更复杂的页面，其中更多元素的视觉位置与 HTML5 标记的流顺序不同（并且嵌套以便灵活的框布局顺序属性获胜不够）。你会如何解决这个问题？用非语义元素（例如 div）重写 HTML5 标记，使其更符合视觉布局，然后尽可能使用新结构通过语义元素（例如页脚或主）交换非语义元素？

4

3 回答 3

6

我遇到了和你一样的难题，我很感激这种挫败感。我会尝试一个否定的答案，因为我觉得这两个积极的答案（也就是说你可以实现你的目标）都没有抓住重点。

首先，在我看来，您的主要困难是 CSS 无法将元素移动到新容器中。这两个答案分为两类：

  1. 有些是超特定的涉及浮动、负边距和/或绝对定位的技巧（主观而言），可以将项目从外观上移出其容器。这些可能是有效的，但仅限于非常特殊的情况。随着您的需求增长，它变得难以维护，并且需要设置一个相当大的思维上限来解决您之前错过的每个新需求或边缘案例。@jennifit 的答案试图将您推向这个方向。我相信这是那些努力遵循语义HTML5精神的人所采取的正常路线，这是令人钦佩的。但它可能是一个泥潭，让你开始问到底你在为谁维护你的语义纯度？是为了搜索引擎、屏幕阅读器还是易于维护？我会在下一次分类后回到这个。

  2. 有些是实用的合理化，声称在语义上是等价的，但实际上是不同的语义含义。在我看来，这些确实是语义黑客。@volker-e 的答案就是一个例子。他是对的，这是一种可行的替代标记——但是，它不等于相同的语义。h2属于-在页面标题main中h1移动它是没有意义的。实际上，您是在说您的标题与您的主要内容无关。在某些方面，这比使用您想要使用的 div 更糟糕，因为您通过将 page-header 和 site-header 分组到相同的语义上产生了错误的语义关系header。一个没有语义意义的容器，div, 对于两者header,main在我看来实际上不那么反常。

所以，回到我所说的关于你为谁维护语义纯度的问题，这是真正的哲学问题。通常有一个明显的、有效的和可维护的解决方案，而不会合理地滥用现有的语义元素或 css“技巧”。在您的情况下，如果有一个项目在语义上是孩子但在表面上不是孩子，答案就是您已经提出的问题：

用非语义元素（例如 div）重写 HTML5 标记，使其更符合视觉布局，然后尽可能用新结构通过语义元素（例如页脚或主）交换非语义元素。

无论您的语义纯度是否适用，这都是正确的做法

  • 可访问性：在这种情况下，您可以使用 ARIA 角色以非分层方式实现这一目标。
  • 搜索引擎：搜索引擎仍然理解旧的做事方式，所以如果你遵循旧的语义方法，你就不会陷入 SEO 麻烦。
  • 维护：这是吸引大多数人的原因——但问题是，可维护的 HTML 和不可维护的 CSS 有何意义，或者反过来呢？您别无选择，只能将您的维护视为 CSS 和 HTML 的组合，并且您必须找到中间立场，当您遇到困难的表现问题时，它们会同样混乱。

如果您认为 HTML 语义才是最重要的，那么唯一可能的答案是接受分层 HTML 语义对布局的限制。问题是，CSS 中没有办法重新创建布局层次结构。在此之前，您将不得不接受HTML 既是一种表示语言又是一种语义语言，因此，语义始终是“更好”和“更差”的问题。真正美丽或丰富或完美的语义在许多（如果不是大多数）布局中是无法实现的。

于 2014-04-11T23:10:12.247 回答
1

我的方法如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <a class="aural" href="#content">Jump to content</a>
    <header role="banner">
        <h1 class="site-logo">Logo</h1>
        <nav role="navigation" aria-labelledby="nav-heading">
            <h6 id="nav-heading">Navigation</h6>
            <ul>…&lt;/ul>
        </nav>
        <h2 id="heading">Page heading</h2>
    </header>
    <main id="content" role="main" aria-labelledby="heading">
        Page content
    </main>
    <footer role="contentinfo">
        Content information
    </footer>
</body>
</html>

然后选择一个 CSS 规则集，例如：

header h1,
header h2,
header nav {
    float: right;
}

差异：

  • 您有适合页面内容的可访问标题
  • div您在header&中保存其他看似无用的内容main
  • 你有一个很好的HTML5 结构大纲，这有助于 SEO。
  • 我已经包括（不是问题的一部分）WAI-ARIA 1.0 草案规范中的导航地标角色
  • 我已经包含了一个跳过链接，这仍然是推荐的最佳实践
  • 微小的变化：我知道，charset值大小写不敏感，但你也写DOCTYPE大写，UTF-8是更正确的值，见http://en.wikipedia.org/wiki/UTF-8#Official_name_and_variants
于 2013-06-05T01:55:51.467 回答
0

如果 < main > 中有 position:relative 并在 h1 上使用 position:absolute 并带有 z-index 和 -ve 边距，则第一个结构可能仍然有效。这样，标题将始终浮动在与主要内容相关的相同位置的顶部。虽然它可能不是最好的解决方案，但我认为它不会破坏布局（？）

于 2013-05-27T17:51:50.833 回答