альтернатива элементу 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, потому что я могу добавить стиль css к любому h1 с классом div.section, но я не должен помещать в него div ...

Answer 1

Вы всегда можете сделать

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

Затем вы обрабатываете css для очистки поплавков и всплытия второго текста в файле css.

Answer 2

Вам следует использовать семантический метод замены изображения : который делает дизайн максимально сложным (изображения, цвета и т. Д. Графика - это ваша устрица), а также полностью семантическим и доступным.

В противном случае, как упомянуто выше, вы можете добавить любой элемент, который является встроенным элементом: A, SPAN, ect ... внутри вашего 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 3

Метод, который я лично предпочитаю, состоит в том, чтобы сохранить теги <h1> без изменений и использовать теги <span> вместо элементов div внутри них. Вы можете присвоить диапазонам значение display:block, а затем обращаться с ними как с div, если это будет необходимо. Таким образом, семантическое значение ваших <h1> тегов сохраняется, а ненужные <divs> опускаются. Читайте о Дивит .

Это не решит вашу проблему, если вам нужно включить изображения в теги <h1>. Вероятно, вам все равно не следует добавлять графический стиль с тегами img, а вместо этого применять изображение в качестве фона к элементу <h1>, перемещая графику, связанную со стилями, из разметки в файлы CSS.

Answer 4

Есть причина, по которой вы не указываете просто:

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

Это сохранит вашу семантику разметки, по-прежнему плавая text вправо и не допустит ее к тегу h1, в который она семантически не входит.

Answer 5

Вы можете использовать html5 структурные элементы:

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

Answer 6

Чтобы ответить на ваш вопрос напрямую: да, вы можете использовать другой метод. Он сохраняет ваши возможности редактирования 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 7

Заголовки имеют смысловое значение. Подумайте о журнале и почему они используют заголовки. Если вы хотите поместить изображение в заголовок для украшения, используйте background-image. Я не могу придумать причину, по которой вам нужно поместить изображение в H1 для контекстных целей.

Answer 8

Просто измените порядок вложения вашего кода:

<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, но вы поняли идею. Часто эти вещи лучше всего решить, храня блочные элементы снаружи и вкладывая в них линейные элементы.