替代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中，您仍然可以根據需要設置樣式。