Kontakt und Projektanfragen: Corporate Designs, Grafikdesigns und moderne Contao Websites – Kay Eickhoff visuelle Kommunikation. — Ansprechpartner und Direktkontakt: Kay Eickhoff.

Von Kay Eickhoff

Was bedeutet HTML (Hypertext Markup Language)?

Mit HTML werden Inhalte auf einer Website strukturiert und gekennzeichnet.

HTML ist die Abkürzung für „Hypertext Markup Language“. Es ist eine Auszeichnungssprache, die die grundlegende Struktur für Inhalte auf Webseiten bildet. HTML ermöglicht es, Informationen auf einer Webseite semantisch zu strukturieren und zu kennzeichnen. Diese Strukturierung erfolgt mithilfe von HTML-Elementen und -Tags.

1) Warum ist eine gute HTML-Struktur wichtig?

Semantik und Barrierefreiheit: Eine klare HTML-Struktur verbessert die Semantik einer Webseite. Durch die Verwendung semantisch korrekter Tags wird nicht nur die Bedeutung des Inhalts für den Browser, sondern auch für assistive Technologien wie Screenreader deutlich. Dies trägt zur Barrierefreiheit der Webseite bei, da Menschen mit unterschiedlichen Fähigkeiten den Inhalt besser verstehen können.
SEO (Suchmaschinenoptimierung): Suchmaschinen bevorzugen gut strukturierte Webseiten. Eine klare und semantisch korrekte HTML-Struktur erleichtert Suchmaschinen-Algorithmen das korrekte Verstehen des Inhalts. Das kann sich positiv auf das Ranking der Webseite in den Suchergebnissen auswirken.
Wartbarkeit und Weiterentwicklung: Eine gut strukturierte HTML-Datei erleichtert die Wartung der Webseite. Entwickler können schneller Änderungen vornehmen und neuen Code hinzufügen, wenn die Struktur des HTML-Codes logisch und konsistent ist. Dies ist besonders wichtig bei größeren Webprojekten oder bei der Weiterentwicklung einer Webseite über die Zeit.
Konsistenz im Design: Eine klare Struktur fördert die Konsistenz im Design und trägt dazu bei, das Erscheinungsbild und die Benutzererfahrung einer Website zu verbessern. Durch eine einheitliche Verwendung von HTML-Tags wird sichergestellt, dass ähnliche Elemente auf der Webseite auch konsistent gestaltet sind. Das trägt dazu bei, ein einheitliches Erscheinungsbild über alle Seiten der Webseite hinweg zu gewährleisten und die Benutzererfahrung zu optimieren.

2) Strukturierung und Layout mit HTML-Elementen:

HTML-Elemente sind eine Struktureinheit in HTML und bilden eine Kombination aus dem Anfangs (<)- und Endtag (>) sowie dem Inhalt dazwischen. Sie sind grundlegend für die Strukturierung und das Layout von Webseiten und dienen dazu, den Inhalt einer Webseite in verschiedene Abschnitte zu unterteilen und dessen Bedeutung und Beziehung zu anderen Inhalten anzugeben. Hier sind einige Hauptgründe, warum HTML-Elemente benötigt werden:

<p> definiert einen Absatz:

<p>Dies ist ein Beispieltext für einen Absatz.</p>

<h1> bis <h6> definieren Überschriften unterschiedlicher Hierarchieebenen:

<h1>Dies ist eine Überschrift der Ebene 1</h1>
<h2>Dies ist eine Überschrift der Ebene 2</h2>

<a> definiert einen Hyperlink:

<a href="https://www.example.de">Das ist ein Beispiel-Link</a>

<img> fügt ein Bild ein:

<img src="bild.jpg" alt="Alternativer Text">

<ul> und <li> erstellen eine ungeordnete Liste:

<ul>
    <li>Element 1</li>
    <li>Element 2</li>
</ul>

<ol> und <li> erstellen eine geordnete Liste:

<ol>
    <li>Erstes Element</li>
    <li>Zweites Element</li>
</ol>

