HTML-Spickzettel: Der ultimative Leitfaden für schnelle Referenz

Wichtige HTML-Tags und ihre Verwendung

Wenn du mit HTML arbeitest, solltest du dich mit den wichtigsten HTML-Tags und ihrer Verwendung vertraut machen. Diese Tags bilden das Grundgerüst deiner Webseite und ermöglichen es dir, Inhalte zu strukturieren, formatieren und mit anderen zu verknüpfen.

Struktur-Tags

<h1> bis <h6>: Erstelle Überschriften verschiedener Ebenen, wobei <h1> die wichtigste ist. <p>: Erstelle Absätze. <div>: Erstelle Abschnitte und organisiere Inhalte. <nav>: Definiere Navigationsbereiche. <header>: Definiere den Kopfbereich der Seite, der in der Regel das Logo, die Menüs und andere globale Elemente enthält.

Textformatierung

<b>: Fettdruck. <i>: Kursivdruck. <u>: Unterstreichung. <del>: Durchgestrichener Text. <ins>: Eingefügter Text. <small>: Kleiner Text. <mark>: Markiert Text, um ihn hervorzuheben.

Listen

<ul>: Erstelle ungeordnete Listen. <ol>: Erstelle geordnete Listen. <li>: Erstelle Listenelemente.

Multimedia

<img>: Füge Bilder ein. <video>: Füge Videos ein. <audio>: Füge Audio ein. <iframe>: Bette Inhalte von anderen Websites ein, z. B. YouTube-Videos oder Google Maps.

Verlinkung

<a>: Erstelle Hyperlinks, um auf andere Inhalte zu verweisen. <link>: Verknüpfe externe Stylesheets oder Skripte.

Formulare

<form>: Erstelle Formulare zur Datenerfassung. <input>: Erstelle Eingabefelder wie Textfelder, Checkboxen und Auswahllisten. <button>: Erstelle Schaltflächen, um Aktionen auszulösen.

Für mehr Details, lies auch: Das <p>-Tag in HTML: Ein Leitfaden zur richtigen Strukturierung von Absätzen

Attribute und ihre Auswirkungen auf Elemente

Attribute sind Modifikatoren, die du Elementen hinzufügen kannst, um ihr Erscheinungsbild, Verhalten oder Funktionalität zu ändern. Sie werden immer innerhalb der öffnenden Tags des Elements geschrieben und folgen der Syntax name="value".

Arten von Attributen

Es gibt zwei Haupttypen von Attributen:

• Globale Attribute: Diese können auf jedes HTML-Element angewendet werden, unabhängig von seinem Typ. Dazu gehören Attribute wie id, class und style.
• Spezifische Attribute: Diese sind nur für bestimmte Elementtypen relevant. Beispielsweise können Links das href-Attribut verwenden, während Bilder das src-Attribut verwenden.

Verwendung von Attributen

Um ein Attribut zu verwenden, fügst du es einfach dem öffnenden Tag des Elements hinzu. Du kannst mehrere Attribute mit Leerzeichen dazwischen angeben.

<p id="my-paragraph" class="important">Dies ist ein wichtiger Absatz.</p>

Im obigen Beispiel:

• Das id-Attribut weist dem Absatz eine eindeutige ID zu, damit du ihn später im Dokument identifizieren kannst.
• Das class-Attribut weist dem Absatz die Klasse "important" zu, die du in CSS verwenden kannst, um den Stil des Absatzes zu ändern.

Häufige Attribute

Hier sind einige der häufigsten Attribute, auf die du stoßen wirst:

• id: Weist dem Element eine eindeutige ID zu.
• class: Weist dem Element eine oder mehrere Klassen zu, die in CSS verwendet werden können.
• style: Legt Inline-Stile für das Element fest.
• href: Gibt den Zielort eines Links an.
• src: Gibt den Pfad zu einem Bild oder Video an.
• alt: Bietet einen alternativen Text für ein Bild, der angezeigt wird, wenn das Bild nicht geladen werden kann.

Auswirkung auf Elemente

