Тег span или h1: Можно ли в тег заголовка H1 вставлять теги? — Хабр Q&A

03.01.1994 alexxlab

Как заменить тег h на div и span

13-11-2020 18:28:00 Comments ollserg & MaxWeb for you

Для заголовков в html есть специальные теги семейства <h> (<h2>, <h3>, <h4>, <h5>, <h5> и др.), рассмотренные в прошлой статье, но при их чрезмерно высокой концентрации поисковые системы могут занижать позиции сайта. Поэтому когда между тегами <h> менее, чем 3-4 абзаца текста, вместо них лучше использовать безопасный вариант заголовка, а именно: блочный тег <div> или строчный <span>. Подробная информация о безопасной концентрации тегов <h> была ранее рассмотрена в статье, посвященной созданию заголовков.

СОДЕРЖАНИЕ СТАТЬИ
— Отличия span и div
— Практика: как заменить тег h на div и span
Теги <h>, отличаются от <span> или <div> отступами, размером и начертанием шрифта, которые уже заданы по умолчанию. Тег <span> отличается от <h> теми же свойствам, что и <div>, плюс видом отображения(span — строчный; h, div — блочные).

То есть <div> ближе к <h>, чем <span>.

Но если для <span> или <div> прописать в свойствах такие же: размер и начертание шрифта, отступы и вид отображения(для span), то никаких внешних отличий от <h> не будет.

Отличия span и div
Отличия тегов span и div между собой минимальные: span «строчный» и не имеет свойств, заданных по умолчанию, а div «блочный» и содержит свойство, заданное по умолчанию. Если говорить о схожести, то для замены <h>, лучше использовать div, т. к. он тоже является блочным и не потребуется писать дополнительные свойства, которые уже заданы по умолчанию у div, в отличие от span.

Блочные элементы отличаются от строчных следующими параметрами:

— Наличие перевода строки до и после;

— Занимают всю ширину родительского слоя.

Внешний вид блочных и строчных элементов

Как заменить тег h2 — h6 на div и span

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

Теги < h >

Результат в браузере

Код страницы

<h2>Главный заголовок</h2> <h3>Второстепенный</h3> <h4>3 Заголовок</h4> <h5>4 Заголовок</h5> <h5>5 Заголовок</h5> <h6>6 Заголовок</h6>

Теги < div >

Результат в браузере

Код страницы

<div> Главный заголовок</div><div> Второстепенный</div><div> 3 Заголовок</div><div> 4 Заголовок</div><div> 5 Заголовок</div><div> 6 Заголовок</div>

Теги span

Результат в браузере

Код страницы

<span> Главный заголовок</span><span> Второстепенный</span><span> 3 Заголовок</span><span> 4 Заголовок</span><span> 5 Заголовок</span><span> 6 Заголовок</span>

Виртуальные хосты в Apache
Перенос OpenCart домен — хостинг

— HTML — Дока

Кратко
Пример
Как понять
Как пишется
Подсказки
Ещё пример
На практике
1. Дока Дог советует
2. Егор Левченко советует
3. Алёна Батицкая советует

Кратко

Секция статьи «Кратко»

С помощью тега <span> можно выбрать часть текста или другой информации в блоке и стилизовать её.

Пример

Секция статьи «Пример»

<p>  Добавьте <span>базилик</span>,  <span>арахис</span> и  <span>чеснок</span> в блендер и перемешайте.</p>
          <p>
  Добавьте <span>базилик</span>,
  <span>арахис</span> и
  <span>чеснок</span> в блендер и перемешайте.
</p>

Как понять

Секция статьи «Как понять»

Например, хочется, чтобы одно слово в абзаце было написано красным цветом. Помести это слово в коде в контейнер <span>…</span> и примени к нему CSS-стиль.

Этот тег очень похож на <div>, потому что тоже помогает сгруппировать элементы, чтобы применить к ним единый стиль. Разница лишь в том, что <div> собирает контент в отдельный блок, а <span> выделяет строчку или даже одну букву в этом блоке. Поэтому <div> называют блочными элементами, а <span> — строчным.

Как пишется

Секция статьи «Как пишется»

<span>...</span>
          <span>...</span>

Подсказки

Секция статьи «Подсказки»

💡 Иногда, чтобы отформатировать часть текста, можно использовать семантические элементы — это те, которые не просто являются контейнерами, а имеют своё значение, например, тег <header>, с помощью которого вы создаёте «шапку» своей страницы с меню и логотипом. Поэтому, если вместо <span> можно использовать семантический тег, например, <address> для выделения автора материала курсивом или <mark> для выделения текста жёлтым маркером, то используйте их.

