Typische Tags

Erste Schritte: Typische Tags: <div>, <p>, <a>, <img>, <form>

Die folgenden Tags sind der Grundstock fast jeder Website und begleiten dich durch die gesamte Webentwicklung. Wenn du PHP lernen möchtest, wirst du sie immer wieder brauchen, um Inhalte, Links, Bilder und Formulare auf deinen Seiten zu platzieren. In diesem Tutorial bekommst du einen Überblick, wie und wann du diese wichtigen HTML-Elemente am besten einsetzt.

<div> – Der Container für Layout und Struktur

Das <div>-Element (Division) wird meist als „Container“ oder „Box“ genutzt, um größere Bereiche oder Gruppen von Elementen in deinem HTML-Dokument zusammenzufassen. Alle Block-Elemente wie <p>, <h1>, <ul> können innerhalb eines <div> liegen.

<div class="container">
    <h1>Titel</h1>
    <p>Einleitender Text...</p>
</div>

Indem du class– oder id-Attribute verwendest (z. B. class=“container“), kannst du das <div> zielgerichtet mit CSS oder JavaScript ansprechen.

<p> – Absatz für Fließtext

Das <p>-Element steht für „Paragraph“ und dient dazu, zusammenhängenden Text in Absätzen zu organisieren.

<p>
    Dieser Text wird als eigenständiger Absatz behandelt.
    Du kannst hier mehrere Zeilen Text unterbringen.
</p>

Mehrere <p>-Elemente ergeben mehrere Absätze. Für Überschriften nutzt du hingegen <h1>…</h1>, <h2>…</h2> usw.

<a> – Links zu anderen Seiten oder Bereichen

Mit dem <a>-Tag erstellst du anklickbare Links. Das href-Attribut gibt die Ziel-Adresse an.

<a href="https://www.example.com">
    Besuche example.com
</a>

1. Externe Links: <a href=“https://…“> führen zu anderen Websites.
2. Interne Links: <a href=“/deine-seite.html“> oder <a href=“about.html“> verweisen auf Seiten innerhalb deines Projekts.
3. Anker-Links: Mit <a href=“#abschnitt“> kannst du zu einem bestimmten Bereich springen, den du ggf. mit id=“abschnitt“ markiert hast.

<img> – Bilder einbinden

Mit <img> bindest du Grafiken ein. Wichtig sind das src-Attribut (Quelle des Bildes) und das alt-Attribut (alternativer Text für Screenreader oder wenn das Bild nicht geladen werden kann).

<img src="bilder/logo.png" alt="Mein Logo" width="200" height="100">

Weitere Attribute wie width und height kannst du nutzen, um die Anzeigegröße des Bildes zu steuern. Du kannst Bilder auch per CSS (z. B. in einem <div> als Hintergrundbild) einbinden oder ihnen eigene Klassen geben, um sie zu stylen.

<form> – Benutzerinteraktionen erfassen

Das <form>-Element ist unverzichtbar, wenn du in PHP Benutzereingaben verarbeiten möchtest. Darin platzierst du Eingabefelder, Textareas, Radiobuttons, Checkboxen oder Submit-Buttons.

<form action="verarbeiten.php" method="POST">
    <label for="username">Benutzername</label>
    <input type="text" id="username" name="username">

    <label for="nachricht">Nachricht</label>
    <textarea id="nachricht" name="nachricht"></textarea>

    <button type="submit">Abschicken</button>
</form>

1. action: URL oder Skript, an die die Formulardaten gesendet werden (z. B. verarbeiten.php).
2. method: „GET“ oder „POST“. POST ist sicherer bei sensiblen Daten und meist Standard, wenn man Daten speichern oder verarbeiten will.
3. label: Beschriftet das Eingabefeld, was der Barrierefreiheit dient. for=“username“ verknüpft es mit dem id=“username“ des Feldes.
4. input, textarea, button: Die eigentlichen Formularelemente.

Zusammenspiel dieser Tags

In einer typischen Seite finden sich <div>-Container, die <p>-Texte enthalten,
Bilder (<img>), Links (<a>) sowie ein Formular (<form>) für Benutzereingaben.
Jedes dieser Elemente hat seine eigene Funktion:

• <div> gliedert dein Layout.
• <p> kümmert sich um Absatz-Text.
• <a> verlinkt intern oder extern.
• <img> zeigt Bilder an.
• <form> sammelt Nutzerinformationen (z. B. Login, Kontakt, Bestellung).

Beispiel: Kleine „About me“-Seite

<div class="about-section">
    <h1>Über mich</h1>
    <p>Mein Name ist Anna, und ich bin Webentwicklerin.</p>
    <img src="img/anna.jpg" alt="Foto von Anna" />

    <p>
        Schau dir gerne meine 
        <a href="/projekte.html">Projekte</a> an.
    </p>

    <form action="kontakt.php" method="POST">
        <label for="email">Deine E-Mail:</label>
        <input type="email" id="email" name="email">

        <button type="submit">Kontakt aufnehmen</button>
    </form>
</div>

Fazit

Die Tags <div>, <p>, <a>, <img> und <form> sind der Kern jeder HTML-Seite, unabhängig davon, ob du nur statische Inhalte zeigen oder mithilfe von PHP dynamische Webanwendungen erstellen willst. Du gruppierst Bereiche mit <div>, schreibst Absätze in <p>, fügst Bilder mit <img> hinzu, verlinkst mit <a> und baust Formulare mit <form> für die Benutzerinteraktion auf. Sobald du diese Grundlagen beherrschst, wirst du leichter verstehen, wie das Zusammenspiel von HTML und PHP funktioniert und wie du eingereichte Daten (z. B. Formular-Inhalte) in deinem PHP-Skript weiterverarbeiten kannst.