HTML Links & Anker

HTML Kopieren

<!-- Externer Link -->
<a href="https://www.wikipedia.org" target="_blank">Wikipedia öffnen</a>

<!-- Interner Link -->
<a href="kontakt.html">Kontaktseite</a>

HTML Kopieren

<!-- Zielbereich mit ID -->
<h2 id="kapitel2">Kapitel 2</h2>

<!-- Link zum Anker -->
<a href="#kapitel2">Zu Kapitel 2 springen</a>

HTML Kopieren

<!-- Einfacher E-Mail-Link -->
<a href="mailto:info@beispiel.de">E-Mail schreiben</a>

<!-- Mit vorausgefülltem Betreff -->
<a href="mailto:info@beispiel.de?subject=Anfrage">Anfrage senden</a>

<!-- Mit Betreff und Text -->
<a href="mailto:info@beispiel.de?subject=Anfrage&body=Hallo,%20ich%20habe%20eine%20Frage...">
    Kontakt aufnehmen
</a>

<!-- Mit CC und BCC -->
<a href="mailto:info@beispiel.de?cc=kopie@beispiel.de&bcc=geheim@beispiel.de">
    E-Mail mit Kopie
</a>

HTML Kopieren

<!-- Telefon-Link (internationales Format empfohlen) -->
<a href="tel:+4922112345678">+49 221 12345678</a>

<!-- Mit aria-label für Screenreader -->
<a href="tel:+4922112345678" aria-label="Anrufen: 0221 12345678">
    Jetzt anrufen
</a>

HTML Kopieren

<!-- SMS-Link -->
<a href="sms:+4915012345678">SMS senden</a>

<!-- Mit vorausgefülltem Text (iOS) -->
<a href="sms:+4915012345678&body=Hallo!">SMS mit Text</a>

<!-- Mit vorausgefülltem Text (Android) -->
<a href="sms:+4915012345678?body=Hallo!">SMS mit Text</a>

HTML Kopieren

<!-- Download mit Original-Dateinamen -->
<a href="/dokumente/bericht.pdf" download>
    Bericht herunterladen (PDF)
</a>

<!-- Download mit benutzerdefiniertem Dateinamen -->
<a href="/dokumente/report-2024-q4.pdf" download="Jahresbericht-2024.pdf">
    Jahresbericht herunterladen
</a>

HTML Kopieren

<a href="/files/handbuch.pdf" download class="download-link">
    📄 Handbuch herunterladen
    <span class="file-info">(PDF, 2.4 MB)</span>
</a>

HTML Kopieren

<a href="/files/daten.csv" 
   download="export.csv" 
   type="text/csv">
    CSV-Export herunterladen
</a>

<a href="/files/archiv.zip" 
   download 
   type="application/zip">
    ZIP-Archiv herunterladen
</a>

HTML Kopieren

<!-- ❌ Ohne Beschreibung - Screenreader liest nur "Link" -->
<a href="https://twitter.com/beispiel">
    <svg>...</svg>
</a>

<!-- ✅ Mit aria-label -->
<a href="https://twitter.com/beispiel" aria-label="Folge uns auf Twitter">
    <svg aria-hidden="true">...</svg>
</a>

<!-- ✅ Alternative: Visuell versteckter Text -->
<a href="https://twitter.com/beispiel">
    <svg aria-hidden="true">...</svg>
    <span class="visually-hidden">Folge uns auf Twitter</span>
</a>

HTML Kopieren

<!-- Mit visuellem Hinweis und Screenreader-Text -->
<a href="https://example.com" 
   target="_blank" 
   rel="noopener noreferrer">
    Externe Ressource
    <span aria-hidden="true">↗</span>
    <span class="visually-hidden">(öffnet in neuem Tab)</span>
</a>

CSS Kopieren

/* ❌ NIEMALS so! */
a:focus {
    outline: none;
}

/* ✅ Stattdessen: Eigenen Fokus-Style definieren */
a:focus {
    outline: 2px solid #4ecdc4;
    outline-offset: 2px;
}

/* ✅ Oder mit focus-visible (nur bei Tastatur) */
a:focus-visible {
    outline: 2px solid #4ecdc4;
    outline-offset: 2px;
}

CSS Kopieren

/* 1. :link - Unbesuchte Links */
a:link {
    color: #3498db;
    text-decoration: underline;
}

/* 2. :visited - Bereits besuchte Links */
a:visited {
    color: #9b59b6;
}

/* 3. :hover - Maus schwebt über dem Link */
a:hover {
    color: #2980b9;
    text-decoration: none;
}

/* 4. :focus - Link hat Tastaturfokus */
a:focus {
    outline: 2px solid #3498db;
    outline-offset: 2px;
}

/* 5. :active - Link wird gerade geklickt */
a:active {
    color: #e74c3c;
}

CSS Kopieren

/* Unterstrich nur bei Hover */
a {
    color: #3498db;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* Animierter Unterstrich */
a {
    text-decoration: none;
    background-image: linear-gradient(currentColor, currentColor);
    background-size: 0% 2px;
    background-position: 0 100%;
    background-repeat: no-repeat;
    transition: background-size 0.3s ease;
}

a:hover {
    background-size: 100% 2px;
}

/* Button-Style für Links */
a.btn {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    background: #3498db;
    color: white;
    text-decoration: none;
    border-radius: 4px;
    transition: background 0.2s ease;
}

a.btn:hover {
    background: #2980b9;
}

CSS Kopieren

/* Auf das gesamte Dokument anwenden */
html {
    scroll-behavior: smooth;
}

/* Oder nur für bestimmte Container */
.scroll-container {
    scroll-behavior: smooth;
    overflow-y: auto;
    max-height: 400px;
}

CSS Kopieren

/* Smooth Scroll nur wenn Nutzer es nicht deaktiviert hat */
@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

CSS Kopieren

/* Methode 1: scroll-padding auf html/body */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 80px; /* Höhe deines Headers */
}

/* Methode 2: scroll-margin auf den Ziel-Elementen */
[id] {
    scroll-margin-top: 80px;
}

/* Oder spezifischer */
h2[id], h3[id], h4[id] {
    scroll-margin-top: 100px;
}

JavaScript Kopieren

document.querySelectorAll('a[href^="#"]').forEach(anchor => {
    anchor.addEventListener('click', function(e) {
        const href = this.getAttribute('href');
        
        // Ignoriere leere Links
        if (href === '#') return;
        
        const target = document.querySelector(href);
        
        if (target) {
            e.preventDefault();
            
            // Header-Höhe berücksichtigen
            const headerOffset = 80;
            const elementPosition = target.getBoundingClientRect().top;
            const offsetPosition = elementPosition + window.pageYOffset - headerOffset;
            
            window.scrollTo({
                top: offsetPosition,
                behavior: 'smooth'
            });
        }
    });
});

HTML + CSS Kopieren

<!-- Link, der wie ein Button aussieht -->
<a href="/registrieren" class="btn btn-primary">
    Jetzt registrieren
</a>

CSS Kopieren

.btn {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-primary {
    background: #3498db;
    color: white;
}

.btn-primary:hover {
    background: #2980b9;
}