Ещё пример

Секция статьи «Ещё пример»

<p>  <span>Р</span>азумные люди приспосабливаются к  окружающему миру. Неразумные люди приспосабливают мир к себе. Вот почему  прогресс определяется действиями неразумных людей.</p><p>Бернард Шоу</p>
          <p>
  <span>Р</span>азумные люди приспосабливаются к
  окружающему миру.  Неразумные люди приспосабливают мир к себе. Вот почему
  прогресс определяется действиями неразумных людей.
</p>
<p>Бернард Шоу</p>

.quote__text-letter {  float: left; /* Обтекание символа текстом справа */  margin-right: 7px; /* Отступ справа */  color: #ed6742; /* Цвет символа */  font-family: "Roboto Slab", serif; /* Шрифт с засечками */  font-size: 52px; /* Размер шрифта */  line-height: 52px; /* Высота строки */}.quote__author {  margin-top: 10px;  padding: 10px 0;  border-top: 1px solid #ed6742; /* декоративная граница */  font-style: italic;  font-size: 14px;  font-weight: 300;}
          .quote__text-letter {
  float: left; /* Обтекание символа текстом справа */
  margin-right: 7px; /* Отступ справа */
  color: #ed6742; /* Цвет символа */
  font-family: "Roboto Slab", serif; /* Шрифт с засечками */
  font-size: 52px; /* Размер шрифта */
  line-height: 52px; /* Высота строки */
}
.quote__author {
  margin-top: 10px;
  padding: 10px 0;
  border-top: 1px solid #ed6742; /* декоративная граница */
  font-style: italic;
  font-size: 14px;
  font-weight: 300;
}

Открыть демо в новой вкладке

На практике

Секция статьи «На практике»

Дока Дог советует

Секция статьи «Дока Дог советует»

🛠 <span> — крутой. Считается, что <span> — это когда тебе уже нечего добавить к тексту и ты уже использовал древние теги <strong> или <em>, то у тебя <span> — это последний бро, у которого по умолчанию нет предустановленных стилей, но ты можешь его немножко пересобрать и добавить стилей, чтобы он выглядел так, как ты хочешь.

Фишка в том, что в <span> можно встраивать вообще всё, что угодно. Внутри <span> можно собирать целые блоки, списки и, по факту, он может работать не только с текстом: я такое встречал очень часто. <span> можно встраивать друг в друга сколько угодно раз, чего не сделаешь, например, с тегом <p>. Допустим, ты хочешь, чтобы текст на сайте появлялся по одной букве, то ты добавляешь каждую букву в отдельный <span>, делаешь задержку и отдельно уже управляешь через JavaScript или CSS. <span> — тег, без которого современные сайты практически не могут существовать.

Егор Левченко советует

Секция статьи «Егор Левченко советует»

🛠 <span> — строковый элемент, поэтому по умолчанию у него нет высоты. Если нужна высота, то элементу стоит задать display: block или display: inline-block, или подумать: «А не нужен ли там <div>?»

Алёна Батицкая советует

Секция статьи «Алёна Батицкая советует»

🛠 Тег <span> удобен, если нужно оформить другими стилями отдельное слово или словосочетание в тексте. Этот приём очень любят дизайнеры, чтобы акцентировать внимание на какой-то информации.

Например, выделим цветом важное для нас сообщение внутри заголовка на первом экране:

<header>  <h2>    We are    <span>      the best    </span>    <span> company </span>  </h2></header>
           <header>
  <h2>
    We are
    <span>
      the best
    </span>
    <span> company </span>
  </h2>
</header>

. header {  display: flex;  justify-content: center;  align-items: center;  min-height: 480px;  background: #18191c url("../images/background.svg") no-repeat center / cover;  z-index: 0;  color: #ffffff;}.header__title {  max-width: 500px;  color: #fff;  font-family: "Roboto", sans-serif;  font-size: 25px;  text-align: center;  text-transform: uppercase;  font-weight: normal;  line-height: 30px;  letter-spacing: 1px;}/* задаём стили для текста, который нужно выделить */.header__title-accent {  display: block; /* перенос на новую строку */  font-size: 55px;  line-height: 58px;  font-weight: bold;}/* цветовой акцент */.header__title-accent_color {  color: #000000;  background-color: #FF8630;}
           .header {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 480px;
  background: #18191c url("../images/background.svg") no-repeat center / cover;
  z-index: 0;
  color: #ffffff;
}
.header__title {
  max-width: 500px;
  color: #fff;
  font-family: "Roboto", sans-serif;
  font-size: 25px;
  text-align: center;
  text-transform: uppercase;
  font-weight: normal;
  line-height: 30px;
  letter-spacing: 1px;
}
/* задаём стили для текста, который нужно выделить */
.  header__title-accent {
  display: block; /* перенос на новую строку */
  font-size: 55px;
  line-height: 58px;
  font-weight: bold;
}
/* цветовой акцент */
.header__title-accent_color {
  color: #000000;
  background-color: #FF8630;
}

Открыть демо в новой вкладке

Если вы нашли ошибку, отправьте нам пул-реквест!

Во время отправки формы что-то пошло не так. Попробуйте ещё раз?

←

<div>

alt + ←

→

<header>

alt + →

html. Можем ли мы добавить тег внутрь?

спросил 11 лет, 1 месяц назад

Изменено 11 месяцев назад

Просмотрено 120 тысяч раз

Правильно ли использовать тег внутри тега

  
    
Портфолио

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

 
  
Портфолио

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

Да, можете.

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

И %inline; это:

А %специальный; включает .

Текущий HTML должен сказать следующее:

Содержимое содержимого
Фразы содержимого

И Содержимое фраз включает .

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

  Page 
Title

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

  Page Title

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

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

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

Да, хорошо, но почему бы и нет

 
      портфолио

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

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

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

  Здесь выделен жирный шрифт 
здесь идет обычный текст

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

html — h2 и диапазон

Задавать вопрос

спросил 11 лет, 10 месяцев назад

Изменено 8 лет, 2 месяца назад

Просмотрено 23 тысячи раз

При использовании тегов h2-h6 в моем html я продолжаю получать сообщения об ошибках в валидаторе w3c. Я новичок в этом, и я много раз пытался решить проблему, но я не могу.

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

Строка 34, столбец 4: тип документа не не допускать здесь элемент «h2»; отсутствующий один из «объект», «апплет», «карта», «iframe», «кнопка», «ins», «del» стартовый тег

Мой веб-сайт <----это код, для которого я получаю сообщение об ошибке.

Указанный элемент не разрешен появляться в контексте, в котором вы разместили его; другой упомянутый элементы являются единственными, которые оба разрешены там и могут содержать упомянутый элемент. Это может означать что вам нужен содержащий элемент или возможно, что вы забыли закрыть предыдущий элемент.
Одной из возможных причин появления этого сообщения является попытка поместить блочный элемент (например, »
«или»») внутри встроенного элемента (например, «», «» или «»).

В любом случае, как лучше всего использовать теги заголовков? Что я делаю не так?

html
теги

Span является встроенным элементом
Элемент h2 является блочным элементом
Встроенный элемент не может содержать блочный элемент
Элементы не могут частично содержаться другими элементами

Следовательно, с точки зрения DTD:

Правильное решение проблемы на самом деле зависит от того, для чего вы пытаетесь использовать диапазон.

(Обратите внимание, что приведенное выше обсуждение блочных и встроенных элементов несколько упрощено. Полную информацию см. в разделе «Как читать HTML DTD», в частности в разделе, посвященном модели содержимого)

Вы закрываете теги в неправильном порядке:

  
 Мой сайт

должно быть

  
Мой сайт

  Здесь идет полужирный текст
 Здесь идет обычный текст

используйте приведенное выше, если вы смотрите на встроенные теги h2

вы не можете разделить элемент с другим элементом

 < h2>< span> Мой сайт < /span>

должен быть таким

 < h2>< span> Мой сайт < /h2>

ты пробовал это написать?

  
 Мой сайт

вы должны закрывать теги в том же порядке, в котором вы их открываете.

Тег span или h1: Можно ли в тег заголовка H1 вставлять теги? — Хабр Q&A

Как заменить тег h на div и span

Как заменить тег h2 — h6 на div и span

Теги < h >

— HTML — Дока

Кратко

Пример

Как понять

Как пишется

Подсказки

Ещё пример

На практике

Дока Дог советует

Егор Левченко советует

Алёна Батицкая советует

html. Можем ли мы добавить тег внутрь?

(adsbygoogle=window.adsbygoogle||[]).push({});

Page

Page Title

портфолио

Здесь выделен жирный шрифт

html — h2 и диапазон

…

…

Здесь идет полужирный текст

Здесь идет обычный текст

Добавить комментарий Отменить ответ