Attribute können eine Vielzahl von Auswirkungen auf Elemente haben. Sie können beispielsweise deren Aussehen, Größe, Position und Verhalten ändern.

Aussehen: Attribute wie style, color und font-family können verwendet werden, um das Aussehen eines Elements zu ändern. Du kannst beispielsweise die Schriftfarbe eines Textes festlegen oder die Hintergrundfarbe eines Abschnitts ändern.

Größe: Attribute wie width und height können verwendet werden, um die Größe eines Elements festzulegen. Du kannst beispielsweise die Breite eines Bildes oder die Höhe einer Tabelle festlegen.

Für weitere Informationen, siehe auch: Das HTML main Tag: Der unverzichtbare Container für den Hauptinhalt deiner Webseite

Position: Attribute wie margin und padding können verwendet werden, um die Position eines Elements festzulegen. Du kannst beispielsweise den Abstand zwischen einem Element und seinem Container oder die Einrückung von Text festlegen.

Verhalten: Attribute wie href und onclick können verwendet werden, um das Verhalten eines Elements zu ändern. Du kannst beispielsweise einen Link erstellen, der zu einer anderen Seite führt, oder eine Schaltfläche erstellen, die ein Skript ausführt, wenn sie geklickt wird.

Formatierung von Text, Überschriften und Listen

Die Formatierung deines Textes ist entscheidend für die Lesbarkeit und das Erscheinungsbild deiner Website. HTML bietet eine Reihe von Tags, mit denen du Text, Überschriften und Listen formatieren kannst.

Überschriften

Überschriften strukturieren deinen Text und machen ihn für die Leser leichter zu scannen. HTML bietet sechs verschiedene Überschriftsebenen (h1-h6), wobei h1 die wichtigste und h6 die am wenigsten wichtige ist.

<h1>Überschrift der ersten Ebene</h1>
<h2>Überschrift der zweiten Ebene</h2>
<h6>Überschrift der sechsten Ebene</h6>

Textformatierung

Du kannst Text mit verschiedenen HTML-Tags formatieren, darunter:

• strong: Macht Text fett
• em: Macht Text kursiv
• sub: Fügt Text als tiefgestellte Zeichen hinzu
• sup: Fügt Text als hochgestellte Zeichen hinzu
• mark: Markiert Text als wichtig
• del: Durchstreicht Text
• ins: Fügt Text als Einfügung ein

Listen

Listen sind eine großartige Möglichkeit, Informationen übersichtlich darzustellen. HTML bietet zwei Arten von Listen: ungeordnete Listen und geordnete Listen.

Für zusätzliche Informationen konsultiere: HTML-Content: Der ultimative Leitfaden zur Erstellung ansprechender Webseiten

Ungeordnete Listen

Ungeordnete Listen verwenden Aufzählungspunkte, um Elemente aufzulisten.

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

Geordnete Listen

Geordnete Listen verwenden Nummern, um Elemente aufzulisten.

<ol>
  <li>Element 1</li>
  <li>Element 2</li>
  <li>Element 3</li>
</ol>

Weitere Tipps zur Formatierung

• Verwende Überschriften, um deinen Text hierarchisch zu strukturieren.
• Formatiere wichtigen Text mit Tags wie strong und em.
• Verwende Listen, um Informationen übersichtlich darzustellen.
• Experimentiere mit verschiedenen Schriftarten und Farben, um deine Website visuell ansprechender zu gestalten.
• Denke an die Barrierefreiheit und stelle sicher, dass deine Website für alle zugänglich ist, unabhängig von ihren Fähigkeiten oder Einschränkungen.

Einbettung von Bildern, Videos und Links

Wenn du deine Webinhalte ansprechender und informativer gestalten möchtest, kannst du Bilder, Videos und Links einbetten. Hier erfährst du, wie es geht:

Bilder

Ein Bild kannst du mit dem img-Tag einbetten. Das Tag verfügt über zwei erforderliche Attribute:

