Можем ли мы добавить <span> внутри тега H1?

96

Это правильный метод использования тега span внутри тега H1?

<h1>
    <span class="boardit">Portfolio</span>
</h1>
Развернуть фрагмент

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

<h1 class="boardit">
  <span>Portfolio</span>
</h1>
Развернуть фрагмент

Однако я просто хотел узнать более чистую форму html ..

html Codeobsession
источник
3
@fireeyed Я думаю, он хочет следовать тому, что правильно, я имею в виду семантику тега.
dpp
2
Не забудьте пометить ответ как принятый, если у вас есть информация, которую вы хотите
Пранай Рана
Использование интервалов в заголовках создает проблемы с переносом слов. Кто-нибудь еще это заметил?
Rafael
1
Вы когда-нибудь пробовали обернуть любой текст в промежутке? А как насчет обтекания текста любым блочным элементом? @Rafael
Дэниел Спрингер

Ответы:

180

Да, ты можешь.

HTML4 говорит следующее :

<!ENTITY % heading "H1|H2|H3|H4|H5|H6">
<!--
  There are six levels of headings from H1 (the most important)
  to H6 (the least important).
-->

<!ELEMENT (%heading;)  - - (%inline;)* -- heading -->

И %inline;это:

<!ENTITY % inline "#PCDATA | %fontstyle; | %phrase; | %special; | %formctrl;">

И %special;включает <span>.

В текущем HTML есть следующее :

Содержание содержания
Фразовое содержание

И фразовое содержание включает <span>.

mu слишком короткий
источник
1
Ссылка из «HTML5 говорит об этом» не работает :(
mehulkar
@mehulkar Спасибо, что сообщили мне, нужно исправить.
mu слишком короткое
30

Да, ты можешь. Его можно использовать для форматирования части блока h1:

<h1>Page <span class="highlight">Title</span></h1>

Если стиль применяется ко всему блоку h1, я делаю следующее:

<h1 class="highlight">Page Title</h1>
mnsr
источник
1
@dpp, почему следует избегать использования презентационных имен?
nu everest
3

Да, обычно нормально использовать spanвнутри h1. spanявляется встроенным элементом, поэтому обычно можно использовать его внутри чего-либо (что позволяет использовать элементы внутри него!)

И иногда нет более чистого способа сделать это, скажем, если вы хотите стилизовать только часть h1.

С другой стороны ... не делайте этого, если в этом нет необходимости, это немного некрасиво :)

Дэйв
источник
2

Да, это нормально, но почему бы и нет

   <h1 class="boardit">
      Portfolio
   </h1>

Если это все, что ты делаешь?

Саймон Саррис
источник
1
Это еще не все. Просьба стилизовать только часть заголовка.
Дэниел Спрингер,
1

Да, ты можешь. Диапазон отображается встроенным, поэтому он не должен влиять на стиль H1.

geetfun
источник
0

Да, мы можем использовать тег span с тегами заголовков, и в этом нет ничего плохого. Действительно, это широко используется для стилизации тегов заголовков, особенно для раскраски определенного слова или буквы.

Тухид Рахман
источник
0

Да, мы можем использовать тег span с тегами заголовков, и в этом нет ничего плохого. Действительно, это широко используется для стилизации тегов заголовков, особенно для раскраски определенного слова или буквы.

Тухид Рахман
источник
-2 
<h1 style="display:inline;">Bold text goes here</h1> 
<span style="display:inline;">normal text goes here</span>

Подумайте в вышеприведенных строках - сработало для меня - используйте display: inline prop

такришна
источник
При чем тут вопрос?
Квентин
3
@Quentin Я полагаю, он имел в виду предложение сделать заголовок встроенным элементом. Прекрасная идея, если это осуществимо.
Дэниел Спрингер
2
Этот ответ не должен быть отвергнут, поскольку он решает проблему, хотя это не то, о чем напрямую спрашивают. +1 за решение.
Ачала Диссанаяке