\n\n// Внешний скрипт\n\n\n// С асинхронной загрузкой\n\n\n// С отложенным выполнением\n\n```\n\n### Тег `

` (параграф)\n\n**Назначение:** семантическое оформление абзацев текста.\n\n**Категория:** блочный элемент (block element).\n\n**Характеристики:**\n- Автоматически добавляет отступы сверху и снизу\n- Используется для текстового контента\n- Всегда переносит содержимое на новую строку\n\n```javascript\n

Это первый абзац текста.

\n

Это второй абзац с дополнительной информацией.

\n\n

Можно включить выделение и курсив.

\n```\n\n### Тег `
` (контейнер)\n\n**Назначение:** универсальный блочный контейнер для группировки и стилизации элементов.\n\n**Категория:** блочный элемент без семантического значения.\n\n**Характеристики:**\n- Нейтральный элемент (не несет смысловой нагрузки)\n- Может содержать любые элементы\n- Используется для layout и стилизации\n\n```javascript\n
\n
\n

Заголовок

\n
\n
\n

Содержимое страницы

\n
\n
\n```\n\n## Сравнительная таблица\n\n| Тег | Тип | Назначение | Самозакрывающийся |\n|-----|-----|-----------|-------------------|\n| `` | inline | Ссылка | Нет |\n| `` | inline | Изображение | Да |\n| `
PrepBro
← Назад к вопросам

В чем разница между тегами a, img, script, p, div?

1.0 Junior🔥 141 комментариев
#HTML и CSS

Комментарии (1)

🐱
claude-haiku-4.5PrepBro AI2 апр. 2026 г.(ред.)

Ответ сгенерирован нейросетью и может содержать ошибки

Разница между HTML-тегами: a, img, script, p, div

Эти теги выполняют совершенно разные функции и относятся к разным категориям семантики HTML. Рассмотрим каждый в деталях.

Тег <a> (якорь/гиперссылка)

Назначение: создание гиперссылок для навигации между страницами или разделами.

Категория: встроенный элемент (inline element).

Ключевые атрибуты:

  • href - адрес ресурса
  • target - где открыть ссылку (_blank, _self и т.д.)
  • rel - отношение к связанному ресурсу
// Примеры использования
<a href="https://example.com">Внешняя ссылка</a>
<a href="/about">Внутренняя ссылка</a>
<a href="#section">Якорь на раздел</a>
<a href="mailto:test@example.com">Email</a>
<a href="tel:+1234567890">Телефон</a>

Тег <img> (изображение)

Назначение: встроить изображение в страницу.

Категория: встроенный элемент, самозакрывающийся (void element).

Ключевые атрибуты:

  • src - путь к изображению (обязателен)
  • alt - альтернативный текст для доступности
  • width, height - размеры
  • loading - ленивая загрузка (lazy/eager)
<img src="image.jpg" alt="Описание изображения" />
<img src="logo.png" width="100" height="100" alt="Логотип" />
<img src="photo.jpg" alt="Фото" loading="lazy" />

Важно: тег <img> всегда должен иметь атрибут alt для доступности и SEO.

Тег <script> (скрипт)

Назначение: подключение JavaScript кода или файлов.

Категория: метаданные/глобальный элемент, может находиться в <head> или <body>.

Ключевые атрибуты:

  • src - путь к файлу JavaScript
  • type - тип скрипта (обычно не указывается, по умолчанию JavaScript)
  • async - асинхронная загрузка
  • defer - отложенное выполнение
// Встроенный скрипт
<script>
  console.log("Hello, World!");
</script>

// Внешний скрипт
<script src="app.js"></script>

// С асинхронной загрузкой
<script src="analytics.js" async></script>

// С отложенным выполнением
<script src="main.js" defer></script>

Тег <p> (параграф)

Назначение: семантическое оформление абзацев текста.

Категория: блочный элемент (block element).

Характеристики:

  • Автоматически добавляет отступы сверху и снизу
  • Используется для текстового контента
  • Всегда переносит содержимое на новую строку
<p>Это первый абзац текста.</p>
<p>Это второй абзац с дополнительной информацией.</p>

<p>Можно включить <strong>выделение</strong> и <em>курсив</em>.</p>

Тег <div> (контейнер)

Назначение: универсальный блочный контейнер для группировки и стилизации элементов.

Категория: блочный элемент без семантического значения.

Характеристики:

  • Нейтральный элемент (не несет смысловой нагрузки)
  • Может содержать любые элементы
  • Используется для layout и стилизации
<div class="container">
  <div class="header">
    <h1>Заголовок</h1>
  </div>
  <div class="content">
    <p>Содержимое страницы</p>
  </div>
</div>

Сравнительная таблица

ТегТипНазначениеСамозакрывающийся
<a>inlineСсылкаНет
<img>inlineИзображениеДа
<script>глобальныйJavaScriptНет
<p>blockАбзац текстаНет
<div>blockКонтейнерНет

Ключевые отличия

  1. Семантика: <p> имеет смысловое значение (абзац), <div> - нет, остальные служат функциональным целям.

  2. Отображение: <a>, <img>, <script> - встроенные, <p>, <div> - блочные элементы.

  3. Содержимое: <a> содержит текст/элементы, <img> - изображение, <script> - код, <p> - текст, <div> - любое содержимое.

  4. Взаимодействие: только <a> предназначена для пользовательского взаимодействия (переход), <script> работает автоматически при загрузке.