Заголовки | HTML | CodeBasics
Чем больше текст, тем чаще он разбивается на логические секции. Например, базовая разметка доклада, диплома или реферата состоит из трёх основных частей:
- Введение
- Основная часть
- Заключение
Такие логические разделения на заголовки позволяют быстрее ориентироваться в документе и находить ту часть, которая нужна.
Для создания заголовков используется 6 парных тегов: <h2>, <h3>, <h4>, <h5>, <h5>, <h6>, где <h2> — заголовок первого уровня, самый важный и описывающий главную тему текста, а <h6> — заголовок самого низшего уровня.
<h2>Заголовок первого уровня</h2> <h3>Заголовок второго уровня</h3> <h4>Заголовок третьего уровня</h4> <h5>Заголовок четвёртого уровня</h5> <h5>Заголовок пятого уровня</h5> <h6>Заголовок шестого уровня</h6>
Заголовок второго уровня
Заголовок третьего уровня
Заголовок четвёртого уровня
Заголовок пятого уровня
Заголовок шестого уровня
Каждый заголовок низшего уровня является подразделом заголовка более верхнего уровня.
Это очень похоже на оглавление любой книги, структура которой может выглядеть так:
- Глава 1
- Часть 1
- Часть 2
- Примечания
- Часть 3
- Глава 2
<h2>Лучшая книга на Земле</h2> <p>Описание книги. Благодарность моему коту и двум моим собакам. Мяу!</p> <h3>Глава 1</h3> <h4>Часть 1</h4> <p>Параграф с текстом</p> <p>Параграф с текстом</p> <h4>Часть 2</h4> <p>Параграф с текстом</p> <p>Параграф с текстом</p> <h5>Примечания</h5> <p>Текст этого примечания написан с любовью</p> <h4>Часть 3</h4> <p>Параграф с текстом</p> <p>Параграф с текстом</p> <h3>Глава 2</h3>
Задание
Добавьте в редакторе заголовок первого и второго уровня с произвольным текстом
Упражнение не проходит проверку — что делать? 😶Если вы зашли в тупик, то самое время задать вопрос в «Обсуждениях».
Как правильно задать вопрос:
- Обязательно приложите вывод тестов, без него практически невозможно понять что не так, даже если вы покажете свой код. Программисты плохо исполняют код в голове, но по полученной ошибке почти всегда понятно, куда смотреть.
Тесты устроены таким образом, что они проверяют решение разными способами и на разных данных. Часто решение работает с одними входными данными, но не работает с другими. Чтобы разобраться с этим моментом, изучите вкладку «Тесты» и внимательно посмотрите на вывод ошибок, в котором есть подсказки.
Мой код отличается от решения учителя 🤔В редких случаях бывает, что решение подогнано под тесты, но это видно сразу.
Прочитал урок — ничего не понятно 🙄Создавать обучающие материалы, понятные для всех без исключения, довольно сложно.
Мы очень стараемся, но всегда есть что улучшать. Если вы встретили материал, который вам непонятен, опишите проблему в «Обсуждениях». Идеально, если вы сформулируете непонятные моменты в виде вопросов. Обычно нам нужно несколько дней для внесения правок.
Кстати, вы тоже можете участвовать в улучшении курсов: внизу есть ссылка на исходный код уроков, который можно править прямо из браузера.
Полезное
Соблюдайте последовательность заголовков. Не перескакивайте уровни
На странице, обычно, находится только один заголовок первого уровня
←Предыдущий
Следующий→Нашли ошибку? Есть что добавить? Пулреквесты приветствуются https://github.com/hexlet-basics
Как правильно задать HTML заголовок страницы
Продолжаем изучение HTML. В этом уроке мы рассмотрим HTML заголовки страниц, какие заголовки бывают, как ими правильно пользоваться и когда они могут применяться. А также разберем параграфы, чтобы Вы уже могли наполнить свою страничку текстом, но, главное, сделать это правильно.
Если Вы не изучили первую статью, то найти ее можно здесь:
Раз вы находитесь на данном уроке, то хотите и дальше изучать тему сайтостроения. И с помощью этих уроков у вас появится базовое понимание, что это такое.
Что делать, если вам нужно больше знаний и хотите, возможно, даже работать в этой области? Лучше найти специализированные курсы. В рунете не так много хороших, где обучают Front-end разработчиков. Мне понравилась программа обучения, которая есть у Нетологии у курса «Front-end разработчик с нуля«. Также неплохая программа и у Skillbox у курс «Front-end разработчик«.
Если изучать веб-разработку, то с профессионалами.
Теория и практика — Параграфы и заголовки HTML страницы
Сегодня мы поговорим о параграфах и заголовках. Начнем с простого — с параграфов и где они применяются.
Параграфы на странице
Я сейчас приведу пример кода, в котором будет присутствовать тег параграфа <p> </p>.
HTML КОД
1 2 3 4 5 6 7 8 | <html>
<head>
<title>Моя первая html страница</title>
</head>
<body>
<p>Начало обучения технологии html</p>
</body>
</html> |
Основную структуру Вы уже помните из первого урока.
Когда Вы пишете любой текст на странице, будь это просто абзац или небольшая поясняющая строка под изображением, необходимо этот текст помещать внутрь тега <p> </p>.
В последующих уроках Вы увидите процесс оформления данных абзацев. Сейчас Вы должны понять то, что нельзя размещать тег на странице без какого-либо тега. Потому что в дальнейшем будет сложно применить какие-то индивидуальные стили именно для этого участка текста.
Попробуйте написать несколько абзацев. Некоторые абзацы возьмите в тег <p> </p>, а некоторые оставьте без него. И Вы сразу увидите разнице. Потому что если Вы напишете абзац внутри этого тега, то у него сразу же появятся отступы. А сейчас перейдем уже в HTML заголовкам страницы.
HTML заголовки на странице
В HTML документе присутствует семантика.
Я не говорю о технологии HTML5 и его новых тегах. Здесь лишь разберем самые базовые, чтобы Вы быстро смогли освоить азы HTML. Семантика означает то, что не надо заголовки, абзацы, таблицы и так далее, создавать с помощью одного и того же тега. Это можно сделать, но технология HTML более разнообразна и для разных ситуаций предусмотрены соответствующие теги. А Вам лишь необходимо освоить основные теги, чтобы свободно работать с HTML кодом.
Это небольшое введение я написал к тому, что для параграфов необходимо использовать уже известный Вам тег <p> </p>. А вот для заголовков используются теги, которые начинаются с английской буквы «H».
Вот весь список заголовков, которые Вы можете использовать:
Некоторые из данных тегов используются гораздо чаще. Это такие теги как h2, h3 или h4. Если кто-то уже знаком с CSS, то понимает, что заголовок HTML заголовок страницы h4 можно стилизовать таким образом, что он будет внешне похож и на h2 или h3. Но значения, которые они носят, хотя бы для SEO оптимизации, кардинально отличаются.
Как правило, эти цифры, внутри тегов, следует понимать как уровень важности того или иного HTML заголовка. Поэтому необходимо очень тщательно прорабатывать данные элементы и тогда поисковые системы станут замечать Ваши статьи.
Пока мы не дошли до CSS, Вы увидите стили заголовков, которые заданы по умолчанию в браузерах. Если Вы вставите один за одним данные теги и внутри напишите какой-либо текст, то увидите следующее:
Для поисковых роботов также важно использование заголовков на странице. Есть определенные правила, которые Вы можете прочитать в нашей книге — PDF книга по раскрутке сайта.
После того, как все изучили, сразу же идем в код и пробуем написать все своими руками. Именно так быстрее всего осваивается любой язык программирования. Но технология HTML намного легче любого языка программирования, поэтому здесь сможет разобраться каждый. Таким образом Вы лучше запомните теги.
Видео урок — HTML заголовок страницы? (практика)
Наглядное видео на примере работы с данными тегами:
youtube.com/embed/44p0DzRUgUw?autoplay=0&iv_load_policy=3&showinfo=0?vq=hd720″ src=»data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==»> Домашнее задание
Д/З: в качестве примера напишите небольшой текст, который будет состоять из 5-7 абзацев и 2-3 разнообразных заголовков.
Больше практикуйтесь в параграфах и HTML заголовках страниц!
Заголовки, субтитры и абзацы: теги HTML h2 и P
См. этот учебник по HTML, в котором показано, как работать с абзацами с помощью тега p, заголовком страницы с использованием тега h2 и подписями с тегами от h3 до h6.
Заголовки, подзаголовки и абзацы в HTML являются чрезвычайно распространенными элементами почти на всех веб-сайтах. Правильное использование этих элементов текста может принести положительные результаты для навигации по сайту и представления вашего HTML-документа. Здесь будут проанализированы теги p (абзац), h2 (заголовок) и от h3 до h6 (субтитры).
Абзацы HTML — тег p
Тег p используется для структурирования текста в абзацах в документе HTML. Сначала все тексты должны быть внутри этого тега, кроме:
- Когда текст является заголовком, в этом новом условии должны использоваться теги
и
.
- Если текст является цитатой, в этом случае используйте тег
- Если текст представляет собой список маркеров или список, в этом случае используйте
- и
- или
- и
- .
- Если это заголовок, в этом случае используйте
Атрибуты
Тег p поддерживает следующие атрибуты:
- класс — позволяет ассоциировать класс форматирования CSS
- id — Создает идентификатор абзаца. Полезно для пользовательского форматирования. Стиль
- — создает встроенное форматирование CSS.
Пример документа с тремя абзацами, каждый из которых использует один из указанных выше атрибутов:
w3.org/1999/xhtml “> Структурирование абзацев с помощью тега p </ title > 9 0044</p><p> <em><body> </em></p><p> <em> <p class = «text»><div id="yandex_rtb_2" class="yandex-adaptive classYandexRTB"></div> <script type="text/javascript">if(rtbW>=960){var rtbBlockID="R-A-744154-3";} else{var rtbBlockID="R-A-744154-5";} window.yaContextCb.push(()=>{Ya.Context.AdvManager.render({renderTo:"yandex_rtb_2",blockId:rtbBlockID,pageNumber:2,onError:(data)=>{var g=document.createElement("ins");g.className="adsbygoogle";g.style.display="inline";if(rtbW>=960){g.style.width="580px";g.style.height="400px";g.setAttribute("data-ad-slot","9935184599");}else{g.style.width="300px";g.style.height="600px";g.setAttribute("data-ad-slot","9935184599");} g.setAttribute("data-ad-client","ca-pub-1812626643144578");g.setAttribute("data-alternate-ad-url",stroke2);document.getElementById("yandex_rtb_2").appendChild(g);(adsbygoogle=window.adsbygoogle||[]).push({});}})});window.addEventListener("load",()=>{var ins=document.getElementById("yandex_rtb_2");if(ins.clientHeight =="0"){ins.innerHTML=stroke3;}},true);</script> Абзац со связанным классом </ p> </em></p><p> <em> <p id = «highlight»> абзац с </ p> </em></p><p> 90 043 <p style="color:#ff0000">Абзац со встроенным форматированием CSS</p></em></p><p> <em> </ body> </em></p><p> <em> </ html> </em></p><p> <strong> События </strong></p><p> Тег p также поддерживает события: onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, и onkeyup.</p><h3><span class="ez-toc-section" id="_h2_HTML"> Тег h2 — заголовок HTML-страницы </span></h3><p> Тег h2 используется для определения <strong> заголовка </strong> страницы. Концептуально существует 6 уровней заголовков, h2 — самый высокий из всех, то есть он должен использоваться для обозначения самого важного текста страницы.</p><p> <strong> Пример: </strong></p><p><h2><span class="ez-toc-section" id="i-12"> Заголовок текста вашей страницы </span></h2> </ h2></p><p> <strong> Соображения </strong></p><ul><li> Поведение h2 по умолчанию — жирный шрифт, размер шрифта xx</li><li> На каждой странице должен быть только один тег h2, так как предполагается, что каждая страница имеет один заголовок</li><li> Поскольку это текстовый тег, он поддерживает CSS-форматирование шрифта, текстового блока, фона, блочной модели, позиционирования, границ и свойств макета.<img class="lazy lazy-hidden" loading='lazy' src="//schtirlitz.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/cf.ppt-online.org/files/slide/k/KT786iLkqgIVxFhYAJDbBsUpwSr5cdG02j1C4t/slide-32.jpg' /><noscript><img loading='lazy' src='/800/600/https/cf.ppt-online.org/files/slide/k/KT786iLkqgIVxFhYAJDbBsUpwSr5cdG02j1C4t/slide-32.jpg' /></noscript><center><ins class="adsbygoogle" style="display:block; text-align:center;" data-ad-layout="in-article" data-ad-format="fluid" data-ad-client="ca-pub-1812626643144578" data-ad-slot="4491286225"></ins> <script>(adsbygoogle=window.adsbygoogle||[]).push({});</script></center></li><li> Размещать в начале текста. Не имеет смысла использовать этот тег в середине текста</li><li> Вы можете использовать тег h2 Checker By Sitechecker для обеспечения правильной разметки.</li></ul><h3><span class="ez-toc-section" id="_h3_h6"> Теги от h3 до h6 – Подзаголовки страниц </span></h3><p> Тег от h3 до h6 дополняет список тегов, используемых для заголовков. Поскольку эти теги отсортированы по уровням, правильно будет сказать, что h3 следует использовать в тексте более важном, чем текст h4 и так далее.</p><p> Нет необходимости использовать все 6 уровней, за исключением случаев, когда текст разбит на несколько разделов, что требует очень жесткой документации. Обычно h2, h3 и h4 используются для большинства текстов, найденных в Интернете.</p><p> <strong> Пример: </strong></p><ul><li><h3><span class="ez-toc-section" id="_2"> Текстовый заголовок 2-го уровня </span></h3> </ h3></li><li><h4><span class="ez-toc-section" id="_3">Заголовок текста 3 уровня</span></h4></li><li><h3><span class="ez-toc-section" id="_4"> Заголовок текста 4 уровня </span></h3> </ h3></li><li><h5><span class="ez-toc-section" id="_5">Текст заголовка уровня 5</span></h5></li><li><h6><span class="ez-toc-section" id="_6">Заголовок текста 6 уровня</span></h6></li></ul><p> <strong> Соображения </strong></p><ul><li> Стандартное поведение тегов от h3 до h6 выделено жирным шрифтом, а размер шрифта зависит от уровня, где h3 больше, а h6 меньше</li><li> Эти теги можно использовать на странице более одного раза, но без излишеств</li><li> Поскольку это текстовый тег, он поддерживает CSS-форматирование шрифта, текстового блока, фона, блочной модели, позиционирования, границ и свойств макета.<img class="lazy lazy-hidden" loading='lazy' src="//schtirlitz.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/xn----7sbbfb7a7aej.xn--p1ai/technology/content/ur_06_05.jpg' /><noscript><img loading='lazy' src='/800/600/https/xn----7sbbfb7a7aej.xn--p1ai/technology/content/ur_06_05.jpg' /></noscript></li><li> Нет смысла использовать h4 без использования h3, концептуально мы будем использовать h4 только после использования h2 и h3.</li><div id="yandex_rtb_1" class="yandex-adaptive classYandexRTB"></div> <script type="text/javascript">if(rtbW>=960){var rtbBlockID="R-A-744154-3";} else{var rtbBlockID="R-A-744154-5";} window.yaContextCb.push(()=>{Ya.Context.AdvManager.render({renderTo:"yandex_rtb_1",blockId:rtbBlockID,pageNumber:1,onError:(data)=>{var g=document.createElement("ins");g.className="adsbygoogle";g.style.display="inline";if(rtbW>=960){g.style.width="580px";g.style.height="400px";g.setAttribute("data-ad-slot","9935184599");}else{g.style.width="300px";g.style.height="600px";g.setAttribute("data-ad-slot","9935184599");} g.setAttribute("data-ad-client","ca-pub-1812626643144578");g.setAttribute("data-alternate-ad-url",stroke2);document.getElementById("yandex_rtb_1").appendChild(g);(adsbygoogle=window.adsbygoogle||[]).push({});}})});window.addEventListener("load",()=>{var ins=document.getElementById("yandex_rtb_1");if(ins.clientHeight =="0"){ins.innerHTML=stroke3;}},true);</script> </ul><p> Полностью управляемый хостинг WordPress</p><p> Выделенные процессорные серверы Nestify на базе AWS обеспечивают быстроту, безопасность и актуальность ваших сайтов.</p><p> ПОСМОТРЕТЬ 1-МИНУТНУЮ ДЕМО</p><h2><span class="ez-toc-section" id="HTML-2"> HTML: тег </span></h2><hr/><p> В этом руководстве по HTML объясняется, как использовать элемент HTML, называемый тегом <strong><title> </strong>, с синтаксисом и примерами.</p><h3><span class="ez-toc-section" id="i-13"> Описание </span></h3><p> Тег HTML <strong><title> </strong> содержит заголовок документа, который отображается в верхней части окна браузера или используется в качестве имени закладки при добавлении веб-страницы в избранное. Этот тег также часто называют элементом<title>.</p><h3><span class="ez-toc-section" id="i-14"> Синтаксис </span></h3><p> В HTML синтаксис тега <strong><title> </strong>:</p><pre> <head> <title>Поместите здесь название документа Атрибуты
К тегу
применяются только глобальные атрибуты.<img class="lazy lazy-hidden" loading='lazy' src="//schtirlitz.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/dwweb.ru/__img/__speed_foto/2020_02_05_09_07.png' /><noscript><img loading='lazy' src='/800/600/https/dwweb.ru/__img/__speed_foto/2020_02_05_09_07.png' /></noscript> Нет атрибутов, специфичных для тега<title>.</p><h3><span class="ez-toc-section" id="i-16"> Примечание </span></h3><ul><li> HTML-элемент<title> находится внутри тега<head>.</li><li> В документ НЕОБХОДИМО включить тег<title> внутри тега<head>.</li><li> Если вы НЕ включаете тег<title> в тег<head>, вы получите следующую ошибку при проверке HTML-кода: «В заголовке элемента отсутствует требуемый экземпляр заголовка дочернего элемента».</li></ul><h3><span class="ez-toc-section" id="i-17"> Совместимость с браузерами </span></h3><p> Тег<title> совместим со следующими браузерами:</p><ul><li> Chrome</li><li> Андроид</li><li> Firefox (Геккон)</li><li> Firefox Mobile (Геккон)</li><li> Internet Explorer (IE)</li><center><ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-1812626643144578" data-ad-slot="3076124593" data-ad-format="auto" data-full-width-responsive="true"></ins> <script>(adsbygoogle=window.adsbygoogle||[]).push({});</script></center><li> Пограничный мобильный</li><li> Опера</li><li> Опера Мобайл</li><li> Сафари (веб-кит)</li><li> Сафари Мобильный</li></ul><h3><span class="ez-toc-section" id="i-18"> Пример </span></h3><p> Мы обсудим тег<title> ниже, исследуя примеры использования тега<title> в HTML5, HTML 4.01 Transitional, XHTML 1.0 Transitional, XHTML 1.<img class="lazy lazy-hidden" loading='lazy' src="//schtirlitz.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/basicweb.ru/html/primer/7.png' /><noscript><img loading='lazy' src='/800/600/https/basicweb.ru/html/primer/7.png' /></noscript> 0 Strict и XHTML 1.1.</p><ul><li data-tab="1"> HTML5</li><li data-tab="2"> HTML4</li><li data-tab="3"> XHTML</li></ul><h4><span class="ez-toc-section" id="_HTML5"> Документ HTML5 </span></h4><p> Если вы создали новую веб-страницу в HTML5, ваш тег<title> может выглядеть так:</p><pre> <!doctype html> <html> <голова> <мета-кодировка="UTF-8"> <title>Пример HTML5 от www.techonthenet.com <тело>В этом примере документа HTML5 мы создали заголовок «Пример HTML5».
HTML 4.01 Transitional Document
Если вы создали новую веб-страницу в HTML 4.01 Transitional, ваш тег
может выглядеть следующим образом:</p><pre> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional// RU" "http://www.w3.org/TR/html4/loose.dtd"> <html> <голова> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Переходный пример HTML 4.01 от www.techonthenet.com <тело> - или