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
undstyle
. -
Spezifische Attribute: Diese sind nur für bestimmte Elementtypen relevant. Beispielsweise können Links das
href
-Attribut verwenden, während Bilder dassrc
-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
undfooter
, 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
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
SteamCMD: Der umfassende Leitfaden zur Verwaltung von Steam-Servern
Sicherheitsrichtlinien
POST-Anfragen: Erstellen, Senden und Empfangen von Daten im Web
Webentwicklung
LaTeX: Das mächtige Werkzeug für hochwertiges Dokumentenschreiben
Dokumentenerstellung
Die vollständige Anleitung zu poczta wp: Alles, was Sie wissen müssen
Sicherheit und Datenschutz
Wiederherstellung beschädigter Linux-Dateisysteme mit fsck: Ein umfassender Leitfaden
Fehlerbehebung
Gigacube Admin: Zugang zu den erweiterten Einstellungen Ihres Routers
Fehlerbehebung
Linux Mint Themes: Personalisieren Sie Ihren Desktop
Open Source
TCPdump-Beispiele: Paketakquise und Netzwerkdiagnose
Fehlerbehebung
Mounten von ISO-Images unter Linux: Eine Schritt-für-Schritt-Anleitung
Anleitungen
Linux Open File: Anleitung zum Öffnen, Bearbeiten und Löschen von Dateien aus dem Terminal
Open Source