Linki wewnętrzne (identyfikatory)

Lekcja 5.3: Linki wewnętrzne (identyfikatory)

Strona główna > Rozdział 5: Linki > Linki wewnętrzne (identyfikatory)

Czym są linki wewnętrzne?

Linki wewnętrzne, często nazywane "kotwicami" (anchors) lub linkami do fragmentów, pozwalają na tworzenie nawigacji w obrębie tej samej strony HTML. Zamiast przenosić użytkownika do innego dokumentu, przewijają one stronę do określonego elementu, który został oznaczony unikalnym identyfikatorem (ID).

Są one niezwykle przydatne na długich stronach, umożliwiając szybkie przeskakiwanie do interesujących sekcji, np. w spisach treści, sekcjach FAQ czy długich artykułach.

Jak stworzyć link wewnętrzny?

Tworzenie linku wewnętrznego składa się z dwóch kroków:

Nadanie identyfikatora (ID) elementowi docelowemu: Element, do którego chcemy przeskoczyć (np. nagłówek sekcji, paragraf), musi posiadać unikalny atrybut id. Wartość id musi być unikalna na całej stronie.
Stworzenie linku wskazującego na ID: W atrybucie href znacznika <a> podajemy znak # (hash), a bezpośrednio po nim wartość atrybutu id elementu docelowego.

Przykład:

Załóżmy, że mamy na stronie sekcję o ID "kontakt":

<!-- Element docelowy -->
<h2 id="kontakt">Informacje kontaktowe</h2>
<p>Tutaj znajdują się dane kontaktowe...</p>

Aby stworzyć link, który przewinie stronę do tej sekcji, piszemy:

<!-- Link wewnętrzny -->
<a href="#kontakt">Przejdź do kontaktu</a>

Przejdź do przykładowej sekcji poniżej

(Pusta przestrzeń symulująca długą stronę)

Przykładowa sekcja docelowa

Kliknięcie linku powyżej powinno przewinąć stronę tutaj.

Wymagania dotyczące ID

Wartość atrybutu id musi być unikalna w całym dokumencie HTML. Nie mogą istnieć dwa elementy z tym samym ID.
Wartość id musi zawierać co najmniej jeden znak.
Wartość id nie może zawierać spacji.
W HTML5 wartość id może zawierać praktycznie dowolne znaki (oprócz spacji), ale dla zgodności i uniknięcia problemów zaleca się używanie liter (a-z, A-Z), cyfr (0-9), myślników (-) i podkreśleń (_), zaczynając od litery.

Linki wewnętrzne w spisach treści

Linki wewnętrzne są idealne do tworzenia klikalnych spisów treści na początku długich artykułów lub dokumentacji.

<h2>Spis treści</h2>
<ul>
    <li><a href="#wstep">Wstęp</a></li>
    <li><a href="#rozdzial1">Rozdział 1: Podstawy</a></li>
    <li><a href="#rozdzial2">Rozdział 2: Zaawansowane techniki</a></li>
    <li><a href="#podsumowanie">Podsumowanie</a></li>
</ul>

<!-- Treść artykułu -->
<h3 id="wstep">Wstęp</h3>
<p>... treść wstępu ...</p>

<h3 id="rozdzial1">Rozdział 1: Podstawy</h3>
<p>... treść rozdziału 1 ...</p>

<h3 id="rozdzial2">Rozdział 2: Zaawansowane techniki</h3>
<p>... treść rozdziału 2 ...</p>

<h3 id="podsumowanie">Podsumowanie</h3>
<p>... treść podsumowania ...</p>

Linkowanie do fragmentu na innej stronie

Można również stworzyć link, który przeniesie użytkownika do określonego fragmentu (identyfikatora) na innej stronie. W tym celu należy po adresie URL strony docelowej dodać znak # i ID fragmentu.

<a href="inna-strona.php#sekcja-specjalna">Przejdź do sekcji specjalnej na innej stronie</a>

Po kliknięciu tego linku przeglądarka najpierw załaduje stronę inna-strona.html, a następnie przewinie ją do elementu z id="sekcja-specjalna".

Płynne przewijanie (Smooth Scrolling)

