Тег <p></p>

Тег <p></p> используется для разметки абзацев текста т.е. выводит текст на страницу. Браузер автоматически добавляет отступы (верхние и нижние поля) перед и после каждого абзаца, визуально отделяя их друг от друга. Элемент является блочным, а значит его содержимое всегда начинается с новой строки и занимает всю доступную ширину Это семантически правильный способ структурирования текстового контента, который улучшает читабельность и понимание структуры документа как для пользователей, так и для поисковых систем.

<p>Привет, Мир!</p>
<p>Hello, World!</p>

Теги <h1></h1> - <h6></h6>

Эти теги определяют заголовки шести уровней важности, где <h1> – заголовок самого высокого уровня (главный заголовок страницы), а <h6> – самого низкого. Они формируют иерархическую структуру документа, подобно оглавлению в книге. Правильное использование заголовков крайне важно для SEO-продвижения, так как поисковые системы используют их для понимания тематики и ключевых моментов контента на странице.

Теги заголовков H1-H6 критически важны для SEO продвижения, так как поисковые системы используют их для понимания структуры и ключевых тем контента на странице.

На странице должен быть только один тег <h1>. Заголовки должны быть вложены по порядку: после <h1> должен идти <h2>, затем <h3> и т.д. Не следует пропускать уровни (например, размещать <h4> сразу после <h2>).

<h1>Привет, Мир!</h1>
<h2>Привет, Мир!</h2>
<h3>Привет, Мир!</h3>
<h4>Привет, Мир!</h4>
<h5>Привет, Мир!</h5>
<h6>Привет, Мир!</h6>

Тег <span></span>

Универсальный строчный тег-контейнер, предназначенный для выделения части текста или другого строчного элемента с целью дальнейшего оформления с помощью CSS или manipulation с помощью JavaScript. В отличие от блочных тегов, таких как <div>, <span> не переносит содержимое на новую строку и используется для точечных изменений внутри строки.

В отличие от блочного тега <div>, <span> не переносит содержимое на новую строку. Он применяется внутри строки.

<span>Привет, Мир!</span>
<span>Hello, World!</span>

Тег <b></b>

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

<p>Привет, <b>Мир!</b></p>

Тег <strong></strong>

Тег <strong></strong> также как и тег <b> делает текст жирным, но в отличие от <b>, тег <strong> не только делает текст жирным, но и придает ему семантическую важность. Он указывает браузерам и поисковым системам, что заключенный в него текст имеет особую значимость, серьезность или срочность. Это правильный выбор для смыслового акцента.

<p>Привет, <strong>Мир!</strong></p>

Тег <i></i>

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

<p>Привет, <i>Мир!</i></p>

Тег <i></i>

Семантический тег для смыслового выделения текста с помощью курсива. Он указывает на интонационное ударение, то есть на то, что при чтении на эту часть предложения следует сделать акцент, что может изменить оттенок высказывания.

<p>Привет, <em>Мир!</em></p>

Тег <img>

Одиночный тег (не требует закрывающего) для вставки изображений на веб-страницу. Для его работы обязательным является использование атрибутов, в частности src (указывает путь к файлу изображения) и alt (предоставляет альтернативный текст для случаев, когда изображение не загружено, и для программ чтения с экрана). Это наглядно показывает, как HTML атрибуты наделяют теги конкретными свойствами.

<img src="img.jpg" alt="Описание" width="200px" height="100px" loading="lazy">

Тег <a></a>

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

<a href="https://first-code.ru" target="_blank" rel="nofollow">Перейти на сайт</a>

Тег <div></div>

Универсальный блочный контейнер, основной инструмент для верстки макета страницы. Тег <div> используется для группировки других элементов в логические блоки с целью их последующего оформления стилями CSS или управления через JavaScript. Сам по себе не имеет семантического значения, но является главным "строительным блоком" при создании структуры сайта. Он всегда начинается с новой строки.

<div></div>

Тег <header></header>

