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，然后根据需要将它们视为div。这样，保留了<h1>标记的语义含义，省略了不必要的<divs>。阅读divitis。

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

Answer 4

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

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

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

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

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

Answer 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中，你仍然可以随意设计它。

Answer 8

您可以使用html5结构元素：

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

替代h1元素？

8 个答案: