Заголовок в две строки. Как лучше реализовать?

Question

[▪ ▪]

Как вы думаете что более приемлемо для H1 в две строки?

Первый вариант это в самом заголовке использовать тег < br > и < span > для переноса. Но тогда может получиться каша. Второй вариант это вообще использовать для второй строки отдельный div. В этом случае заголовок получится не полным, что не есть хорошо для поисковиков.

Может быть есть еще какие нибудь решения?

Answer 1

[Максим Тимофеев]

<h1>Петя курит мамбу <small>много курит</small></h1>

+ css к этому и все счастливы, включая поисковики

Answer 2

[Ivanq]

https://jsfiddle.net/Ivanq/y7kn197L/1/

Comments

[▪ ▪]

Насколько я знаю, использование h1 несколько раз в документе не допускается. Вместо этого можно использовать div но тогда весь смысл теряется, так как это будет уже разрезанный заголовок, что не актуально.

[Ivanq]

kingdomofcrooked: Поменял ссылку

[▪ ▪]

Ivanq: и поисковики при этом не будут замечать ничего лишнего и прочитают заголовок полностью?

[Ivanq]

kingdomofcrooked: Да, нормальные прочитают полностью.

Answer 3

[Zvezdocheteg]

Как вариант можно сделать обертку и ограничить ей ширину или применить ограничения к самому h1. Слышал тэг < br > не рекомендуют использовать , но это всего лишь слухи)

вот пример: codepen.io/Profiteer/pen/qbbgBp

Answer 4

[R3AD]

<div class="name"><h1>Две строки</h1>один заголовок</div>
<code lang="css">
.name{
  text-align:right;
  line-height: 7px;
  width: 50%;
}
</code>