Атрибут id тега <p>

Описание

Атрибут id задаёт уникальный идентификатор для элемента <p>, который может использоваться для:

  • Стилизации через CSS
  • Обращения к элементу в JavaScript
  • Создания якорных ссылок для навигации
Пример использования:
<p id="main-description"> Этот абзац имеет уникальный идентификатор для стилизации и управления. </p> <!-- Ссылка на якорь --> <a href="#main-description">Перейти к описанию</a>

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

Правило Пример Некорректный пример
Уникальность id="intro-text" Повторение id на странице
Без пробелов id="section1" id="section 1"
Чувствительность к регистру id="Main" ≠ id="main" -

Использование в CSS:

<style> #special-paragraph { font-size: 1.2em; color: #0066cc; border-left: 3px solid #0066cc; padding-left: 10px; } </style> <p id="special-paragraph"> Этот абзац имеет уникальное оформление через CSS. </p>

Использование в JavaScript:

<p id="dynamic-text">Исходный текст</p> <button onclick="changeText()">Изменить текст</button> <script> function changeText() { document.getElementById('dynamic-text').textContent = 'Новый текст!'; } </script>

Рекомендации по использованию:

  • Используйте осмысленные имена, отражающие назначение элемента
  • Избегайте общих имен типа "paragraph1", "paragraph2"
  • Придерживайтесь единого стиля именования (kebab-case или camelCase)
  • Для стилизации нескольких элементов используйте классы

Особенности работы:

  • Элемент можно получить через document.getElementById()
  • ID становится глобальной переменной (не рекомендуется полагаться на это)
  • Высокая специфичность в CSS (0100)
  • Может использоваться в ARIA-атрибутах для доступности

Примечание: Хотя атрибут id полезен для работы с конкретными элементами, в современных фреймворках (React, Vue, Angular) чаще используют ссылки на элементы или state-менеджмент вместо прямого манипулирования DOM через идентификаторы.