Html h1元素的替代品？

我喜欢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类将css样式添加到任何h1中，但不支持在其中放置div…

是否有不指定的原因：

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

文本
标题文本

这将保持标记的语义，仍然向右浮动

文本

，并使其远离h1标记，而h1标记在语义上不属于h1标记。

您可以随时这样做

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

标题文本

---

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

我个人喜欢的方法是保持

标记完整，并使用

标记，而不是在它们内部使用div。您可以将跨距设置为

display:block

，然后根据需要将其视为div。这样，将保留

标记的语义，并省略不必要的

。仔细阅读

---

如果您需要在

标记中包含图像，这将无法解决您的问题。无论如何，您可能不应该添加带有

img

标记的图形样式，而是将图像作为

元素的背景，将与样式相关的图形从标记移到CSS文件中。

只需颠倒部分代码的嵌套顺序即可：

<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，但你明白了。通常，最好将块元素保持在外部，并将行元素嵌套在块元素中。

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

你应该使用语义：这使得设计（图像、颜色等）最为精细，图形是你的牡蛎），并且完全具有语义和可访问性

否则如上所述，您可以添加内联元素的任何元素：A、SPAN等。。。在你的H1里面。。。但是，如果你对语义感兴趣并且对搜索引擎优化很友好，我会避开这一点

<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>

h1{
背景：url（'../path/to/image/image_to_replace_header.jpg'）不重复左上角；//设置将替换头的BG
文本缩进：-9999px；//将测试移出屏幕
溢出：隐藏；//永久隐藏交错文本
宽度：300px；//设置块（头）的宽度
高度：100px；//设置块（表头）的高度
}  
我最棒的网站

---

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

直接回答您的问题：是的，您可以使用其他方法。它保持您的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中，您仍然可以根据自己的喜好设置样式。

您可以使用html5结构元素：

标题文本
文本
正文内容

为什么不使用特定的CSS类名而不是h1？为什么不在h1s中添加div？@Pavel，我认为这会丢失h1作为标题的语义。我猜不同的读者和解析器希望能够区分正文和标题文本（例如，盲人的文本到语音）@Assaf只能包含内联元素，而不能包含块级元素，如和@Assaf，不确定，但是如果我使用xhtml+1，Visual Studio designer会不断警告我——这是迄今为止最简单、最干净的解决方案，可以正确地将标记与样式分开。除了“文本”在语义上不是标题的一部分，所以它根本不应该放在h1元素中。@RegDwight我同意你的意见，但如果他想这样做，这将是最简单的方法。没问题（尽管如此，我还是对你的答案投了赞成票），只是说。