0Pricing
HTML Academy · Lekcja

Adresy URL bezwzględne a względne

Zrozumieć różnicę między ścieżkami bezwzględnymi i względnymi.

Adresy URL bezwzględne a względne to bezpłatna lekcja HTML Academy na CoddyKit. To lekcja 2 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej HTML Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs HTML Academy zawiera 4 lekcji w sumie.

Czym jest URL?

URL (Uniform Resource Locator) to pełny adres zasobu w sieci.

URL składa się z następujących części:

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

Absolutne adresy URL

Absolutny adres URL zawiera pełny adres — protokół, domenę i ścieżkę:

<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 -->

Względne adresy URL

Względny adres URL odnosi się do bieżącej lokalizacji strony — nie wymaga protokołu ani domeny:

<!-- 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 -->

Trzy rodzaje względnych adresów URL

Względne adresy URL występują w trzech formach:

<!-- 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="">

Przechodzenie za pomocą ../ --

Użyj ../, aby przejść o jeden poziom katalogu wyżej:

<!-- 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 -->

Kiedy używać adresów absolutnych, a kiedy względnych

Wskazówka:

  • Zasoby zewnętrzne — zawsze absolutne: https://...
  • Zasoby CDN — absolutne lub względne względem protokołu
  • Nawigacja wewnętrzna — względne względem katalogu głównego (/page) są najbezpieczniejsze
  • Ten sam katalog — względne (page.html) są wygodne

Adresy względne względem katalogu głównego są przenośne

Adresy URL względne względem katalogu głównego (/path) pozostają poprawne po przeniesieniu strony:

<!-- 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 -->

Element base

Element <base> w elemencie <head> ustawia bazowy URL dla wszystkich względnych odnośników:

<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>

Kodowanie adresów URL

Znaki specjalne w adresach URL muszą być kodowane procentowo:

<!-- 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
-->

Kanoniczne adresy URL

Jeśli stronę można otworzyć pod wieloma adresami URL, użyj tagu kanonicznego, aby wskazać preferowany adres:

<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 -->

Najlepsze praktyki dotyczące adresów URL

Należy stosować następujące konwencje dotyczące adresów URL:

  • Używaj wyłącznie małych liter
  • Używaj łączników zamiast podkreśleń do oddzielania słów
  • Adresy URL powinny być krótkie i opisowe
  • Unikaj znaków specjalnych — koduj je
  • W przypadku odnośników wewnętrznych używaj adresów względnych względem katalogu głównego

Szybkie sprawdzenie

Masz plik pod adresem /blog/post.html i chcesz utworzyć odnośnik do /about.html. Jaki jest najbezpieczniejszy względny adres URL?

Podsumowanie: absolutne i względne adresy URL

Podsumowanie rodzajów adresów URL:

  • Absolutny — pełny URL zawierający protokół i domenę
  • Względny względem katalogu głównego — zaczyna się od / i odnosi się do katalogu głównego domeny
  • Względny — odnosi się do lokalizacji bieżącego pliku
  • ../ — przejście o jeden poziom katalogu wyżej
  • <base href> — ustawia bazę dla wszystkich względnych adresów URL

Często zadawane pytania

Czy lekcja „Adresy URL bezwzględne a względne” jest bezpłatna?

Tak — pełny tekst „Adresy URL bezwzględne a względne” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu HTML Academy, przejdź na CoddyKit PRO. Kurs HTML Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Adresy URL bezwzględne a względne”?

Zrozumieć różnicę między ścieżkami bezwzględnymi i względnymi. Ćwiczysz HTML Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć HTML Academy?

Nie wymagamy żadnego doświadczenia. HTML Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 2 z 4.

Ile czasu zajmuje lekcja „Adresy URL bezwzględne a względne”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji HTML Academy?

Tak. Każda lekcja HTML Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

  1. Element anchor i atrybut href
  2. Adresy URL bezwzględne a względne
  3. Otwieranie odnośników w nowych kartach i atrybut download
  4. Odnośniki do sekcji i identyfikatory fragmentów
← Powrót do HTML Academy