Универсальный блочный контейнер, основной инструмент для верстки макета страницы. Тег <div> используется для группировки других элементов в логические блоки с целью их последующего оформления стилями CSS или управления через JavaScript. Сам по себе не имеет семантического значения, но является главным "строительным блоком" при создании структуры сайта. Он всегда начинается с новой строки.

<header></header>

Тег <footer></footer>

Семантический тег <footer></footer>, обозначающий "подвал" сайта или раздела. Как правило, содержит информацию об авторских правах, контактные данные, ссылки на социальные сети или дополнительную навигацию.

<footer></footer>

Тег <aside></aside>

Семантический тег <aside></aside>, обозначающий блок для разметки побочного или косвенно связанного с основным содержания. Часто используется для боковых панелей (сайдбаров), в которых размещаются блоки рекламы, рубрики, списки ссылок или цитаты.

<aside></aside>

Тег <section></section>

Семантический тег <section></section>, обозначающий блок для определения логически самостоятельного раздела документа. Например, глава, вкладка в интерфейсе или блок с контактами. Каждая <section> должна, как правило, иметь свой заголовок.

<section></section>

Тег <main></main>

Главный семантический тег <main></main>, который заключает в себе основное, уникальное содержание страницы. Контент внутри <main> не должен повторяться на других страницах сайта (в отличие от <header> или <footer>). На странице должен быть только один тег <main>.

<main></main>

Тег <nav></nav>

Семантический тег <nav></nav>, предназначенный исключительно для разметки основного блока навигации по сайту или по текущему разделу. В него помещаются основные меню со ссылками.

В одном HTML документе может содержаться несколько тегов <nav>, один может содержать группу ссылок для навигации по сайту, другой - для навигации по текущей веб-странице.

Обратите внимание, что не все ссылки в HTML документе могут быть помещены внутрь элемента <nav>, он может включать в себя только крупные навигационные блоки.

Тег <nav> не может быть вложен в тег <address>.

<nav></nav>

Тег <article></article>

Независимый семантический тег для разметки самодостаточного контента, который может быть изъят из страницы и распространен отдельно без потери смысла. Идеально подходит для новостных статей, постов в блоге, комментариев или карточек товаров.

В одном HTML-документе может быть использовано несколько тегов <article>.

<article></article>

Теги <ul></ul>, <ol></ol>, <li></li>

Эти теги создают списки. <ul> определяет маркированный (неупорядоченного) список, где пункты отмечаются маркерами. <ol> определяет нумерованный список, где пункты идут по порядку и отмечаются числами. Каждый пункт внутри любого списка помечается тегом <li>.

Теги <ul> и <ol> являются блочными элеменами и занимают всю доступную им ширину, а их высота зависит от количества содержимого.

По умолчанию, маркированные списки отображаются на веб-странице в виде списка и начинаются с маленького чёрного круга и небольшим отступом от левого края.

Для создания нумерованных списков используется тег <ol>. В качестве нумерующих элементов могут выступать следующие значения: арабские числа (1, 2, 3, ...); прописные латинские буквы (A, B, C, ...); строчные латинские буквы (a, b, c, ...); прописные римские числа (I, II, III, ...); строчные римские числа (i, ii, iii, ...). Для указания типа нумерованного списка применяется атрибут type.

Теги ul и ol могут принимать следующие атрибуты:

<!-- маркированный список -->
<ul>
    <li>Разработка сайтов</li>
    <li>Продвижение сайтов</li>
    <li>Поддержка сайтов</li>
</ul>

<!-- маркированный список -->
<ol start="1">
    <li>Разработка сайтов</li>
    <li>Продвижение сайтов</li>
    <li>Поддержка сайтов</li>
</ol>

<!-- вложенный список -->
<ol>
    <li>
        Разработка сайтов
        <ul>    
            <li>Интернет-магазины</li>
            <li>Landing pages</li>
            <li>Корпоративные сайты</li>
        </ul>
    </li>
    <li>Продвижение сайтов</li>
    <li>Поддержка сайтов</li>
</ol>