• src: Gibt den Pfad zur Bilddatei an.
• alt: Bietet alternativen Text, der angezeigt wird, wenn das Bild nicht geladen werden kann.

Beispiel:

<img src="bild.jpg" alt="Ein Bild eines Hundes">

Videos

Um ein Video einzubetten, verwendest du das video-Tag. Es verfügt über das folgende erforderliche Attribut:

• src: Gibt den Pfad zur Videodatei an.

Optional kannst du auch ein Posterbild angeben, das angezeigt wird, bevor das Video abgespielt wird:

• poster: Gibt den Pfad zum Posterbild an.

Beispiel:

<video src="video.mp4" poster="poster.jpg"></video>

Links

Einen Link kannst du mit dem a-Tag erstellen. Das Tag verfügt über ein erforderliches Attribut:

• href: Gibt den Zielpfad des Links an.

Beispiel:

<a href="https://deine-website.com">Besuche meine Website</a>

Tipps

• Verwende aussagekräftige Alternativtexte für Bilder, um die Barrierefreiheit für Menschen mit Sehbehinderungen zu verbessern.
• Host Bilder und Videos auf einem zuverlässigen Server, um sicherzustellen, dass sie schnell geladen werden.
• Optimiere Bild- und Videodateien, um die Ladezeiten der Seite zu verkürzen.
• Verwende Links sparsam und nur, wenn sie für den Kontext relevant sind.

Tabellen erstellen und formatieren

Tabellen sind eine hervorragende Möglichkeit, Daten in einer strukturierten und übersichtlichen Weise anzuzeigen. In HTML kannst du Tabellen mit den <table>- und <td>-Tags erstellen.

Eine einfache Tabelle erstellen

Um eine einfache Tabelle mit zwei Spalten und drei Zeilen zu erstellen, kannst du den folgenden Code verwenden:

Für zusätzliche Informationen konsultiere: HTML-Formatierung: Ein Leitfaden zur effizienten Erstellung von Webseiten

<table>
    <tr>
        <th>Spalte 1</th>
        <th>Spalte 2</th>
    </tr>
    <tr>
        <td>Zeile 1</td>
        <td>Daten für Zeile 1</td>
    </tr>
    <tr>
        <td>Zeile 2</td>
        <td>Daten für Zeile 2</td>
    </tr>
</table>

Überschriften und Datenzellen

Die <th>-Tags werden für Überschriften verwendet, während die <td>-Tags für Datenzellen verwendet werden. Du kannst auch das <thead>-Tag für die Überschriften und das <tbody>-Tag für die Datenzellen verwenden, um die Tabelle zu strukturieren.

Tabellenattribute

Dem <table>-Tag können verschiedene Attribute hinzugefügt werden, um seine Eigenschaften zu ändern:

• border: Legt die Dicke des Tabellenrahmens fest.
• width: Legt die Breite der Tabelle fest.
• height: Legt die Höhe der Tabelle fest.
• align: Ausrichtung der Tabelle (z. B. "left", "center", "right").

Formatieren von Tabellen

Du kannst den Inhalt von Tabellen mit verschiedenen Formaten anpassen. Hier sind einige Beispiele:

• Farben: Verwende das bgcolor-Attribut, um die Hintergrundfarbe von Zellen festzulegen.
• Schriftarten: Verwende das font-Attribut, um die Schriftart, -größe und -farbe von Text festzulegen.
• Ausrichtung: Verwende das align-Attribut, um die Ausrichtung von Text innerhalb von Zellen festzulegen.

Tabellen-Plug-ins für mehr Funktionalität

Wenn du erweiterte Tabellenfunktionalitäten benötigst, kannst du Plug-ins wie DataTables verwenden. DataTables ist eine kostenlose JavaScript-Bibliothek, die du auf deiner Website implementieren kannst, um Sortier-, Such- und Paginierungsfunktionen für Tabellen hinzuzufügen.

Tipps für Barrierefreiheit

Stelle sicher, dass deine Tabellen für alle zugänglich sind, indem du folgende Tipps befolgst:

