Можно ли использовать div в h1?

Question

[Антон]

Здравствуйте!

Можно ли использовать внутри h1 теги типа div, p, br?

Знаю что можно использовать small и span, но насчет div не уверен.

Зачем мне div в h1? Хочу красиво оформить заголовок, разбив его на две части (два div).

Comments

[Anton Filippov]

а попробовать в сэндбоксе религия не позволяет?

[Антон]

Антон Ф.: а прежде чем выеживаться можно сеть и подумать, что человек может не разбираться в html/css, не знать терминологий, ибо специализируется в иной области. Нашелся тут, сверх-коммпитентный.

[Anton Filippov]

Антон: ну берешь открываешь фиддл и вставляешь див в х1 и смотришь работает ли, что тут знать то :) раз такие вопросы возникают, значит какие-то минимальные знания есть.
А еще не используй слова, типа "компетентный", допускаешь в них по несколько ошибок и позоришься, напиши уже просто, что я зануда или умник ))

[Антон]

Антон Ф.: прошу прощения за то, что два раза нажал на "м" и написал букву "и" вместо "е".

[Антон]

Антон Ф.: да и вопрос был с уклоном в SEO больше.

[Anton Filippov]

Антон: ну так и пиши, что семантика интересует

[Антон]

Антон Ф.: тег самый первый какой?

[Anton Filippov]

Антон: я не араб, читаю слева-направо, вижу css, с главной все тэги не показываются :)

[Антон]

Антон Ф.: :))

[Антон]

Антон Ф.: ясно. У меня первый - поисковая оптимизация.

[Егор Рублёв]

Проще задать span класс и прописать display: block; и проделать аналогичное, что делайте с div

[Serj-One]

Антон Ф.: Выпей валерьянки, и не пиши комментариев, пока не подействует)) Это неподходящее место, чтоб выпускать пар.

[Anton Filippov]

Serj-One: я наоборот слишком расслаблен, подскажи что-то противоположное, Серёга

Answer 1

[zooks]

Внутри заголовков H1-H6 можно использовать теги span и br.
Ни в коем случае нельзя использовать в нем блочные элементы вроде div. Пихать small - безграмотно с точки зрения семантики.

Comments

[Антон]

Хорошо. Спасибо.

Answer 2

[# a r t u r #]

В некоторых "массивных" фреимворках я встречал такие конструкции, но редактор кода сразу выделяем как ошибку и не видит, что тег H1-5 закрыт, но на практике все отлично работает:

<h2 class="ui icon header">
  <i class="settings icon"></i>
  <div class="content">
    Настройки аккаунта
    <div class="sub header">Описание раздела</div>
  </div>
</h2>

Я думаю, что если ваши теги H1-5 содержат поисковые ключи и используются больше для продвижения, то лучше не вкладывать в них DIV-ы, но если это какая-нибудь закрытая часть сайта, то почему бы и нет.

.header {
background-color: #000;
color: #FFF;
}
.description {
font-size: 24px;
padding-top: 5px;
}

<h1 class="header title">Большой заголовок</h1>
<div class="header description">Маленький заголовок</div>

Что-то вроде того, но нужно поиграть и довести до подходящего вида

Comments

[Антон]

Это именно заголовок страницы, который я просто хочу красиво оформить. Но я также никак не хочу жертвовать SEO.

[# a r t u r #]

Антон: тогда лучше спросить у SEO-шников, я не знаю (

[Антон]

Тогда встречный вопрос вам, как к разбирающемуся человеку: "Как мне реализовать подобное?"

[Антон]

Ну как вариант да, в принципе, подходит. Спасибо.

[zooks]

Антон: h1 h2, h1 -> span в зависимости от контекста

[Антон]

zooks: блин, точно. Совсем я затупил...

[# a r t u r #]

Антон: пишите m.vk.com/id299002258 , если нужна еще помощь

[Антон]

Артур Селиванов: хорошо, спасибо. Пока что я воспользовался вашим вариантом, заменив div на h2, как предложил zooks.

[# a r t u r #]

Антон: я бы лучше использовал DIV, а H2 оставил для следующего заголовка (если он есть), с точки зрения SEO так будет правильнее.