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

HTML (HyperText Markup Language) — основа веб-разработки. Базовые теги позволяют создать структуру страницы: заголовки организуют контент, абзацы формируют текст, списки систематизируют информацию, а ссылки обеспечивают навигацию. Правильное использование этих элементов — фундамент доступной и семантически корректной верстки.

Теги заголовков: h1-h6

Заголовки создают иерархию контента. От h1 (наивысший уровень) до h6 (низший уровень).

<h1>Главный заголовок страницы</h1>
<h2>Раздел статьи</h2>
<h3>Подраздел</h3>

Основные правила:

  • h1 используется один раз на странице
  • Не пропускайте уровни (после h2 должен быть h3, а не h4)
  • Заголовки влияют на SEO — используйте ключевые слова естественно

Теги абзацев и блоков

Тег p создает абзацы текста:

<p>Это обычный абзац текста. Он автоматически отделяется отступами.</p>
<p>Следующий абзац с текстом.</p>

Тег div — универсальный контейнер:

<div class="container"> <p>Текст внутри контейнера</p> <img src="image.jpg" alt="Пример">
</div>

Списки: упорядоченные и маркированные

Неупорядоченный список (ul):

<ul> <li>Первый пункт</li> <li>Второй пункт</li> <li>Третий пункт</li>
</ul>

Упорядоченный список (ol):

<ol> <li>Первый шаг</li> <li>Второй шаг</li> <li>Третий шаг</li>
</ol>

Теги ссылок и изображений

Гиперссылка с базовыми атрибутами:

<a href="https://Примеры.com" title="Перейти на пример" target="_blank"> Текст ссылки
</a>

Изображение с обязательным alt:

<img src="photo.jpg" alt="Описание изображения" width="800" height="600">

Сравнение основных тегов

Тег Назначение Обязательные атрибуты
Заголовки разного уровня Нет
p Абзац текста Нет
Списки Нет
li Элемент списка Нет
a Ссылка
Изображение

Частые ошибки и как их избежать

  • Неправильная иерархия заголовков — соблюдайте последовательность h1-h2-h3
  • Отсутствие alt у изображений — всегда добавляйте описательное alt
  • Пустые ссылки — проверяйте атрибут href
  • Избыточное использование div — применяйте семантические теги там, где это уместно

Чек-лист проверки HTML-разметки

  • Один h1 на странице
  • Корректная последовательность заголовков
  • Все изображения имеют alt
  • Ссылки имеют href
  • Списки правильно вложены
  • Нет незакрытых тегов

Частые вопросы

Какие основные теги HTML существуют?

Основные теги HTML включают заголовки (h1-h6), абзацы (p), списки (ul, ol, li), ссылки (a), изображения (img), а также теги для семантической разметки (header, footer, section). Каждый тег выполняет конкретную функцию в структуре веб-страницы.

Как правильно использовать теги заголовков?

Теги заголовков h1-h6 создают иерархию контента. h1 — главный заголовок страницы (один на страницу), h2 — подзаголовки разделов, h3 — подразделы. Важно соблюдать последовательность уровней без пропусков.

Чем отличаются теги ul и ol?

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

Какие атрибуты обязательны для тега ссылки?

Для тега a обязателен атрибут href, содержащий URL. Рекомендуется также использовать атрибут title для пояснения и target=»_blank» для открытия в новой вкладке при необходимости.