替代 h1 元素？答案

【问题标题】：alternative to h1 element?替代 h1 元素？
【发布时间】：2013-02-22 22:49:12
【问题描述】：

我喜欢 h1 元素，因为它指定内容是标题样式的内容，但是您不应该将图像或 div 之类的东西放在 h1 中，所以有没有替代 h1 的替代品，我可以在其中放置其他标记?

我当前的 html 如下所示：

<div class="section">
    <h1>
        <div style="float:left">header text</div>
        <div style="float:right">text</div>
        <div style="clear:both;float:none;"></div>
    </h1>
    <div>body contents</div>
</div>

我喜欢 h1，因为我可以为任何带有 div.section 类的 h1 添加 css 样式，但我不应该将 div 放入其中...

【问题讨论】：

为什么不只使用具有特定 CSS 类名的
而不是 h1？
为什么不应该把 div 放在 h1s 中？
@Pavel，我认为因为这失去了 h1 作为标题的语义。我猜各种读者和解析器都希望能够区分正文和标题文本（例如盲人的文本到语音）
@Assaf
只能包含像和这样的内联元素，而不是像
和这样的块级元素
@Assaf，不确定，但如果我使用 xhtml，Visual Studio 设计器会不断给我警告

【解决方案1】：

你总是可以做到的

<h1>header text <span>text</span></h1>

然后您处理 css 以清除浮动并浮动 css 文件中的第二个文本。

【讨论】：

+1 - 迄今为止最简单、最干净的解决方案，正确地将标记与样式分开。
除了“文本”在语义上不是标题的一部分，所以它根本不应该放在 h1 元素中。
@RegDwight 我同意你的看法，但如果他想这样做，这将是最简单的方法。
没有问题（尽管如此，我实际上还是赞成你的答案），只是说。

【解决方案2】：

您应该使用语义image replacement method：这使得设计（图像、颜色等..图形是你的牡蛎）以及完全语义和可访问性成为最精细的设计。

否则如上所述，您可以添加任何 inline 元素：A、SPAN 等...在您的 H1...对语义感兴趣并且对 SEO 友好。：

<style>
  h1{
    background:    url('../path/to/image/image_to_replace_header.jpg') no-repeat top left;  // Sets the BG that will replace your header
    text-indent:   -9999px;  //  Moves the test off screen
    overflow:      hidden;   //  Hides the staggered text for good
    width:         300px;    //  Sets width of block(header)
    height:        100px;    //  Sets height of block(header)
  }  
</style>

<h1>My Awesome Site</h1>

现在您的文字在技术上仍然存在，但您有一张漂亮的照片代替它。有视力、无视力和机器人友好。

【讨论】：

【解决方案3】：

我个人更喜欢的方法是保持<h1> 标签完整并使用<span> 标签而不是其中的div。您可以将跨度设置为display:block，然后在需要时将它们视为 div。这样，您的<h1> 标签的语义就被保留了，而不必要的<divs> 被省略了。阅读divitis。

如果您需要在 <h1> 标记中包含图像，这不会解决您的问题。无论如何，您可能不应该使用 img 标记添加图形样式，而是将图像作为背景应用到 <h1> 元素，将与样式相关的图形从标记中移出到 CSS 文件中。

【讨论】：

【解决方案4】：

您是否有理由不指定：

<div style="float:right">text</div>
<h1>header text</h1>
<!-- <div style="clear:both"></div>  only if really necessary -->

这将保持您的标记语义，仍然将text 浮动到右侧并将其排除在语义上不属于的 h1 标记之外。

【讨论】：

【解决方案5】：

只需颠倒某些代码的嵌套顺序即可：

<div class="section">
   <div style="float:left"><h1>header text</h1></div>
   <div style="float:right"><h1>text</h1></div>
   <div style="clear:both;float:none;">body contents</div>
</div>

我不确定右浮动文本应该是 h1，但你明白了。通常，最好通过将块元素保留在外部并将行元素嵌套在其中来解决这些问题。

【讨论】：

【解决方案6】：

标题具有语义含义。想想一本杂志以及他们为什么使用标题。如果要将图像放置在标题中以进行装饰，请使用背景图像。我想不出为什么您需要将图像放入 H1 以用于上下文目的。

【讨论】：

【解决方案7】：

直接回答您的问题：是的，您可以使用其他方法。它保留了您的 CSS 编辑能力，以及适当的 H1 元素：

<div class="section">

<div id="Header">
<h1 style="float:left">header text<h1>
<div style="float:right">text</div>
</div>

</h1>
<div>body contents</div>
</div>

所有重要的文字都在 H1 中，您仍然可以随意设置样式。

【讨论】：

【解决方案8】：

可以使用html5结构元素：

<section>
    <header>
        <div>header text</div>
        <div>text</div>
    </header>
    <article>body contents</article>
</section>

【讨论】：

只能包含像 和 这样的内联元素，而不是像 和 这样的块级元素

只能包含像和这样的内联元素，而不是像
和这样的块级元素