• Erstelle Alternativtexte für Bilder mit dem alt-Attribut.
• Füge Tabellenüberschriften hinzu, damit Screenreader den Inhalt der Tabelle verstehen können.
• Vermeide zu viele Zeilen oder Spalten, um die Navigation zu erleichtern.

Formulare und Eingabefelder

Formulare sind ein wesentlicher Bestandteil vieler Websites und ermöglichen es Nutzern, Daten wie Kontaktinformationen, Anfragen und Bestellungen einzugeben. HTML stellt eine Reihe von Tags und Attributen bereit, um die Erstellung benutzerfreundlicher und funktionaler Formulare zu erleichtern.

Eingabefelder

Eingabefelder bieten Benutzern Möglichkeiten zur Dateneingabe. Zu den gängigsten Typen gehören:

• Textfeld (input type="text"): Ermöglicht die Eingabe von Text.
• Passwortfeld (input type="password"): Wie ein Textfeld, maskiert jedoch die Eingabe aus Sicherheitsgründen.
• Checkbox (input type="checkbox"): Ermöglicht die Auswahl mehrerer Optionen.
• Optionsfeld (input type="radio"): Ermöglicht die Auswahl einer einzigen Option aus einer Gruppe.
• Dropdown-Liste (select): Ermöglicht die Auswahl aus einer Liste vordefinierter Optionen.

Attribute für Eingabefelder

Die folgenden Attribute können verwendet werden, um das Verhalten und Aussehen von Eingabefeldern zu steuern:

Weiterführende Informationen gibt es bei: HTML-Tags: Bausteine für die Strukturierung und Gestaltung von Webseiten

• name: Ein eindeutiger Bezeichner für das Feld.
• value: Der anfängliche Wert des Felds.
• placeholder: Text, der im Feld angezeigt wird, wenn es leer ist.
• required: Macht die Eingabe erforderlich.
• max/min: Legt den maximalen oder minimalen Wert für numerische Felder fest.
• size: Legt die Breite des Felds fest.
• multiple (nur für Auswahllisten): Ermöglicht die Auswahl mehrerer Optionen.

Formatierung von Formularen

Zusätzlich zu Eingabefeldern können Formulare auch andere Elemente enthalten, wie z. B.:

• Labels (label): Beschriften Eingabefelder und bieten zusätzliche Informationen.
• Buttons (button): Reichen das Formular ab oder setzen die Felder zurück.
• Feldlegende (fieldset): Gruppiert verwandte Eingabefelder.
• Formular-Prüfung: Hilft Benutzern, mögliche Fehler in ihren Eingaben zu erkennen.

Tipps für Formulare

• Halte Formulare kurz und einfach.
• Verwende klare und prägnante Anweisungen.
• Validiere Eingaben, um Fehler zu vermeiden.
• Bringe Hilfestellungen für optionale Felder an.
• Optimiere Formulare für mobile Geräte.

Arbeiten mit Farben, Schriftarten und Hintergründen

Die Ästhetik deiner Website spielt eine entscheidende Rolle für die Benutzererfahrung. Mit HTML kannst du die Farben, Schriftarten und Hintergründe steuern, um ein ansprechendes und visuell ansprechendes Design zu erstellen.

Farben

