Разметка подзаголовков — как правильно?

Question

[Думай Головой]

Всем привет!

Как в таких ситуациях делать разметку?
1)

2)

Я делаю "в лоб"

<h1>Page title h1 <br>
    <span>Officiis ab dolorum, aperiam incidunt</span>
</h1>

А как правильно?

Answer 1

[Денис Атясов]

<h1>Page title h1 <small>Officiis ab dolorum, dolores enim iusto!</small></h1>

Так делают в bootstrap: getbootstrap.com/css/#type-headings
И br не нужен, лучше для small сделать display: block.

Answer 2

[Станислав Фатеев]

Можно так как делаете вы, а еще можно:

<header>
<h1>Page title h1</h1>
<p>Officiis ab dolorum, aperiam incidunt</p>
</header>

вот официальные рекомендации

Comments

[Думай Головой]

Станислав Фатеев
Но у параграфа другой отступ, создавать класс?

[Станислав Фатеев]

Думай Головой: Эээ

header p {
some-property:some-value;
}

?

Answer 3

[Антон Беляев]

Структурно заголовок и подзаголовок - это разные вещи, а значит и стоит применять их как раздельные объекты, что в свою очередь даст Вам возможность настроить внешний вид как угодно.

Отвечая на комментарий к ответу Станислав Фатеев:
Если класс не прописан глобально, или он Вам не подходит, то предавать ему стиль всё равно придётся индивидуально.

Вариант "В лоб" для случая "2":

CSS:

h1.MyHClass {
display:block;
position:relative;
font-family:"Times New Roman";
font-size:36px;
color:#a33a3a;
margin-bottom:10px; /* Тут выставляете нужный Вам отуп в px включая отрицательные значения */
}

p.MyUnderHClass {
display:block;
position:relative;
font-family:"Arial";
font-size:18px;
color:#a33a3a;
}

HTML:

<h1 class="MyHClass">Page title h1</h1>
<p class="MyUnderHClass">Officiis ab dolorum, aperiam incidunt</p>

Вариант "В лоб" для случая "2":

CSS:

h1.MyHClass {
display:block;
position:relative;
font-family:"Times New Roman";
font-size:36px;
color:#a33a3a;
margin-bottom:10px; /* Тут выставляете нужный Вам отуп в px включая отрицательные значения */
}

p.MyUnderHClass {
display:block;
position:relative;
font-family:"Arial";
font-size:14px;
color:#7a7a7a;
}

HTML:

<h1 class="MyHClass">Page title h1</h1>
<p class="MyUnderHClass">Officiis ab dolorum, dolores enim iusto!</p>

Так же параметр "margin-bottom:10px;" можно заменить параметром "line-height:1.0;" и поиграть со значением. Этот параметр несёт в себе показатель ширины каждой текстовой строки в элементе.

Comments

[Serj-One]

Вот такую запись - p.MyUnderHClass использовать как раз не нужно, т.е. добавлять селектор к имении класса.

[Андрей Федоров]

Где-то читал, что элементу h1 нельзя давать селектор, это против рекомендаций ПС.