1 added
1 removed
Original
2026-01-01
Modified
2026-02-21
1
<p><a>#статьи</a></p>
1
<p><a>#статьи</a></p>
2
<ul><li>15 июл 2025</li>
2
<ul><li>15 июл 2025</li>
3
<li>0</li>
3
<li>0</li>
4
</ul><p>Рассказываем, как с помощью заголовков и параграфов строить логику страницы, улучшать SEO и доступность, показываем примеры кода и стилизации.</p>
4
</ul><p>Рассказываем, как с помощью заголовков и параграфов строить логику страницы, улучшать SEO и доступность, показываем примеры кода и стилизации.</p>
5
<p>Иллюстрация: Оля Ежак для Skillbox Media</p>
5
<p>Иллюстрация: Оля Ежак для Skillbox Media</p>
6
<p>Онлайн-журнал для тех, кто влюблён в код и информационные технологии. Пишем для айтишников и об айтишниках.</p>
6
<p>Онлайн-журнал для тех, кто влюблён в код и информационные технологии. Пишем для айтишников и об айтишниках.</p>
7
<p>Большинство сайтов похожи на книги: у них есть название, главы, подглавы и обычные абзацы. В HTML-документе за эту структуру отвечает шесть уровней заголовков <h1> - <h6> и тег <p>, в котором расположен основной текст. Правильная иерархия помогает поисковикам понять, о чём страница, а пользователям - быстро сориентироваться в контенте.</p>
7
<p>Большинство сайтов похожи на книги: у них есть название, главы, подглавы и обычные абзацы. В HTML-документе за эту структуру отвечает шесть уровней заголовков <h1> - <h6> и тег <p>, в котором расположен основной текст. Правильная иерархия помогает поисковикам понять, о чём страница, а пользователям - быстро сориентироваться в контенте.</p>
8
<p><strong>Содержание:</strong></p>
8
<p><strong>Содержание:</strong></p>
9
<ul><li><a>Заголовки <h1> - <h6></a></li>
9
<ul><li><a>Заголовки <h1> - <h6></a></li>
10
<li><a>Что такое правильная иерархия заголовков</a></li>
10
<li><a>Что такое правильная иерархия заголовков</a></li>
11
<li><a>Как тег <h1> влияет на SEO</a></li>
11
<li><a>Как тег <h1> влияет на SEO</a></li>
12
<li><a>Тег <p> и его роль в структуре текста</a></li>
12
<li><a>Тег <p> и его роль в структуре текста</a></li>
13
<li><a><p> или <div>: в чём разница и когда что использовать</a></li>
13
<li><a><p> или <div>: в чём разница и когда что использовать</a></li>
14
<li><a>Базовая стилизация заголовков и абзацев</a></li>
14
<li><a>Базовая стилизация заголовков и абзацев</a></li>
15
<li><a>Как заголовки и абзацы влияют на SEO и доступность</a></li>
15
<li><a>Как заголовки и абзацы влияют на SEO и доступность</a></li>
16
<li><a>Полезные советы и лайфхаки</a></li>
16
<li><a>Полезные советы и лайфхаки</a></li>
17
</ul><p>HTML-заголовки - это набор из шести тегов (<h1>, <h2>, <h3>, <h4>, <h5>, <h6>), которые нужны, чтобы обозначить названия разделов на веб-странице. Это парные теги, им требуется закрывающий тег - такой же, как открывающий, но со слешем, например: </h1>.</p>
17
</ul><p>HTML-заголовки - это набор из шести тегов (<h1>, <h2>, <h3>, <h4>, <h5>, <h6>), которые нужны, чтобы обозначить названия разделов на веб-странице. Это парные теги, им требуется закрывающий тег - такой же, как открывающий, но со слешем, например: </h1>.</p>
18
<p>Уровень заголовка указывает на его важность и место в иерархии документа:</p>
18
<p>Уровень заголовка указывает на его важность и место в иерархии документа:</p>
19
<ul><li><h1> - заголовок первого, самого высокого уровня, обычно соответствующий названию всей страницы или её основной мысли;</li>
19
<ul><li><h1> - заголовок первого, самого высокого уровня, обычно соответствующий названию всей страницы или её основной мысли;</li>
20
<li><h2> - заголовок второго уровня, обозначающий крупные разделы страницы;</li>
20
<li><h2> - заголовок второго уровня, обозначающий крупные разделы страницы;</li>
21
<li><h3> - заголовок третьего уровня для подразделов внутри <h2>;</li>
21
<li><h3> - заголовок третьего уровня для подразделов внутри <h2>;</li>
22
<li><h4>, <h5>, <h6> - следующие уровни вложенности. Чем выше цифра, тем ниже "статус" заголовка.</li>
22
<li><h4>, <h5>, <h6> - следующие уровни вложенности. Чем выше цифра, тем ниже "статус" заголовка.</li>
23
</ul><p>Каждый уровень определяет не внешний вид, а смысл и структуру. Хотя браузер по умолчанию меняет размер и жирность текста в заголовках, не нужно использовать эти теги для того, чтобы просто изменить оформление текста. В первую очередь речь идет о иерархии заголовков и их значимости. А оформление лучше менять через стили.</p>
23
</ul><p>Каждый уровень определяет не внешний вид, а смысл и структуру. Хотя браузер по умолчанию меняет размер и жирность текста в заголовках, не нужно использовать эти теги для того, чтобы просто изменить оформление текста. В первую очередь речь идет о иерархии заголовков и их значимости. А оформление лучше менять через стили.</p>
24
<p>Браузеры по умолчанию применяют к этим тегам различное форматирование (размер шрифта, жирность), визуально отражая их иерархический статус. <h1> отображается самым крупным и жирным, а <h6> - наименее заметным.</p>
24
<p>Браузеры по умолчанию применяют к этим тегам различное форматирование (размер шрифта, жирность), визуально отражая их иерархический статус. <h1> отображается самым крупным и жирным, а <h6> - наименее заметным.</p>
25
<div> <h1>Это заголовок h1</h1> <h2>Это заголовок h2</h2> <h3>Это заголовок h3</h3> <h4>Это заголовок h4</h4> <h5>Это заголовок h5</h5> <h6>Это заголовок h6</h6> </div><p>Выглядит это так:</p>
25
<div> <h1>Это заголовок h1</h1> <h2>Это заголовок h2</h2> <h3>Это заголовок h3</h3> <h4>Это заголовок h4</h4> <h5>Это заголовок h5</h5> <h6>Это заголовок h6</h6> </div><p>Выглядит это так:</p>
26
<em>Скриншот: Google Chrome / Skillbox Media</em><p>При этом вы не обязаны использовать все шесть уровней. Обычно достаточно трёх: <h1>, <h2> и <h3>, дальше читатель начинает путаться в иерархии.</p>
26
<em>Скриншот: Google Chrome / Skillbox Media</em><p>При этом вы не обязаны использовать все шесть уровней. Обычно достаточно трёх: <h1>, <h2> и <h3>, дальше читатель начинает путаться в иерархии.</p>
27
<p>Когда вы используете заголовки, важно не просто выбрать нужный размер шрифта, а выстроить логичную структуру страницы. Это помогает и пользователям, и поисковым системам быстрее разобраться в содержании.</p>
27
<p>Когда вы используете заголовки, важно не просто выбрать нужный размер шрифта, а выстроить логичную структуру страницы. Это помогает и пользователям, и поисковым системам быстрее разобраться в содержании.</p>
28
<p>Главное правило: заголовки должны идти по порядку - от старшего к младшему.</p>
28
<p>Главное правило: заголовки должны идти по порядку - от старшего к младшему.</p>
29
<p>Если у вас есть <h1>, то следующий уровень должен быть <h2>, потом <h3> и так далее. Пропускать уровни не стоит, это запутывает и читателей, и скринридеры - программы, которые озвучивают тексты людям с нарушением зрения.</p>
29
<p>Если у вас есть <h1>, то следующий уровень должен быть <h2>, потом <h3> и так далее. Пропускать уровни не стоит, это запутывает и читателей, и скринридеры - программы, которые озвучивают тексты людям с нарушением зрения.</p>
30
<p>Пример правильной иерархии:</p>
30
<p>Пример правильной иерархии:</p>
31
<!-- Верная иерархия: заголовки идут последовательно --> <h1>Главный заголовок страницы</h1> <h2>Раздел 1</h2> <h3>Подраздел 1.1</h3> <h2>Раздел 2</h2> <h3>Подраздел 2.1</h3> <h4>Подраздел 2.1.1</h4><p>А вот примеры с ошибками:</p>
31
<!-- Верная иерархия: заголовки идут последовательно --> <h1>Главный заголовок страницы</h1> <h2>Раздел 1</h2> <h3>Подраздел 1.1</h3> <h2>Раздел 2</h2> <h3>Подраздел 2.1</h3> <h4>Подраздел 2.1.1</h4><p>А вот примеры с ошибками:</p>
32
<!-- Пропущен уровень h2 --> <h1>Главный заголовок</h1> <h3>Подраздел</h3> <!-- Пропущен уровень h3 --> <h1>Главный заголовок</h1> <h2>Раздел 2</h2> <h4>Подраздел</h4><p>В большинстве случаев на странице нужен только один <h1> - он обозначает основную тему. Но если вы используете теги <section> или <article>, внутри них можно ставить свои <h1>, HTML5 это позволяет. Главное - не переборщить и не сбить логику.</p>
32
<!-- Пропущен уровень h2 --> <h1>Главный заголовок</h1> <h3>Подраздел</h3> <!-- Пропущен уровень h3 --> <h1>Главный заголовок</h1> <h2>Раздел 2</h2> <h4>Подраздел</h4><p>В большинстве случаев на странице нужен только один <h1> - он обозначает основную тему. Но если вы используете теги <section> или <article>, внутри них можно ставить свои <h1>, HTML5 это позволяет. Главное - не переборщить и не сбить логику.</p>
33
<p>Почему это важно:</p>
33
<p>Почему это важно:</p>
34
<ul><li><strong>Поисковые роботы</strong>ориентируются на структуру заголовков, чтобы понять, о чём ваша страница.</li>
34
<ul><li><strong>Поисковые роботы</strong>ориентируются на структуру заголовков, чтобы понять, о чём ваша страница.</li>
35
<li><strong>Скринридеры</strong>позволяют переходить от заголовка к заголовку - и, если порядок нарушен, пользователю будет сложно сориентироваться.</li>
35
<li><strong>Скринридеры</strong>позволяют переходить от заголовка к заголовку - и, если порядок нарушен, пользователю будет сложно сориентироваться.</li>
36
</ul><p>Тег <h1> - это главный заголовок страницы, и поисковые системы обращают на него особое внимание. По сути, он помогает алгоритмам понять, о чём ваша страница.</p>
36
</ul><p>Тег <h1> - это главный заголовок страницы, и поисковые системы обращают на него особое внимание. По сути, он помогает алгоритмам понять, о чём ваша страница.</p>
37
<p>Вот что важно знать:</p>
37
<p>Вот что важно знать:</p>
38
<ul><li><strong>Текст в</strong> <strong><h1> помогает роботам определить тему страницы.</strong>Если в заголовке чётко указано, о чём идёт речь, - это плюс для SEO.</li>
38
<ul><li><strong>Текст в</strong> <strong><h1> помогает роботам определить тему страницы.</strong>Если в заголовке чётко указано, о чём идёт речь, - это плюс для SEO.</li>
39
<li><strong>Оптимальная длина заголовка - 50-70 символов.</strong>Такой заголовок достаточно подробный, но при этом легко читается.</li>
39
<li><strong>Оптимальная длина заголовка - 50-70 символов.</strong>Такой заголовок достаточно подробный, но при этом легко читается.</li>
40
<li><strong>Не стоит набивать</strong><strong><h1> ключевыми словами.</strong>Это делает заголовок неестественным и плохо влияет на восприятие текста. Лучше использовать 1-2 ключевые фразы органично.</li>
40
<li><strong>Не стоит набивать</strong><strong><h1> ключевыми словами.</strong>Это делает заголовок неестественным и плохо влияет на восприятие текста. Лучше использовать 1-2 ключевые фразы органично.</li>
41
<li><strong>Если</strong><strong><h1> на странице нет, поисковик всё равно проиндексирует контент.</strong>Но без главного заголовка алгоритмам сложнее понять, о чём страница и как она связана с другими материалами на сайте.</li>
41
<li><strong>Если</strong><strong><h1> на странице нет, поисковик всё равно проиндексирует контент.</strong>Но без главного заголовка алгоритмам сложнее понять, о чём страница и как она связана с другими материалами на сайте.</li>
42
</ul><p>Тег <p> (от англ. paragraph) используется в HTML для создания абзацев. Абзац - это логически завершённый фрагмент текста, который обычно выражает одну мысль. На большинстве сайтов текст составляет основную часть контента, поэтому <p> - один из самых часто используемых тегов.</p>
42
</ul><p>Тег <p> (от англ. paragraph) используется в HTML для создания абзацев. Абзац - это логически завершённый фрагмент текста, который обычно выражает одну мысль. На большинстве сайтов текст составляет основную часть контента, поэтому <p> - один из самых часто используемых тегов.</p>
43
<p>Элементы в HTML делятся на строчные и блочные. Строчные (inline) элементы - это теги, которые размещаются внутри строки и не нарушают поток текста. Если вы вставите <a> или <span>, текст вокруг них останется на той же строке. А блочные (block) элементы - это теги, которые всегда начинают новую строку и занимают всю ширину контейнера.</p>
43
<p>Элементы в HTML делятся на строчные и блочные. Строчные (inline) элементы - это теги, которые размещаются внутри строки и не нарушают поток текста. Если вы вставите <a> или <span>, текст вокруг них останется на той же строке. А блочные (block) элементы - это теги, которые всегда начинают новую строку и занимают всю ширину контейнера.</p>
44
<p>Внутри тега <p> можно использовать обычный текст и строчные элементы:</p>
44
<p>Внутри тега <p> можно использовать обычный текст и строчные элементы:</p>
45
<ul><li><a> - ссылка;</li>
45
<ul><li><a> - ссылка;</li>
46
<li><span> - выделение части текста для стилизации;</li>
46
<li><span> - выделение части текста для стилизации;</li>
47
<li><em> - логическое выделение (обычно курсив);</li>
47
<li><em> - логическое выделение (обычно курсив);</li>
48
<li><strong> - важный текст (обычно жирный);</li>
48
<li><strong> - важный текст (обычно жирный);</li>
49
<li><img> - изображение внутри текста;</li>
49
<li><img> - изображение внутри текста;</li>
50
<li><br> - перенос строки внутри абзаца.</li>
50
<li><br> - перенос строки внутри абзаца.</li>
51
</ul><p>Если внутри <p> случайно окажется блочный элемент, браузер сам закроет тег до него, как если бы вы написали </p>. В результате структура документа может оказаться невалидной, а отображение - неожиданным. Поэтому внутрь <p> нельзя помещать:</p>
51
</ul><p>Если внутри <p> случайно окажется блочный элемент, браузер сам закроет тег до него, как если бы вы написали </p>. В результате структура документа может оказаться невалидной, а отображение - неожиданным. Поэтому внутрь <p> нельзя помещать:</p>
52
<ul><li>другие теги <p>;</li>
52
<ul><li>другие теги <p>;</li>
53
<li>заголовки <h1> - <h6>;</li>
53
<li>заголовки <h1> - <h6>;</li>
54
<li>списки <ul>, <ol>;</li>
54
<li>списки <ul>, <ol>;</li>
55
<li>блочные элементы <div><em>,</em><form>, <table> и другие.</li>
55
<li>блочные элементы <div><em>,</em><form>, <table> и другие.</li>
56
-
</ul><p>Иногда вместо нескольких абзацев разработчики используют один <p> с множеством переносов через <br> - это тег, который переводит текст на новую строку, но не создаёт новый абзац. Не стоит так делать. Так вы сломаете смысловую структуру текста, скринридеры не смогут правильно его прочитать, а со стилизацией начнутся проблемы.</p>
56
+
</ul><p>Иногда вместо нескольких абз��цев разработчики используют один <p> с множеством переносов через <br> - это тег, который переводит текст на новую строку, но не создаёт новый абзац. Не стоит так делать. Так вы сломаете смысловую структуру текста, скринридеры не смогут правильно его прочитать, а со стилизацией начнутся проблемы.</p>
57
<p>Пример неправильной разметки:</p>
57
<p>Пример неправильной разметки:</p>
58
<section> <h2>Описание услуги</h2> <p> Мы предлагаем широкий спектр услуг в сфере веб-разработки.<br> Индивидуальный подход к каждому клиенту.<br> Гибкие тарифы и прозрачные условия сотрудничества. </p> </section><p>Что пойдёт не так:</p>
58
<section> <h2>Описание услуги</h2> <p> Мы предлагаем широкий спектр услуг в сфере веб-разработки.<br> Индивидуальный подход к каждому клиенту.<br> Гибкие тарифы и прозрачные условия сотрудничества. </p> </section><p>Что пойдёт не так:</p>
59
<ul><li>Скринридеры прочитают всё как один абзац, без пауз.</li>
59
<ul><li>Скринридеры прочитают всё как один абзац, без пауз.</li>
60
<li>На мобильных устройствах текст может отображаться непредсказуемо.</li>
60
<li>На мобильных устройствах текст может отображаться непредсказуемо.</li>
61
</ul><p>А вот правильный вариант:</p>
61
</ul><p>А вот правильный вариант:</p>
62
<section> <h2>Описание услуги</h2> <p>Мы предлагаем широкий спектр услуг в сфере веб-разработки.</p> <p>Индивидуальный подход к каждому клиенту.</p> <p>Гибкие тарифы и прозрачные условия сотрудничества.</p> </section><p>Здесь:</p>
62
<section> <h2>Описание услуги</h2> <p>Мы предлагаем широкий спектр услуг в сфере веб-разработки.</p> <p>Индивидуальный подход к каждому клиенту.</p> <p>Гибкие тарифы и прозрачные условия сотрудничества.</p> </section><p>Здесь:</p>
63
<ul><li>Каждый абзац отделён логически.</li>
63
<ul><li>Каждый абзац отделён логически.</li>
64
<li>Скринридеры правильно озвучивают паузы между блоками.</li>
64
<li>Скринридеры правильно озвучивают паузы между блоками.</li>
65
<li>Легче настраивать стили и адаптировать текст под разные устройства.</li>
65
<li>Легче настраивать стили и адаптировать текст под разные устройства.</li>
66
</ul><p>У этих тегов разное назначение:</p>
66
</ul><p>У этих тегов разное назначение:</p>
67
<ul><li><p> - это абзац текста. Он показывает, что внутри логически завершённая мысль.</li>
67
<ul><li><p> - это абзац текста. Он показывает, что внутри логически завершённая мысль.</li>
68
<li><div> - это контейнер без смысла, просто обёртка для других элементов. Его используют, чтобы сгруппировать части интерфейса или применить стили.</li>
68
<li><div> - это контейнер без смысла, просто обёртка для других элементов. Его используют, чтобы сгруппировать части интерфейса или применить стили.</li>
69
</ul><p>Тег <p> используют для разметки любого блока текста, который можно назвать абзацем.</p>
69
</ul><p>Тег <p> используют для разметки любого блока текста, который можно назвать абзацем.</p>
70
<p>Тег <div> используется:</p>
70
<p>Тег <div> используется:</p>
71
<ul><li>чтобы объединить несколько элементов: заголовков, абзацев и кнопок;</li>
71
<ul><li>чтобы объединить несколько элементов: заголовков, абзацев и кнопок;</li>
72
<li>чтобы создавать структурные блоки (карточек, колонок, секций);</li>
72
<li>чтобы создавать структурные блоки (карточек, колонок, секций);</li>
73
<li>когда нет подходящего семантического тега вроде <section> или <article>.</li>
73
<li>когда нет подходящего семантического тега вроде <section> или <article>.</li>
74
</ul><div class="product-card"> <h2>Наименование товара</h2> <img src="product-image.jpg" alt="Изображение товара" width="300" height="300"> <p>Это первый абзац описания товара, содержащий основную информацию о его характеристиках и преимуществах.</p> <p>Второй абзац может включать дополнительные сведения, условия доставки и гарантии.</p> <a href="#" class="buy-button">Приобрести</a> </div><p>Здесь <div> объединяет всё, что относится к карточке товара, а <p> выделяет отдельные абзацы текста.</p>
74
</ul><div class="product-card"> <h2>Наименование товара</h2> <img src="product-image.jpg" alt="Изображение товара" width="300" height="300"> <p>Это первый абзац описания товара, содержащий основную информацию о его характеристиках и преимуществах.</p> <p>Второй абзац может включать дополнительные сведения, условия доставки и гарантии.</p> <a href="#" class="buy-button">Приобрести</a> </div><p>Здесь <div> объединяет всё, что относится к карточке товара, а <p> выделяет отдельные абзацы текста.</p>
75
<p>По умолчанию браузер сам применяет стили к заголовкам и абзацам: делает заголовки крупнее, текст жирнее, добавляет отступы. Но внешний вид всегда можно настроить под нужный дизайн с помощью CSS.</p>
75
<p>По умолчанию браузер сам применяет стили к заголовкам и абзацам: делает заголовки крупнее, текст жирнее, добавляет отступы. Но внешний вид всегда можно настроить под нужный дизайн с помощью CSS.</p>
76
<p>Давайте стилизуем один из примеров разметки, который был дан выше:</p>
76
<p>Давайте стилизуем один из примеров разметки, который был дан выше:</p>
77
<section> <h2>Описание услуги</h2> <p>Мы предлагаем широкий спектр услуг в сфере веб-разработки.</p> <p>Индивидуальный подход к каждому клиенту.</p> <p>Гибкие тарифы и прозрачные условия сотрудничества.</p> </section><p>Без стилизации данный блок имеет такой вид:</p>
77
<section> <h2>Описание услуги</h2> <p>Мы предлагаем широкий спектр услуг в сфере веб-разработки.</p> <p>Индивидуальный подход к каждому клиенту.</p> <p>Гибкие тарифы и прозрачные условия сотрудничества.</p> </section><p>Без стилизации данный блок имеет такой вид:</p>
78
<em>Скриншот: Google Chrome / Skillbox Media</em><p>Чтобы этот блок выглядел выразительнее и аккуратнее, добавим стили:</p>
78
<em>Скриншот: Google Chrome / Skillbox Media</em><p>Чтобы этот блок выглядел выразительнее и аккуратнее, добавим стили:</p>
79
/* Стили для основного заголовка страницы */ h1 { font-family: "Helvetica Neue", "Arial", sans-serif; /* Определение семейства шрифтов */ color: #2c3e50; /* Установка цвета текста */ font-size: 2.8em; /* Определение размера шрифта (em - относительно базового размера шрифта) */ text-align: left; /* Выравнивание текста по левому краю */ margin-bottom: 25px; /* Установка нижнего отступа */ font-weight: 700; /* Установка жирного начертания */ } /* Стили для подзаголовков второго уровня */ h2 { font-family: "Helvetica Neue", "Arial", sans-serif; color: #34495e; font-size: 2em; border-bottom: 2px solid #bdc3c7; /* Добавление нижней границы */ padding-bottom: 8px; /* Внутренний отступ снизу до границы */ margin-top: 35px; /* Верхний отступ */ margin-bottom: 15px; /* Нижний отступ */ } /* Стили для абзацев текста */ p { font-family: "Georgia", serif; /* Использование шрифта с засечками для основного текста */ color: #333333; font-size: 1.1em; line-height: 1.7; /* Установка межстрочного интервала для лучшей читаемости */ margin: 0 0 18px; /* Отмена верхнего браузерного отступа и добавление нижнего отступа для разделения абзацев */ text-align: left; /* Выравнивание текста по левому краю */ }<p>Со стилями блок будет выглядеть так:</p>
79
/* Стили для основного заголовка страницы */ h1 { font-family: "Helvetica Neue", "Arial", sans-serif; /* Определение семейства шрифтов */ color: #2c3e50; /* Установка цвета текста */ font-size: 2.8em; /* Определение размера шрифта (em - относительно базового размера шрифта) */ text-align: left; /* Выравнивание текста по левому краю */ margin-bottom: 25px; /* Установка нижнего отступа */ font-weight: 700; /* Установка жирного начертания */ } /* Стили для подзаголовков второго уровня */ h2 { font-family: "Helvetica Neue", "Arial", sans-serif; color: #34495e; font-size: 2em; border-bottom: 2px solid #bdc3c7; /* Добавление нижней границы */ padding-bottom: 8px; /* Внутренний отступ снизу до границы */ margin-top: 35px; /* Верхний отступ */ margin-bottom: 15px; /* Нижний отступ */ } /* Стили для абзацев текста */ p { font-family: "Georgia", serif; /* Использование шрифта с засечками для основного текста */ color: #333333; font-size: 1.1em; line-height: 1.7; /* Установка межстрочного интервала для лучшей читаемости */ margin: 0 0 18px; /* Отмена верхнего браузерного отступа и добавление нижнего отступа для разделения абзацев */ text-align: left; /* Выравнивание текста по левому краю */ }<p>Со стилями блок будет выглядеть так:</p>
80
<em>Скриншот: Google Chrome / Skillbox Media</em><p>Заголовки и абзацы важны не только для читаемости, но и для того, чтобы вашу страницу хорошо понимали и поисковые системы, и скринридеры.</p>
80
<em>Скриншот: Google Chrome / Skillbox Media</em><p>Заголовки и абзацы важны не только для читаемости, но и для того, чтобы вашу страницу хорошо понимали и поисковые системы, и скринридеры.</p>
81
<p>Поисковые системы считывают заголовки и абзацы, чтобы определить, о чём страница и как она устроена. Вот самые важные критерии:</p>
81
<p>Поисковые системы считывают заголовки и абзацы, чтобы определить, о чём страница и как она устроена. Вот самые важные критерии:</p>
82
<ul><li><strong>Тег</strong><h1><strong> - главный заголовок страницы.</strong>Он помогает алгоритмам понять, о чём весь документ. В идеале в нём должна быть ключевая фраза, которая точно отражает тему страницы.</li>
82
<ul><li><strong>Тег</strong><h1><strong> - главный заголовок страницы.</strong>Он помогает алгоритмам понять, о чём весь документ. В идеале в нём должна быть ключевая фраза, которая точно отражает тему страницы.</li>
83
<li><strong>Рекомендуемая длина текста в</strong> <h1><strong> - 50-70 символов.</strong>Такой заголовок остаётся лаконичным и при этом достаточно информативным.</li>
83
<li><strong>Рекомендуемая длина текста в</strong> <h1><strong> - 50-70 символов.</strong>Такой заголовок остаётся лаконичным и при этом достаточно информативным.</li>
84
<li><strong>Не перегружайте</strong><h1><strong>ключевыми словами.</strong>Это может ухудшить читаемость и восприниматься как манипуляция. Лучше использовать 1-2 ключевые фразы, вписанные естественно.</li>
84
<li><strong>Не перегружайте</strong><h1><strong>ключевыми словами.</strong>Это может ухудшить читаемость и восприниматься как манипуляция. Лучше использовать 1-2 ключевые фразы, вписанные естественно.</li>
85
<li><strong>Можно обойтись и без</strong><h1><strong>, но не стоит.</strong>Поисковик всё равно проиндексирует контент, но без основного заголовка алгоритмам будет сложнее понять смысл страницы.</li>
85
<li><strong>Можно обойтись и без</strong><h1><strong>, но не стоит.</strong>Поисковик всё равно проиндексирует контент, но без основного заголовка алгоритмам будет сложнее понять смысл страницы.</li>
86
<li><strong>Ключевые слова - в</strong> <h2><strong> -</strong><h6><strong>.</strong>Подзаголовки структурируют материал и помогают поисковикам определить, о чём каждый раздел.</li>
86
<li><strong>Ключевые слова - в</strong> <h2><strong> -</strong><h6><strong>.</strong>Подзаголовки структурируют материал и помогают поисковикам определить, о чём каждый раздел.</li>
87
<li><strong>Абзацы тоже участвуют в SEO.</strong>Чем содержательнее, уникальнее и релевантнее текст, тем выше шансы на хорошие позиции в поисковой выдаче.</li>
87
<li><strong>Абзацы тоже участвуют в SEO.</strong>Чем содержательнее, уникальнее и релевантнее текст, тем выше шансы на хорошие позиции в поисковой выдаче.</li>
88
</ul><p>Для пользователей с нарушениями зрения заголовки и абзацы - навигационные ориентиры. Программы чтения с экрана позволяют:</p>
88
</ul><p>Для пользователей с нарушениями зрения заголовки и абзацы - навигационные ориентиры. Программы чтения с экрана позволяют:</p>
89
<ul><li><strong>переходить от заголовка к заголовку</strong>, быстро находя нужный раздел;</li>
89
<ul><li><strong>переходить от заголовка к заголовку</strong>, быстро находя нужный раздел;</li>
90
<li><strong>оценивать структуру страницы</strong>, даже не читая её всю, - логичная иерархия помогает сориентироваться;</li>
90
<li><strong>оценивать структуру страницы</strong>, даже не читая её всю, - логичная иерархия помогает сориентироваться;</li>
91
<li><strong>воспринимать текст абзац за абзацем</strong>, с естественными паузами между блоками (если вы используете <p>, а не просто переносы <br>).</li>
91
<li><strong>воспринимать текст абзац за абзацем</strong>, с естественными паузами между блоками (если вы используете <p>, а не просто переносы <br>).</li>
92
</ul><p><strong>Планируйте структуру заранее.</strong>Перед вёрсткой продумайте, какие уровни заголовков будут на странице. Это поможет выстроить логичную иерархию и избежать пропуска уровней.</p>
92
</ul><p><strong>Планируйте структуру заранее.</strong>Перед вёрсткой продумайте, какие уровни заголовков будут на странице. Это поможет выстроить логичную иерархию и избежать пропуска уровней.</p>
93
<p><strong>Добавьте оглавление.</strong>Если статья большая, оглавление сделает навигацию удобнее. Оно может собираться автоматически - с помощью JavaScript - на основе заголовков <h2><em>и</em> <h3></p>
93
<p><strong>Добавьте оглавление.</strong>Если статья большая, оглавление сделает навигацию удобнее. Оно может собираться автоматически - с помощью JavaScript - на основе заголовков <h2><em>и</em> <h3></p>
94
<p>Это делается так:</p>
94
<p>Это делается так:</p>
95
<main> <div id="toc"></div> <article id="article"> <h2 id="intro">Введение</h2> <p>Текст введения...</p> <h2 id="usage">Как использовать</h2> <p>Общее описание использования.</p> <h3 id="step1">Шаг 1</h3> <p>Описание первого шага.</p> <h3 id="step2">Шаг 2</h3> <p>Описание второго шага.</p> <h2 id="summary">Заключение</h2> <p>Подведение итогов.</p> </article> </main>#toc { background: #f9f9f9; border: 1px solid #ccc; padding: 1em; margin-bottom: 2em; max-width: 300px; font-family: sans-serif; } #toc h2 { font-size: 1.2em; margin-bottom: 0.5em; } #toc ul { list-style: none; padding-left: 1em; } #toc ul li { margin: 0.3em 0; } #toc ul ul { padding-left: 1em; font-size: 0.9em; } #toc a { color: #5a0000; text-decoration: none; }document.addEventListener("DOMContentLoaded", () => { const toc = document.getElementById("toc"); const headers = document.querySelectorAll("#article h2, #article h3"); const tocList = document.createElement("ul"); let currentH2Item = null; headers.forEach(header => { if (!header.id) { header.id = header.textContent.toLowerCase().replace(/\s+/g, '-'); } const link = document.createElement("a"); link.href = `#${header.id}`; link.textContent = header.textContent; const listItem = document.createElement("li"); listItem.appendChild(link); if (header.tagName === "H2") { currentH2Item = listItem; tocList.appendChild(currentH2Item); } else if (header.tagName === "H3" && currentH2Item) { let subList = currentH2Item.querySelector("ul"); if (!subList) { subList = document.createElement("ul"); currentH2Item.appendChild(subList); } subList.appendChild(listItem); } }); const tocTitle = document.createElement("h2"); tocTitle.textContent = "Оглавление"; toc.appendChild(tocTitle); toc.appendChild(tocList); });<p>Результат:</p>
95
<main> <div id="toc"></div> <article id="article"> <h2 id="intro">Введение</h2> <p>Текст введения...</p> <h2 id="usage">Как использовать</h2> <p>Общее описание использования.</p> <h3 id="step1">Шаг 1</h3> <p>Описание первого шага.</p> <h3 id="step2">Шаг 2</h3> <p>Описание второго шага.</p> <h2 id="summary">Заключение</h2> <p>Подведение итогов.</p> </article> </main>#toc { background: #f9f9f9; border: 1px solid #ccc; padding: 1em; margin-bottom: 2em; max-width: 300px; font-family: sans-serif; } #toc h2 { font-size: 1.2em; margin-bottom: 0.5em; } #toc ul { list-style: none; padding-left: 1em; } #toc ul li { margin: 0.3em 0; } #toc ul ul { padding-left: 1em; font-size: 0.9em; } #toc a { color: #5a0000; text-decoration: none; }document.addEventListener("DOMContentLoaded", () => { const toc = document.getElementById("toc"); const headers = document.querySelectorAll("#article h2, #article h3"); const tocList = document.createElement("ul"); let currentH2Item = null; headers.forEach(header => { if (!header.id) { header.id = header.textContent.toLowerCase().replace(/\s+/g, '-'); } const link = document.createElement("a"); link.href = `#${header.id}`; link.textContent = header.textContent; const listItem = document.createElement("li"); listItem.appendChild(link); if (header.tagName === "H2") { currentH2Item = listItem; tocList.appendChild(currentH2Item); } else if (header.tagName === "H3" && currentH2Item) { let subList = currentH2Item.querySelector("ul"); if (!subList) { subList = document.createElement("ul"); currentH2Item.appendChild(subList); } subList.appendChild(listItem); } }); const tocTitle = document.createElement("h2"); tocTitle.textContent = "Оглавление"; toc.appendChild(tocTitle); toc.appendChild(tocList); });<p>Результат:</p>
96
<em>Скриншот: Google Chrome / Skillbox Media</em><p><strong>Скрытый заголовок для семантики.</strong>Если нужно сохранить структуру, но не показывать заголовок на странице, используйте класс .visually-hidden. Такой текст будет невидим визуально, но доступен для поисковых систем и скринридеров.</p>
96
<em>Скриншот: Google Chrome / Skillbox Media</em><p><strong>Скрытый заголовок для семантики.</strong>Если нужно сохранить структуру, но не показывать заголовок на странице, используйте класс .visually-hidden. Такой текст будет невидим визуально, но доступен для поисковых систем и скринридеров.</p>
97
<h1 class="visually-hidden">Руководство пользователя</h1>.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }<p><strong>Проверяйте код.</strong>Используйте<a>validator.w3.org</a>, чтобы убедиться, что структура HTML корректна: нет нарушений вложенности и пропущенных закрывающих тегов.</p>
97
<h1 class="visually-hidden">Руководство пользователя</h1>.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }<p><strong>Проверяйте код.</strong>Используйте<a>validator.w3.org</a>, чтобы убедиться, что структура HTML корректна: нет нарушений вложенности и пропущенных закрывающих тегов.</p>
98
<a>Курс с трудоустройством: "Профессия Фронтенд-разработчик + ИИ" Узнать о курсе</a>
98
<a>Курс с трудоустройством: "Профессия Фронтенд-разработчик + ИИ" Узнать о курсе</a>