0Pricing
HTML Academy · Урок

Абсолютные и относительные URL

Разберитесь в различиях между абсолютными и относительными путями

«Абсолютные и относительные URL» — бесплатный урок HTML Academy на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения HTML Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс HTML Academy содержит 4 уроков всего.

Что такое URL?

URL (унифицированный указатель ресурсов) — это полный адрес ресурса в интернете.

URL состоит из следующих частей:

https://example.com:443/products/widget?color=red#reviews
│     │           │   │               │          │
│     │           │   │               │          └─ Fragment
│     │           │   │               └─ Query string
│     │           │   └─ Path
│     │           └─ Port
│     └─ Domain
└─ Protocol

Абсолютные URL

Абсолютный URL содержит полный адрес — протокол, домен и путь:

<a href="https://example.com/about">About</a>
<img src="https://cdn.example.com/logo.png" alt="Logo">

<!-- Absolute URLs work from anywhere -->
<!-- Use for: external sites, CDN resources, canonical tags -->

Относительные URL

Относительный URL задаётся относительно расположения текущей страницы — протокол и домен не требуются:

<!-- Current page: https://example.com/blog/post.html -->

<a href="other-post.html">Same folder</a>
<!-- → https://example.com/blog/other-post.html -->

<a href="../products">Parent folder</a>
<!-- → https://example.com/products -->

<a href="/contact">Root relative</a>
<!-- → https://example.com/contact -->

Три типа относительных URL

Относительные URL бывают трёх видов:

<!-- 1. Relative to current file's folder -->
<a href="page.html">Same directory</a>

<!-- 2. Root-relative: starts with / (relative to domain root) -->
<a href="/about">Root-relative</a>

<!-- 3. Protocol-relative: starts with // -->
<img src="//cdn.example.com/img.png" alt="">

Переход с помощью ../ --

Используйте ../, чтобы подняться на один уровень каталога:

<!-- File structure:
/
├── index.html
├── about.html
└── blog/
    ├── post1.html
    └── post2.html
-->

<!-- In blog/post1.html: -->
<a href="post2.html">Post 2</a>          <!-- same folder -->
<a href="../">Home</a>                   <!-- up one level -->
<a href="../about.html">About</a>        <!-- up then file -->

Когда использовать абсолютные и относительные URL

Рекомендации:

  • Внешние ресурсы — всегда абсолютные: https://...
  • Ресурсы CDN — абсолютные или относительные к протоколу
  • Внутренняя навигация — относительные от корня (/page) являются самым безопасным вариантом
  • Тот же каталог — относительные (page.html) удобны

Относительные от корня URL переносимы

Относительные от корня URL (/path) продолжают работать при перемещении страниц:

<!-- If this page moves from /blog/post.html to /articles/post.html -->

<!-- Root-relative STILL works: -->
<a href="/contact">Contact</a>  <!-- always → example.com/contact -->

<!-- Relative MAY break: -->
<a href="../contact.html">Contact</a>  <!-- different result in new location -->

Элемент base

Элемент <base> в <head> задаёт базовый URL для всех относительных ссылок:

<head>
  <base href="https://example.com/docs/">
</head>
<body>
  <!-- This resolves to: https://example.com/docs/guide.html -->
  <a href="guide.html">Guide</a>
</body>

Кодирование URL

Специальные символы в URL должны быть закодированы в процентном формате:

<!-- Space in URL path -->
<a href="/pages/my%20page.html">My Page</a>

<!-- Query string with special characters -->
<a href="/search?q=HTML%20%26%20CSS">Search HTML & CSS</a>

<!-- Common encodings:
  space → %20
  & → %26
  = → %3D
  # → %23
-->

Канонические URL

Если страницу можно открыть по нескольким URL, используйте канонический тег, чтобы объявить предпочтительный URL:

<head>
  <!-- Prevents duplicate content SEO penalty -->
  <link rel="canonical" href="https://example.com/blog/post">
</head>
<!-- Both /blog/post and /blog/post.html may serve the same content -->
<!-- Canonical tells Google which URL to index -->

Рекомендации по URL

Следуйте этим соглашениям при создании URL:

  • Используйте только строчные буквы
  • Разделяйте слова дефисами, а не символами подчёркивания
  • Делайте URL короткими и понятными
  • Избегайте специальных символов — кодируйте их
  • Для внутренних ссылок используйте относительные от корня URL

Проверка

У вас есть файл по адресу /blog/post.html, и вы хотите создать ссылку на /about.html. Какой относительный URL будет самым безопасным?

Итоги: абсолютные и относительные URL

Кратко о типах URL:

  • Абсолютный — полный URL, включая протокол и домен
  • Относительный от корня — начинается с / и задаётся относительно корня домена
  • Относительный — задаётся относительно расположения текущего файла
  • ../ — переход на один уровень каталога вверх
  • <base href> — задаёт основу для всех относительных URL

Часто задаваемые вопросы

Урок «Абсолютные и относительные URL» бесплатный?

Да — полный текст урока «Абсолютные и относительные URL» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс HTML Academy, подпишись на CoddyKit PRO. Курс HTML Academy содержит 4 уроков всего.

Чему я научусь в уроке «Абсолютные и относительные URL»?

Разберитесь в различиях между абсолютными и относительными путями Ты практикуешь HTML Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать HTML Academy?

Предыдущий опыт не требуется. HTML Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.

Сколько времени занимает урок «Абсолютные и относительные URL»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке HTML Academy?

Да. Каждый урок HTML Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

  1. Элемент anchor и атрибут href
  2. Абсолютные и относительные URL
  3. Открытие ссылок в новых вкладках и атрибут download
  4. Ссылки на разделы и идентификаторы фрагментов
← Назад к HTML Academy