Атрибут href тега <link>

Описание

Атрибут href в теге <link> указывает URL-адрес внешнего ресурса, который связывается с текущим документом. Это основной атрибут, определяющий, какой ресурс будет загружен или связан.

Пример использования:
<!-- Подключение CSS файла --> <link rel="stylesheet" href="styles.css"> <!-- Подключение иконки сайта --> <link rel="icon" href="favicon.ico"> <!-- Предзагрузка ресурса --> <link rel="preload" href="important-image.jpg" as="image">

Основные типы ресурсов:

Тип ресурса Пример Атрибуты
CSS стили href="theme.css" rel="stylesheet"
Иконки href="favicon.ico" rel="icon"
Шрифты href="font.woff2" rel="preload" as="font"
Документы href="page.html" rel="prefetch"

Форматы URL:

  • Абсолютные пути: href="https://example.com/style.css"
  • Относительные пути: href="/assets/css/main.css"
  • Пути относительно документа: href="styles/print.css"
  • Data URL: href="data:text/css;base64,..."

Пример с медиа-запросами:

<!-- Адаптивные стили --> <link rel="stylesheet" href="mobile.css" media="(max-width: 768px)"> <link rel="stylesheet" href="desktop.css" media="(min-width: 769px)">

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

  • Используйте абсолютные пути для CDN-ресурсов
  • Для локальных файлов предпочитайте относительные пути
  • Минимизируйте количество link-запросов (объединяйте CSS-файлы)
  • Для критически важных ресурсов используйте rel="preload"
  • Всегда указывайте правильный rel для типа ресурса

Оптимизация производительности:

<!-- Предзагрузка критических ресурсов --> <link rel="preload" href="font.woff2" as="font" crossorigin> <link rel="preload" href="hero-image.webp" as="image"> <!-- Отложенная загрузка неважных стилей --> <link rel="stylesheet" href="non-critical.css" media="print" onload="this.media='all'">

Ошибки и проверка:

  • 404 ошибка - неправильный путь к файлу
  • CORS ошибки - отсутствие crossorigin для шрифтов
  • Дублирование ресурсов - несколько link на один файл
  • Отсутствие обязательных атрибутов (rel, as для preload)

Примечание: Атрибут href является основным для элемента <link> и должен использоваться в сочетании с соответствующими атрибутами (rel, as, type). Для современных веб-приложений рассмотрите использование модульных систем сборки для автоматического управления ресурсами.