Um die Farbe von Text oder Hintergrund festzulegen, verwende das Attribut style. Du kannst Hexadezimalcodes (z. B. #0080FF), RGB-Werte (z. B. rgb(0, 128, 255)) oder vordefinierte Farbnamen (z. B. red, green, blue) angeben.

<p style="color: #FF0000;">Roter Text</p>
<div style="background-color: rgb(128, 0, 128);">Lila Hintergrund</div>

Schriftarten

Du kannst Schriftarten über das font-family-Attribut festlegen. Wähle aus einer Liste sicherer Webschriften oder binde benutzerdefinierte Schriftarten über @font-face-Regeln ein.

<h1 style="font-family: Arial;">Titel in Arial</h1>
<p style="font-family: 'Open Sans', sans-serif;">Text in Open Sans</p>

Schriftformatierung

Verwende folgende Attribute, um die Schriftformatierung anzupassen:

• font-weight: Lege die Textstärke fest (z. B. normal, bold, lighter)
• font-style: Wähle zwischen normal, italic oder oblique
• text-decoration: Füge Unterstreichungen (underline), Durchstreichungen (line-through) oder Überstreichungen (overline) hinzu

Hintergründe

Um einen Hintergrund hinzuzufügen, verwende das background-Attribut. Du kannst eine Farbe, ein Bild oder einen Farbverlauf angeben.

<div style="background: #000; color: #FFF;">Weißer Text auf schwarzem Hintergrund</div>
<div style="background-image: url('image.png');">Hintergrundbild</div>
<div style="background: linear-gradient(to right, red, yellow);">Roter zu gelber Farbverlauf</div>

Verwendung semantischer Elemente

Semantische Elemente sind HTML-Tags, die den Zweck oder die Bedeutung eines Abschnitts deines Inhalts angeben. Sie helfen nicht nur Menschen, deinen Inhalt besser zu verstehen, sondern auch Suchmaschinen, ihn zu indizieren.

Erfahre mehr unter: Was ist DIV in HTML: Der umfassende Leitfaden

Warum semantische Elemente verwenden?

• Verbesserte Zugänglichkeit: Semantische Elemente geben Screenreadern und anderen assistiven Technologien Hinweise auf den Zweck eines Abschnitts, was Menschen mit Behinderungen die Navigation auf deiner Website erleichtert.
• Verbessertes SEO: Suchmaschinen können den Inhalt deiner Website besser verstehen und ihn für relevante Suchanfragen einordnen, wenn du semantische Elemente verwendest.
• Verbesserte Wartbarkeit: Semantische Elemente machen deinen Code logischer und einfacher zu warten, da sie den Inhalt klar strukturieren.

Wichtige semantische Elemente

Verwende die folgenden semantischen Elemente, um die Bedeutung verschiedener Inhaltsabschnitte anzugeben:

• <header>: Der Kopfbereich der Seite mit Titel, Navigation und anderen globalen Elementen.
• <nav>: Die Navigationsleiste der Seite.
• <section>: Ein thematisch zusammenhängender Abschnitt des Inhalts.
• <article>: Ein eigenständiger Inhalt, z. B. ein Blogbeitrag oder ein Newsartikel.
• <aside>: Nebeninformationen, die zum Hauptinhalt gehören, aber nicht unbedingt erforderlich sind, z. B. eine Seitenleiste.
• <footer>: Der Fußbereich der Seite mit Kontaktinformationen, rechtlichen Hinweisen und anderen Informationen.

Tipps zur Verwendung semantischer Elemente

• Verwende semantische Elemente für ihren beabsichtigten Zweck. Verwende z. B. nicht ein <div>-Element, um einen Header darzustellen.
• Vermeide die Verwendung von verschachtelten semantischen Elementen.
• Füge ARIA-Attribute hinzu, um zusätzliche Informationen über den Zweck eines Elements bereitzustellen.
• Verwende HTML5-Schema.org-Attribute, um semantische Informationen zu strukturierten Daten hinzuzufügen.

Indem du semantische Elemente verwendest, erstellst du eine zugängliche, SEO-freundliche und wartbare Website, die für alle Nutzer einfach zu navigieren ist.

Tipps für Barrierefreiheit und mobile Optimierung

Bei der Entwicklung einer Website ist es unerlässlich, Barrierefreiheit und mobile Optimierung zu berücksichtigen, um sicherzustellen, dass deine Inhalte für alle zugänglich und auf allen Geräten gut lesbar sind. Hier sind einige wichtige Tipps, die du beachten solltest:

Barrierefreiheit

• Alternativtexte für Bilder hinzufügen: Verwende das alt-Attribut, um eine Textbeschreibung für Bilder bereitzustellen, damit sie von Bildschirmlesegeräten für Sehbehinderte erkannt werden können.
• Farbkontrast beachten: Stelle sicher, dass der Text gut von seinem Hintergrund zu unterscheiden ist. Verwende Kontrastprüfwerkzeuge, um sicherzustellen, dass dein Inhalt den WCAG-Richtlinien entspricht.
• Semantische Elemente verwenden: Verwende Elemente wie header, main und footer, um die Struktur deiner Website klar zu definieren und die Navigation für Bildschirmleser zu erleichtern.
• Schriftgrößen und Zeilenabstände anpassen: Verwende angemessene Schriftgrößen und Zeilenabstände, um die Lesbarkeit zu verbessern.
• Aria-Labels für komplexere Elemente hinzufügen: Verwende aria-labels, um zusätzlichen Kontext für Elemente bereitzustellen, die möglicherweise nicht allein durch das visuelle Erscheinungsbild verständlich sind.

Mobile Optimierung

• Ansprechendes Design verwenden: Stelle sicher, dass deine Website auf verschiedenen Bildschirmgrößen und Gerätetypen gut aussieht und funktioniert. Verwende ein Framework für responsives Webdesign oder erstelle separate Stylesheets für verschiedene Geräte.
• Berührungsoptimierte Elemente: Optimiere Schaltflächen, Menüs und andere interaktive Elemente für die Touch-Bedienung. Verwende großzügige Abmessungen und vermeide Überbelegungen.
• Schnelles Laden: Optimiere Bilder, Code und Ressourcen, um die Ladezeiten zu verbessern. Erwäge die Verwendung von Caching-Techniken und einem Content Delivery Network (CDN).
• Vermeidung von Pop-ups und Overlays: Verwende keine aufdringlichen Pop-ups oder Overlays, die die Benutzererfahrung auf mobilen Geräten beeinträchtigen können.
• Responsive Bilder verwenden: Verwende das srcset-Attribut, um Bilder in verschiedenen Auflösungen bereitzustellen, sodass sie optimal auf unterschiedlichen Geräten angezeigt werden können.

Verwandte Artikel

• Die Bedeutung von : Der Ankerpunkt im HTML-Code
• HTML-Elemente: Bausteine des Webs und wie man sie einsetzt
• HTML-Struktur: Verstehen Sie die Bausteine Ihrer Website
• HTML-Eingabedatum: Der verständlichste Leitfaden zur Datums- und Uhrzeiteingabe
• HTML -Tag: Eine umfassende Anleitung zur Markierung von Textinhalten
• Umfassender Leitfaden zum HTML-Listen-Tag
• HTML-Videos einbinden: Ein ausführlicher Leitfaden für Anfänger
• Anchor-Tags in HTML: So erstellst du Hyperlinks
• HTML-Entities: Ersetzen von Sonderzeichen im Web
• Das Placeholder-Attribut in HTML: Nutzen und Best Practices
• Der ultimative Leitfaden zu HTML-Link-Buttons: Erstellen Sie ansprechende und funktionale Links

Folge uns

Neue Posts

World of Warcraft auf Linux spielen: Eine guide für Abenteurer

Einführung in World of Warcraft

Node.js NVM: Antworten auf die häufigsten Fragen

Entwicklung

Professionelle Gmail-HTML-Signaturen: Erstellen, Gestalten und Nutzen

Marketingstrategien

Die vollständige Anleitung zu poczta wp: Alles, was Sie wissen müssen

Sicherheit und Datenschutz

HTML-Content: Der ultimative Leitfaden zur Erstellung ansprechender Webseiten

SEO-Optimierung

Das HTML-Title-Attribut: Ein Leitfaden zur Optimierung von Titeln für SEO und Benutzerfreundlichkeit

Online-Marketing

HTTP-Statuscodes: Ihre Bedeutung und Verwendung im Web

Einführung in HTTP-Statuscodes

Besucherzähler für Websites: Tracking Ihres Website-Traffics für Erfolg

SEO-Optimierung

Beschleunigen Sie die Dateneingabe mit HTML Datalist

Webentwicklung

HTML in PUG konvertieren: Einfach und schnell gemacht

Webentwicklung

Beliebte Posts