BY Mogilev, 212027
+375445544244
ПОДЕЛИСЬ ЭТИМ
18 сентября 2020, 08:27    Администратор по умолчанию 0    0 0
13-11-2020 15:28:00 Comments ollserg & MaxWeb for you

Как заменить теги h1 - h6 на div и span

 Для заголовков в html есть специальные теги семейства <h> (<h1>, <h2>, <h3>, <h4>, <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 «блочный» и содержит свойство, заданное по умолчанию style="display:block". Если говорить о схожести, то для замены <h>, лучше использовать div, т. к. он тоже является блочным и не потребуется писать дополнительные свойства style="display:block", которые уже заданы по умолчанию у div, в отличие от span.

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

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

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

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

Блочные элементы

Как заменить тег h1 - h6 на div и span

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

Теги < h >

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

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

Код страницы

<h1>Главный заголовок</h1>

<h2>Второстепенный</h2>

<h3>3 Заголовок</h3>

<h4>4 Заголовок</h4>

<h5>5 Заголовок</h5>

<h6>6 Заголовок</h6>


Теги < div >

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

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

Код страницы

<div style="font-weight:bold; font-size: 2em; margin: 0.67em 0 0.67em 0; ">Главный заголовок</div>

<div style="font-weight:bold; font-size: 1.5em; margin: 0.83em 0 0.83em 0; ">Второстепенный</div>

<div style="font-weight:bold; font-size: 1.17em; margin: 1em 0 1em 0; ">3 Заголовок</div>

<div style="font-weight:bold; font-size: 1em; margin: 1.33em 0 1.33em 0; ">4 Заголовок</div>

<div style="font-weight:bold; font-size: 0.83em; margin: 1.67em 0 1.67em 0; ">5 Заголовок</div>

<div style="font-weight:bold; font-size: 0.67em; margin: 2.33em 0 2.33em 0; ">6 Заголовок</div>


Теги span

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

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

 

Код страницы

<span style="display:block; font-weight:bold; font-size: 2em; margin: 0.67em 0 0.67em 0; ">Главный заголовок</span>

<span style="display:block; font-weight:bold; font-size: 1.5em; margin: 0.83em 0 0.83em 0; ">Второстепенный</span>

<span style="display:block; font-weight:bold; font-size: 1.17em; margin: 1em 0 1em 0; ">3 Заголовок</span>

<span style="display:block; font-weight:bold; font-size: 1em; margin: 1.33em 0 1.33em 0; ">4 Заголовок</span>

<span style="display:block; font-weight:bold; font-size: 0.83em; margin: 1.67em 0 1.67em 0; ">5 Заголовок</span>

<span style="display:block; font-weight:bold; font-size: 0.67em; margin: 2.33em 0 2.33em 0; ">6 Заголовок</span>


Баннеры
Индекс цитирования
Новости, новости Беларуси, последние новости, новости мира на Uvaga.By
Первый Каталог - Видео, аудио, фото техника

Контакты

212027 РБ Могилёв
Phone: +375 - 33-690-5554
Phone: +375 - 44-55-44-2-44
Email: maxweb.of.by(сабака)gmail.com
Открыть на карте