替代h1元素？

Question

我喜欢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放入其中...

Answer 1

你可以随时做

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

然后你处理css来清除浮点数并将第二个文本浮动到css文件中。

Answer 2

有没有理由你没有指定：

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

这将保持您的标记语义，仍然将text浮动到右侧， 并使其远离h1标记，它在语义上不属于它。

Answer 3

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

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

Answer 4

您应该使用语义图像替换方法 ：这使得最精细的设计（图像，颜色等，图形是您的牡蛎）以及完全语义和可访问。

否则如上所述，你可以添加任何内联元素的元素：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>

现在你的文字在技术上仍然存在，但你有一张漂亮的照片。 视力不佳，视力不佳，机器人友好。

Answer 5

您可以使用html5结构元素：

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

Answer 6

只需反转某些代码的嵌套顺序：

<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，但是你明白了。 通常，通过将块元素保持在外部并将线元素嵌套在其中来最好地解决这些问题。

Answer 7

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

Answer 8

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