Programmierung
Durchsuchbare Begriffe für Tags, Elemente, Attribute, Seitenbereiche, Formulare und Barrierefreiheitsbeschriftungen.
51 Treffer
Grundlagen
Tag
<header>...</header>Ein Markup-Schlüsselwort, das in spitzen Klammern eingeschlossen ist und dem Browser mitteilt, welche Art von Element erstellt werden soll.
Verwenden Sie den Tag-Namen, wenn das Ziel ein allgemeiner Elementtyp ist, z. B. jeder Button oder jeder Link.
<header>...</header>Ändern Sie das Styling aller Button-Tags innerhalb des Headers.
Grundlagen
Element
<button>Menu</button>Ein vollständiges HTML-Fragment, das normalerweise aus einem Start-Tag, Inhalt und einem End-Tag besteht.
Verwenden Sie das Wort "Element", wenn Sie einen sichtbaren Teil der Seite meinen, z. B. eine Überschrift, eine Karte oder einen Button.
<button>Menu</button>Verschieben Sie das Element für den Sprachenauswahl neben die Menüschaltfläche.
Grundlagen
Attribute
<a href="/ko">Home</a>Zusätzliche Informationen, die innerhalb eines öffnenden Tags stehen, wie z. B. `href`, `class`, `id`, `src` oder `aria-label`.
Attribute sind nützlich, wenn dieselbe Bezeichnung mehrfach vorkommt, aber nur eine eine bestimmte Klasse, ID oder Bezeichnung hat.
<a href="/ko">Home</a>Ein aria-label-Attribut zum Menü-Button mit nur Icon hinzufügen.
Grundlagen
Opening and closing tag
<section>Content</section>Viele Elemente beginnen mit einem öffnenden Tag und enden mit einem passenden schließenden Tag.
Dies erleichtert die Erklärung, wo ein Abschnitt in der Markup-Sprache beginnt und endet.
Ein fehlendes schließendes Tag kann dazu führen, dass der Browser den späteren Inhalt als Teil des falschen Elements behandelt.
<section>Content</section>Überprüfen Sie, ob der Kartenbereich übereinstimmende öffnende und schließende Tags hat.
Dokument
DOCTYPE
<!doctype html>Eine Deklaration, die dem Browser mitteilt, das Dokument als modernes HTML zu rendern.
Es wird normalerweise vom Framework verwaltet und selten während der Komponententwicklung geändert.
<!doctype html>Ändern Sie nicht den Dokumenttyp; bearbeiten Sie nur die Seitenkomponente.
Dokument
html
<html lang="ko">...</html>Das Wurzelelement, das das gesamte HTML-Dokument umschließt.
Das HTML-Element wird für dokumentweite Einstellungen wie Sprach- oder Themenattribute verwendet.
<html lang="ko">...</html>Legen Sie das Attribut "html lang" für jede Locale korrekt fest.
Dokument
head
<head><title>...</title></head>Der Dokumentbereich für Metadaten, Titel, Symbole, SEO-Tags und Skripte, die keine sichtbaren Seiteninhalte sind.
Verwenden Sie diesen Begriff, wenn Sie eine Änderung des SEO-Titels, der Beschreibung, der kanonischen URL oder der Metadaten anfordern.
<head><title>...</title></head>Aktualisieren Sie den Metadaten-Titel für die Seite mit den HTML-Struktur-Begriffen.
Dokument
body
<body>Visible page</body>Der Dokumentbereich, der sichtbare Seiteninhalte enthält.
Die meisten Änderungen an Layout, Header, Menü und Tools erfolgen innerhalb des Hauptbereichs.
<body>Visible page</body>Halten Sie den Hintergrund des Inhalts sowohl im hellen als auch im dunklen Modus konsistent.
Dokument
title
<title>AI Engineering Tools</title>Der Seitentitel, der im Browser-Tab angezeigt wird und oft von Suchmaschinen verwendet wird.
Verwenden Sie es, wenn die sichtbare H1 in Ordnung ist, aber der Browser- oder SEO-Titel geändert werden muss.
<title>AI Engineering Tools</title>Machen Sie den Browsertitel spezifischer, ohne die sichtbare Seitentitel zu ändern.
Dokument
meta
<meta name="description" content="...">Metadaten-Tags, die die Seite, den Viewport, die Kodierung oder Informationen für die soziale Darstellung beschreiben.
Meta-Beschreibungen beeinflussen Vorschaubilder und Such-Snippets, aber nicht den sichtbaren Seiteninhalt.
<meta name="description" content="...">Aktualisieren Sie die Meta-Beschreibung, um nach durchsuchbaren HTML-Begriffen zu suchen.
Seitenbereiche
header
<header>...</header>Ein semantischer Bereich für einleitende oder oberste Navigationsinhalte.
Verwenden Sie eine Überschrift, wenn Sie den Seitentitel, die obere Navigation, den Theme-Button, den Sprach-Button oder den Menü-Button ansprechen möchten.
<header>...</header>Verschieben Sie das Element für den Sprachenauswahl innerhalb der Header-Steuerelemente neben die Menüschaltfläche.
Seitenbereiche
nav
<nav>...</nav>Ein semantischer Bereich für wichtige Navigationslinks.
Verwenden Sie "nav", wenn Sie Kategorielinks, Menügruppen oder die Seitennavigation bearbeiten.
<nav>...</nav>Gruppieren Sie die Menülinks innerhalb der Navigation nach Converter, Mathematik und Programmierung.
Seitenbereiche
main
<main>...</main>Der Hauptinhaltsbereich einer Seite. Eine Seite sollte im Allgemeinen ein Hauptelement haben.
Verwenden Sie "main", um den Seiteninhalt von Header, Footer oder Menü zu unterscheiden.
<main>...</main>Halten Sie das schwebende Menü über dem Hauptinhalt, ohne es nach unten zu schieben.
Seitenbereiche
section
<section>...</section>Eine thematische Gruppierung verwandter Inhalte, normalerweise mit einer Überschrift.
Verwenden Sie "section", wenn Sie einen großen Seitenbereich ansprechen, z. B. einen Hero-Bereich, ein Werkzeugbereich oder Inhaltsreferenzen.
<section>...</section>Reduzieren Sie die vertikale Füllung des Bereichs "Tools" auf mobilen Geräten.
Seitenbereiche
article
<article>...</article>Ein eigenständiges Inhaltselement, z. B. eine Karte, ein Beitrag, ein Referenzeintrag oder ein Ergebnis.
Verwenden Sie "article", wenn jede wiederholte Karte ihren eigenen Titel und Textkörper hat.
<article>...</article>Machen Sie jeden Artikel kompakter auf dem Desktop.
Seitenbereiche
aside
<aside>...</aside>Ein Bereich für Inhalte, die den Hauptinhalt ergänzen, oft eine Seitenleiste oder ein Hinweis.
Verwenden Sie "aside", wenn Sie ein Filterpanel, eine seitliche Navigation oder einen unterstützenden Hinweis anfordern, der verschoben werden soll.
<aside>...</aside>Verschieben Sie den Seitenbereich unter den Hauptinhalt auf mobilen Geräten.
Seitenbereiche
footer
<footer>...</footer>Ein Bereich am unteren Rand für rechtliche Links, sekundäre Navigation, Kontaktinformationen oder abschließende Inhalte.
Verwenden Sie den Footer, wenn Sie das Seitenende ansprechen möchten, anstatt den unteren Rand eines Abschnitts.
<footer>...</footer>Eine kleine Gruppe von Rechts-Links im Footer hinzufügen.
Inhalt
Heading
<h1>Page title</h1>Ein Überschriftenelement von `h1` bis `h6`, das den Seiteninhalt strukturiert.
Verwenden Sie die Überschriftenebene, wenn Sie eine Änderung der Hierarchie anfordern, nicht nur der visuellen Größe.
Verwenden Sie h1 oder h2 nicht nur für die Größe; verwenden Sie CSS für die visuelle Größe und Überschriften für die Dokumentstruktur.
<h1>Page title</h1>Behalten Sie den Seitentitel als `h1` und verwenden Sie `h2` oder `h3` für die Titel der Karten.
Inhalt
p
<p>Description text.</p>Ein Absatz Text.
Verwenden Sie "paragraph", wenn Sie beschreibenden Text oder dessen Abstand ändern.
<p>Description text.</p>Kürzen Sie den Absatz unter der Überschrift.
Inhalt
a
<a href="/ko/tools/math-prompt">Start</a>Ein Linkelement, das zu einer anderen Seite, Route, Datei oder einem anderen Ort navigiert.
Verwenden Sie einen Anker oder Link, wenn ein Element an einen anderen Ort verschoben wird, anstatt eine Aktion vor Ort auszuführen.
<a href="/ko/tools/math-prompt">Start</a>Ändern Sie den Link zu den Browse-Tools, sodass er zum Tools-Bereich scrollt.
Inhalt
List
<ul><li>Item</li></ul>Eine Gruppe verwandter Elemente, entweder ungeordnet mit `ul` oder geordnet mit `ol`.
Verwenden Sie eine Liste, wenn Sie möchten, dass wiederholte Textelemente hinzugefügt, entfernt, neu angeordnet oder gruppiert werden.
<ul><li>Item</li></ul>Gruppieren Sie die Menüpunkte in Kategorielisten.
Inhalt
table
<table><tr><td>Cell</td></tr></table>Eine strukturierte Gitterstruktur aus Zeilen und Zellen für tabellarische Daten.
Verwenden Sie eine Tabelle, wenn der Inhalt echte Daten in Zeilen und Spalten enthält und keine rein visuelle Anordnung von Karten ist.
<table><tr><td>Cell</td></tr></table>Verwenden Sie eine Tabelle für Wahrheitstabellendaten anstelle von einfachen Div-Blöcken.
Inhalt
code / pre
<pre><code>npm run build</code></pre>code kennzeichnet Code-Text. pre behält Zeilenumbrüche und Abstände für mehrzeiligen Code bei.
Verwenden Sie einen Codeblock, wenn Befehle oder Beispiele eine exakte Formatierung erfordern.
<pre><code>npm run build</code></pre>Zeigen Sie Terminalbefehle in einem <pre>/<code>-Block an.
Inhalt
strong / em
<strong>Important</strong>Semantische Elemente zur Hervorhebung. `strong` bedeutet Wichtigkeit; `em` bedeutet Betonung.
Verwenden Sie diese für aussagekräftige Betonung, nicht nur für dekorative Fettschrift oder Kursivschrift.
<strong>Important</strong>Verwenden Sie "stark" für die Warnphrase innerhalb des Hinweises.
Medien
img
<img src="/hero.png" alt="Tool preview">Ein Element, das eine Bilddatei anzeigt.
Verwenden Sie "image", wenn Sie eine Ersetzung, Größenänderung, Beschneidung oder einen alternativen Text für visuelle Medien anfordern.
<img src="/hero.png" alt="Tool preview">Ein klares Alt-Attribut zum Hero-Bild hinzufügen.
Medien
alt
<img alt="Menu panel open">Text, der ein Bild für Bildschirmleseprogramme beschreibt und angezeigt wird, wenn das Bild nicht geladen werden kann.
Verwenden Sie "alt", wenn Sie die Zugänglichkeit oder die Bedeutung eines Bildes verbessern möchten.
Dekorative Bilder können leeren Alternativtext verwenden, aber aussagekräftige Bilder benötigen eine nützliche Beschreibung.
<img alt="Menu panel open">Alternativtext hinzufügen, der erklärt, was der Screenshot zeigt.
Medien
svg
<svg>...</svg>Ein Vektorgrafikelement, das häufig für Symbole, Diagramme und skalierbare Formen verwendet wird.
Verwenden Sie SVG, wenn die Grafik eine einfache Form oder ein Symbol ist, das scharf bleiben soll.
<svg>...</svg>Verwenden Sie ein SVG-Symbol für die Schaltfläche im Menü, wenn keine Symbolbibliothek verfügbar ist.
Formulare und Controls
button
<button type="button">Menu</button>Eine Steuerung, die eine Aktion ausführt, wenn sie angeklickt oder angetippt wird.
Verwenden Sie eine Schaltfläche, wenn die Steuerung den UI-Zustand ändert, ein Menü öffnet, ein Formular absendet oder eine Aktion ausführt.
Für die Navigation ist ein Link in der Regel besser als ein Button.
<button type="button">Menu</button>Der Menü-Button sollte das Dropdown-Menü für die Sprache schließen, bevor das Menü geöffnet wird.
Formulare und Controls
form
<form>...</form>Eine Gruppe von Bedienelementen, die zur Erfassung und Übermittlung von Benutzereingaben verwendet werden.
Verwenden Sie ein Formular, wenn Eingaben zu einer einzigen Übermittlung oder einem einzigen Eingabe-Workflow gehören.
<form>...</form>Gruppieren Sie die Suchfelder und Kategorieauswahl in einem formähnlichen Steuerungsbereich.
Formulare und Controls
label
<label for="search">Search</label>Text, der eine Formularsteuerung benennt.
Verwenden Sie das Label, wenn ein Eingabefeld einen sichtbaren oder für Screenreader geeigneten Namen benötigt.
<label for="search">Search</label>Fügen Sie ein Label für die Suchleiste hinzu, ohne die UI zu überladen.
Formulare und Controls
input
<input type="search" placeholder="Search">Ein Feld, in dem der Benutzer einen Wert eingibt oder auswählt.
Verwenden Sie "input", wenn Sie Suchfelder, Textfelder, Zahlen, Kontrollkästchen oder andere einfache Steuerelemente ansprechen möchten.
<input type="search" placeholder="Search">Das Suchfeld sollte auf mobilen Geräten die volle Breite einnehmen.
Formulare und Controls
select
<select><option>English</option></select>Eine native Dropdown-Steuerung zum Auswählen einer Option aus einer Liste.
Verwenden Sie "select", wenn das Steuerelement ein natives Formular-Dropdown-Menü und kein benutzerdefiniertes Menü ist.
<select><option>English</option></select>Den Sprachauswahlbereich so stylen, dass die ausgewählte Option im Dark Mode lesbar ist.
Formulare und Controls
textarea
<textarea>Long text</textarea>Eine mehrzeilige Texteingabe.
Verwenden Sie ein Textfeld, wenn Benutzer längere Texte einfügen oder bearbeiten müssen.
<textarea>Long text</textarea>Erhöhen Sie die Höhe des Textbereichs für die Eingabe langer Anweisungen.
Attribute
class
<button class="icon-button">...</button>Ein Attribut, das verwendet wird, um Elemente für das Styling oder das Verhalten zu gruppieren.
Eine Klasse ist oft der praktischste Weg, um ein wiederholtes UI-Muster zu adressieren.
<button class="icon-button">...</button>Wenden Sie dieselbe Klasse auf alle Schaltflächen zum Umschalten von Menükategorien an.
Attribute
id
<section id="tools">...</section>Ein eindeutiger Identifikator für ein Element auf einer Seite.
Verwenden Sie "id", wenn ein Link zu einem bestimmten Abschnitt scrollen muss oder ein Label mit einer Eingabe verbunden werden muss.
Die gleiche ID sollte nicht für mehrere Elemente auf einer Seite wiederverwendet werden.
<section id="tools">...</section>Eine ID zum Bereich "Tools" hinzufügen, damit der Link "Tools durchsuchen" dorthin scrollen kann.
Attribute
href
<a href="/ko/reference/html-structure-terms">HTML</a>Die Ziel-URL oder der Fragment für einen Link.
Verwenden Sie "href", wenn ein Link auf die falsche Seite oder den falschen Abschnitt verweist.
<a href="/ko/reference/html-structure-terms">HTML</a>Ändern Sie den href-Wert im Menü "Programmierung" in die neue HTML-Strukturseite für die Bestimmungen.
Attribute
src
<img src="/images/example.png" alt="Example">Der Quellpfad für Bilder, Skripte, Iframes und ähnliche Medien.
Verwenden Sie "src", wenn ein Bild oder ein Skript fehlt, falsch ist oder ersetzt werden sollte.
<img src="/images/example.png" alt="Example">Ersetzen Sie die Bildquelle durch den neuen Pfad zum Vorschaubild.
Attribute
data-*
<html data-theme="dark">Benutzerdefinierte Attribute, die verwendet werden, um Status oder Metadaten in einem Element zu speichern.
Verwenden Sie Datenattribute, wenn die Formatierung von einem Status abhängt, z. B. von einem Thema, ob sie geöffnet, geschlossen oder ausgewählt ist.
<html data-theme="dark">Verwenden Sie das Attribut "data-theme" im HTML-Element, um die Farben für den Dark Mode zu ändern.
Barrierefreiheit
role
<div role="menu">...</div>Ein Accessibility-Attribut, das beschreibt, welche Art von UI-Objekt ein Element darstellt.
Verwenden Sie "role", wenn eine benutzerdefinierte Komponente eine klare Semantik benötigt, z. B. ein Menü, ein Dialogfenster, ein Tab oder eine Benachrichtigung.
Native semantische Elemente sind in der Regel besser als das Hinzufügen einer Rolle zu einem generischen `<div>`-Element.
<div role="menu">...</div>Geben Sie der Liste der benutzerdefinierten Sprachen eine geeignete Menürolle.
Barrierefreiheit
aria-label
<button aria-label="Toggle menu">...</button>Ein Textlabel für Hilfstechnologien, wenn sichtbarer Text fehlt oder unzureichend ist.
Verwenden Sie aria-label für Symbol-only-Steuerelemente wie Menü-, Such-, Schließ- oder Themen-Schaltflächen.
<button aria-label="Toggle menu">...</button>Ein aria-label hinzufügen, das den Hamburger-Menü-Button klar benennt.
Barrierefreiheit
aria-expanded
<button aria-expanded="false">Menu</button>Ein Accessibility-Attribut, das angibt, ob ein Steuerelement offen oder geschlossen ist.
Verwenden Sie es für Dropdown-Menüs, Akkordeons und Menü-Schalter.
<button aria-expanded="false">Menu</button>Aktualisieren Sie aria-expanded, wenn die Menükategorie geöffnet oder geschlossen wird.
Beziehungen
Parent and child
<nav><a>Link</a></nav>Ein Elternelement enthält Kindelemente darin.
Verwenden Sie dies, wenn das Ziel von der Position abhängt, z. B. Links innerhalb der Navigation oder Schaltflächen innerhalb der Kopfzeile.
<nav><a>Link</a></nav>Nur die Links stylen, die Kinder des Header-Navigationsbereichs sind.
Beziehungen
Sibling
<button /> <button />Elemente, die denselben übergeordneten Knoten haben, sind Geschwister.
Verwenden Sie "sibling", wenn der Abstand oder die Interaktion von benachbarten Elementen abhängt.
<button /> <button />Reduzieren Sie den Abstand zwischen den Header-Buttons.
Beziehungen
Nesting
<section><article><h2>Title</h2></article></section>Die Struktur, die entsteht, wenn Elemente innerhalb anderer Elemente platziert werden.
Verwenden Sie "nesting", wenn Sie genau angeben müssen, welches innere Element geändert werden soll.
<section><article><h2>Title</h2></article></section>In jeder Karte, verschieben Sie das Anwendungsbeispiel unter die Eigenschafts-Chips.
Beziehungen
Wrapper
<div class="container">...</div>Ein Element, das hauptsächlich zum Gruppieren, Einschränken oder Positionieren anderer Elemente verwendet wird.
Verwenden Sie einen Wrapper, wenn das Layout ein umgebendes Element benötigt, anstatt Änderungen an jedem einzelnen Kindelement vorzunehmen.
<div class="container">...</div>Einen Wrapper um die Header-Steuerelemente legen, damit das Dropdown rechts ausgerichtet werden kann.
Beziehungen
Container
<div class="container">Page content</div>Eine Wrapper-Funktion, die den Seiteninhalt ausrichtet und auf eine lesbare Breite beschränkt.
Verwenden Sie einen Container, wenn Sie die Gesamtbreite des Inhalts oder die Seitenränder ändern.
<div class="container">Page content</div>Der Hauptinhaltscontainer sollte auf Desktop-Computern etwas schmaler sein.
Beziehungen
Fragment
<>...</>Eine Wrapper-Komponente, die in React verwendet wird, um Elemente zu gruppieren, ohne ein zusätzliches DOM-Element hinzuzufügen.
Verwenden Sie ein Fragment, um Elemente zu gruppieren, ohne das Layout oder CSS-Selektoren zu beeinflussen.
<>...</>Verwenden Sie ein Fragment anstelle eines unnötigen Wrapper-Div.
Barrierefreiheit
Semantic HTML
<main><section><h1>...</h1></section></main>HTML, das Elemente gemäß ihrer Bedeutung und nicht nur ihrem visuellen Erscheinungsbild verwendet.
Verwenden Sie semantisches HTML, wenn Sie die Struktur, die Barrierefreiheit, die Suchmaschinenoptimierung (SEO) oder die Wartbarkeit verbessern.
<main><section><h1>...</h1></section></main>Verwenden Sie semantisches HTML für die Referenzseitenabschnitte anstelle von generischen Divs.
Barrierefreiheit
Landmark
<header> <nav> <main> <footer>Wichtige Bereiche der Seite, die Benutzern von Hilfstechnologien helfen, sich schnell zurechtzufinden.
Kopfzeile, Navigation, Hauptbereich, Seitenleiste und Fußzeile können als Ankerpunkte dienen.
<header> <nav> <main> <footer>Halten Sie ein klares, wichtiges Element auf jeder Seite.
Barrierefreiheit
Accessible name
<button aria-label="Open menu">☰</button>Der Name, den eine assistive Technologie verwendet, um eine Steuerung anzukündigen.
Verwenden Sie einen zugänglichen Namen, wenn eine Steuerung visuell klar ist, aber nicht für Screenreader benannt ist.
<button aria-label="Open menu">☰</button>Geben Sie dem Umschalter für das Thema einen klaren, zugänglichen Namen in jeder Sprache.
Barrierefreiheit
tabindex
<button tabindex="0">Action</button>Ein Attribut, das die Reihenfolge des Tastaturfokus beeinflussen kann.
Verwenden Sie es vorsichtig, wenn benutzerdefinierte Steuerelemente nicht über die Tastatur erreichbar sind.
Positive Tabindex-Werte können eine verwirrende Tastaturreihenfolge verursachen. Die native Fokusreihenfolge ist in der Regel besser.
<button tabindex="0">Action</button>Vermeiden Sie positive tabindex-Werte und behalten Sie die natürliche Reihenfolge der Tastatur bei.