<span> definiert einen Bereich innerhalb eines Dokuments:

<p>Ein <span>besonderer</span> Textbereich.</p>

3) Beispiel für den klassischen HTML-Aufbau einer Website:

<!DOCTYPE html>
<html lang="de">
<head>
    <!-- Metadaten -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Meine Webseite</title>
    <!-- Verknüpfung mit externem Stylesheet -->
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <!-- Kopfbereich der Webseite -->
    <header>
        <h1>Willkommen auf meiner Webseite</h1>
        <!-- Navigationsmenü -->
        <nav>
            <ul>
                <li><a href="#">Startseite</a></li>
                <li><a href="#">Über uns</a></li>
                <li><a href="#">Kontakt</a></li>
            </ul>
        </nav>
    </header>

    <!-- Hauptinhalt der Webseite -->
    <main>
        <!-- Erster Abschnitt -->
        <section>
            <h2>Über uns</h2>
            <p>Hier steht etwas über uns.</p>
        </section>

        <!-- Zweiter Abschnitt -->
        <section>
            <h2>Kontakt</h2>
            <p>Kontaktinformationen finden Sie hier.</p>
        </section>
    </main>

    <!-- Fußbereich der Webseite -->
    <footer>
        <p>&copy; 2024 Meine Webseite. Alle Rechte vorbehalten.</p>
    </footer>

    <!-- Ein div-Bereich für zusätzliche Strukturierung -->
    <div class="additional-content">
        <h2>Zusätzlicher Inhalt</h2>
        <p>Dies ist ein weiterer Abschnitt für zusätzlichen Inhalt.</p>
    </div>
</body>
</html>

Erklärung des Aufbaus:

<!DOCTYPE html>: Dies definiert die Version des HTML-Dokuments.
<html lang="de">: Der html-Tag umschließt den gesamten Inhalt der Webseite und definiert die Sprache als Deutsch.
<head>: Dieser Abschnitt enthält Metadaten wie den Zeichensatz, die Viewport-Einstellungen, den Seitentitel und Links zu externen Ressourcen wie Stylesheets oder Skripten.
<meta charset="UTF-8">: Definiert den Zeichensatz als UTF-8 für internationalen Zeichensatz.
<meta name="viewport" content="width=device-width, initial-scale=1.0">: Legt die Darstellung auf Mobilgeräten fest.
<title>Meine Webseite</title>: Definiert den Titel der Webseite, der im Browser-Tab angezeigt wird.
<link rel="stylesheet" href="styles.css">: Verknüpft die Webseite mit einer externen CSS-Datei.
<body>: Hier beginnt der Hauptinhalt der Webseite.
<header>: Enthält den Kopfbereich der Webseite, typischerweise mit Logo, Überschrift und Navigationsmenü.
<nav>: Definiert das Navigationsmenü der Webseite.
<main>: Der Hauptinhalt der Webseite, typischerweise in Abschnitte <section> unterteilt.
<section>: Ein Abschnitt des Hauptinhalts mit Überschrift <h2> und Textabschnitt.
<footer>: Enthält den Fußbereich der Webseite, der oft Copyright-Informationen und Links enthält.
<div>: Allgemeines Container-Element, das keine spezifische semantische Bedeutung hat. In diesem Beispiel wurde ein div-Tag verwendet, um einen zusätzlichen Abschnitt auf der Webseite zu erstellen.

Fazit: Die grundlegende Struktur für Inhalte auf Webseiten!

Insgesamt ist eine gute HTML-Struktur entscheidend für die technische Umsetzung einer Webseite und hat Auswirkungen auf die Benutzerfreundlichkeit, Barrierefreiheit, Suchmaschinenoptimierung und die Effizienz der Weiterentwicklung. Durch die richtige Verwendung von HTML-Elementen und -Tags können Entwickler eine klare und sinnvolle Struktur schaffen, die nicht nur den Entwicklungsprozess vereinfacht, sondern auch die Benutzererfahrung verbessert und die Auffindbarkeit der Webseite in Suchmaschinen erhöht.