HTML был создан для создания гипертекстового содержимого, и естественно, что большинство тегов были созданы для организации текстов , поэтому для определения заголовков, разделов, статей и т. Д.
Эта организация имеет мало общего с графическим представлением страницы, но с ее тематизацией и семантикой. Со временем теги HTML, определяющие графические аспекты, постепенно устарели, а те, которые помогают идентифицировать важные разделы и части текста, остались.
Также верно, что браузеры также используют эти теги для большей ясности текста, назначая им предварительно упакованные стили.
Абзацы
Абзацы <p>
Абзац <p>является контейнерным элементом, который содержит текст и другие теги. Вот пример:
<p>Первый абзаце. Благодаря простому примеру мы можем увидеть работу тега p. </ p> <p> По умолчанию браузер переносит содержимое второго абзаца </ p>
Это также элемент типа « Block» , например, это означает, что основное поведение браузера заключается в переходе к концу абзаца и что для текста установлены поля.
Как вы можете себе представить, этот элемент широко используется и используется также CMS, как WordPress, для использования текста.
Тег <br>
Тег <br> обозначает разрывную строку и используется для прерывания строки в середине текста. Как вы можете легко видеть, даже если мы перейдем в конец редактора, текст в браузере не будет перенесен, за исключением конца пространства, доступного для его контейнера.
Чтобы принудительно обернуть текст, мы вставляем <br>, например, так:
Первый абзаце. Благодаря простому примеру мы можем увидеть работу тега br. <br> Второго абзаца
Теперь, в отличие от того, что он говорит, текст будет заканчиваться словами «тега br.».
Если мы хотим оставить линию пробела между частью текста и другой частью текста, мы обычно используем два абзаца, но может случиться так, что будет использован двойной <br>.
Первый абзаце. Благодаря простому примеру мы можем увидеть работу тега br. <br><br> Второго абзаца
Заголовки, заголовки h1, h2, h3 и т. Д.
Названия ( заголовки ) теги , которые помогают нам определить тему страницы. Как правило, они выделены жирным шрифтом и увеличенным размером. Это также элементы блочного типа, и размер и поле, применяемые браузером по умолчанию, пропорциональны важности заголовка.
Иерархия заголовков
Как можно догадаться по номерам, названия являются иерархическими . Это означает, что h1 будет основным заголовком страницы. Если нам нужны другие заголовки, чтобы специализировать некоторые важные разделы текста («основные разделы»), рекомендуется сначала выбрать h2 , для подразделов, которые мы будем использовать, h3и т. Д. Со все более детализированным подразделением вплоть до использования h6 .
<h1>Первый заголовок</h1> <h2>Второй заголовок</h2> <h3>Третий заголовок</h3> <h3>Третий заголовок</h3> <h2>Второй заголовок</h2> <h3>Третий заголовок</h3> <h3>Третий заголовок</h3>
Иерархия также влияет на вес , это значит что заголовки имеют с точки зрения тематизации страницы . SEO, как правило, советуют вставлять h1 основные ключевые слова для определения содержания и h2 вспомогательных ключевых слов.
Иерархия заголовков на домашних страницах
Если мы говорим о домашней странице, более целесообразно использовать h1 для названия сайта, h2 для категорий и h3 для заголовков последнего опубликованного контента (или наиболее важных). H4 может быть полезен для заголовков другого связанного контента, а h5 — для менее важных вещей, менее тематизируемых или менее коррелирующих с темой страницы.