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

您应该使用语义图像替换方法：这可以实现最精细的设计（图像、颜色等。图形是您的牡蛎），并且完全语义化且易于访问。

否则，如上所述，您可以在 H1 内添加任何内联元素：A、SPAN 等...但如果您对语义感兴趣并且对 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>

现在，从技术上讲，您的文本仍然存在，但它的位置上有一张漂亮的照片。视力正常、视力不佳、机器人友好。