Domyślnie przeglądarki wykonują natychmiastowy skok do elementu docelowego. Aby uzyskać efekt płynnego przewijania, można użyć właściwości CSS scroll-behavior.

html {
  scroll-behavior: smooth;
}

Dodanie tej reguły do arkusza stylów sprawi, że wszystkie linki wewnętrzne na stronie będą przewijać się płynnie.

Zadanie praktyczne (z rozwiązaniem)

Zadanie: Stwórz prostą stronę z trzema sekcjami (nagłówki <h2> z unikalnymi ID). Na górze strony umieść listę nienumerowaną z linkami wewnętrznymi do każdej z tych sekcji. Dodaj styl CSS dla płynnego przewijania.

Rozwiązanie:

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Linki Wewnętrzne</title>
    <style>
        html {
            scroll-behavior: smooth;
        }
        body {
            font-family: sans-serif;
        }
        section {
            height: 500px; /* Symulacja długiej treści */
            border-bottom: 1px solid #eee;
            padding-top: 20px;
        }
        nav ul {
            list-style: none;
            padding: 0;
        }
        nav li {
            margin-bottom: 5px;
        }
    </style>
</head>
<body>
    <h1>Nawigacja po stronie</h1>
    
    <nav>
        <ul>
            <li><a href="#sekcja1">Przejdź do Sekcji 1</a></li>
            <li><a href="#sekcja2">Przejdź do Sekcji 2</a></li>
            <li><a href="#sekcja3">Przejdź do Sekcji 3</a></li>
        </ul>
    </nav>

    <section id="sekcja1">
        <h2>Sekcja 1</h2>
        <p>Treść pierwszej sekcji...</p>
    </section>

    <section id="sekcja2">
        <h2>Sekcja 2</h2>
        <p>Treść drugiej sekcji...</p>
    </section>

    <section id="sekcja3">
        <h2>Sekcja 3</h2>
        <p>Treść trzeciej sekcji...</p>
    </section>

</body>
</html>

Dodatkowe zadania do samodzielnego wykonania:

Stwórz długą stronę z kilkoma paragrafami i dodaj link "Powrót do góry" na dole strony, który będzie prowadził do elementu na samej górze (np. do <body> lub specjalnego elementu z ID).
Stwórz dwie strony HTML (np. stronaA.html i stronaB.html). Na stronie A umieść link prowadzący do konkretnej sekcji (z ID) na stronie B.
Przetestuj, co się stanie, jeśli spróbujesz użyć tego samego ID dla dwóch różnych elementów na stronie.
Eksperymentuj z różnymi wartościami scroll-behavior (np. auto) lub usuń tę właściwość, aby zobaczyć różnicę w przewijaniu.

Najczęściej zadawane pytania

Jak stworzyć link do konkretnego miejsca na tej samej stronie?

Aby stworzyć link wewnętrzny, nadaj elementowi docelowemu unikalny atrybut id (np. <h2 id="cel">), a następnie w linku <a> użyj atrybutu href z wartością #id (np. <a href="#cel">).

Czy ID musi być unikalne?

Tak, wartość atrybutu id musi być absolutnie unikalna w całym dokumencie HTML. Użycie tego samego ID dla wielu elementów jest błędem i może prowadzić do nieprzewidywalnego działania linków wewnętrznych i skryptów JavaScript.

Jak zrobić, żeby strona płynnie przewijała się do sekcji?

Aby uzyskać efekt płynnego przewijania (smooth scrolling) dla linków wewnętrznych, dodaj do swojego arkusza CSS regułę: html { scroll-behavior: smooth; }. Sprawi to, że przeglądarka będzie animować przewijanie zamiast wykonywać natychmiastowy skok.

Czy można linkować do ID na innej stronie?

Tak, można stworzyć link do konkretnego fragmentu na innej stronie. W atrybucie href podaj najpierw adres URL strony docelowej, a następnie dodaj znak # i ID fragmentu, np. href="inna-strona.php#sekcja".

Jakie znaki są dozwolone w ID?

W HTML5 wartość ID może zawierać prawie wszystkie znaki oprócz spacji. Jednak dla najlepszej kompatybilności i uniknięcia problemów, zaleca się używanie liter, cyfr, myślników (-) i podkreśleń (_), zaczynając od litery.