HTML-Tags: Eine Anleitung zu den Grundlagen

HTML-Tags
(Bildnachweis: Zukunft)

HTML ist die Grundlage jeder Website im Web. Es definiert, wo die Grafiken platziert werden sollen, wie sie aussehen und welches Verhalten sie haben sollen. Es ist das erste, was ein Browser erhält, was es zu einem entscheidenden Element macht, noch vor dem CSS und JavaScript richtig zu sein.

Es ist der Haupttreiber des Dokumentobjektmodells, mit dem der Browser die Struktur der Seite lesen und deren Inhalt rendern kann (weitere Informationen finden Sie unter Seitenlayouts Hier). Elemente werden durch Parsen der Tags erstellt, die wir in das Markup schreiben. Aus diesem Grund ist es wichtig, sicherzustellen, dass der HTML-Code korrekt ist. Die Sprache selbst wurde im Laufe der Jahre verbessert, um sicherzustellen, dass die verwendete Syntax den Inhalt genau beschreiben kann und es den Verbrauchern ermöglicht, einen Sinn daraus zu ziehen.

Während sich HTML weiterentwickelt hat, können Dinge, die früher empfohlen wurden, jetzt als schlechte Praxis angesehen werden. Es ist wichtig, dass wir stets auf dem neuesten Stand sind, um sicherzustellen, dass die Besucher unserer Websites optimal bedient werden. Falsches HTML kann mehr schaden als nützen. Indem wir sicherstellen, dass wir die richtige Struktur haben, können wir sicher sein, dass der von uns erstellte Inhalt für die Zukunft ausgelegt ist.



wd mein Pass ultra tragbare externe Festplatte

Das Element ist der allgemeinste Container in HTML. Standardmäßig wird kein Styling angewendet, keine inhärente Bedeutung, und jeder Browser unterstützt es. Indem wir unser eigenes Styling anwenden, lassen wir es so aussehen und sich so verhalten, wie wir möchten. Dies mag für Besucher in einem Browser ideal klingen, ist jedoch für andere Benutzer und Verbraucher dieser Inhalte mit Kosten verbunden.

Lesen Sie weiter, um herauszufinden, welche grundlegenden HTML-Tags Sie verwenden sollten und welche Vorteile die Verwendung der richtigen Tags für Ihre Builds hat.

Sie möchten eine Website entwerfen, möchten aber den Code vermeiden? Probieren Sie einen dieser Top-Website-Builder aus. Und stellen Sie sicher, dass Sie mit unserem Leitfaden zu den Besten den richtigen Service für Sie erhalten Web-Hosting Dienstleistungen.

Was sind die grundlegenden HTML-Tags?

In HTML-Tags ist ein semantisches Element eines, das seinem Inhalt eine Bedeutung verleiht, z. . Ein nicht-semantisches Element wird normalerweise zum Anwenden des Stils verwendet und hat keine Bedeutung.

Bevor HTML5 eine neue Reihe semantischer Elemente einführte, verwendeten Entwickler diese um den gleichen Effekt zu erzielen, z.B. . Durch Hinzufügen einer beschreibenden Klasse zu diesem Element wird dem Entwickler klar, was dieses Element enthält, aber ein Computer kann es nicht verstehen.

Wir haben jetzt mehrere semantische Elemente wie oder um eine Seite zu strukturieren. Wir sollten in der Lage sein, der Struktur zu folgen, indem wir nur die verwendeten Tags betrachten - etwas, das nur mit nicht-semantischen Elementen wie z .

Mit diesem Handbuch können Sie sicherstellen, dass Sie immer die richtigen semantischen Tags für den richtigen Job verwenden. Und Sie könnten Ihre eigenen erstellen HTML Boilerplate Vorlage, damit Ihre Tags bei jedem Start eines neuen Builds immer richtig und einsatzbereit sind.

Das Tag

Der Header enthält normalerweise eine Art wiederholten Inhalt, der nicht direkt mit dem Rest der Seite zusammenhängt. Die Spezifikation definiert es als „eine Gruppe von Einführungs- oder Navigationshilfen“, die ein Logo, eine ortsweite Navigation oder eine Suchfunktion umfassen können. Es kann mehrere geben Elemente auf einer Seite. Beispielsweise könnte die Homepage eines Blogs eine enthalten Tag für jeden angezeigten Beitrag.

Das Tag

Die meisten Websites verfügen über einen Bereich für die Navigation. Dies kann Links zu bestimmten Bereichen der Site oder eine Breadcrumb-Stilhierarchie enthalten. Nicht alle Links müssen innerhalb eines Links liegen. Nur Sammlungen von Links in anderen Teilen der Seite wären Kandidaten für ihre eigenen Element, aber dies ist abhängig vom Kontext.

Ein gängiges Muster besteht darin, Links zu einer Datenschutzrichtlinie oder Kontaktseite in die Fußzeile aufzunehmen. Wenn dieser Bereich die Dies reicht aus, um diese Links als Site-Navigation zu identifizieren, und es ist nicht erforderlich, eine separate zu verwenden Etikett.

Das Tag

Das Element ist der Schwerpunkt jeder Seite. Außerhalb der Kopf- und Fußzeile der Seite sollten sich alle anderen Inhalte hier befinden. Es sollte immer nur einen geben auf einer Seite. Unterstützende Technologien wie Screenreader können dieses Element erkennen und es Benutzern ermöglichen, direkt zum Inhalt zu springen.

HTML-Tags

Semantische Tags wie Helfen Sie dem Browser, bestimmte Inhalte zu erkennen(Bildnachweis: Matt Crouch)

Das Tag

Wie der Name schon sagt, ist die Element enthält Informationen, die sich auf den Hauptinhalt der Seite beziehen. Die Informationen in diesem Element können getrennt von allem anderen existieren und nicht den Kontext verlieren. Die häufigste Verwendung für dieses Element ist die Navigation in der Seitenleiste oder das Schalten von Anzeigen neben dem .

ZU Element enthält alle zusammenfassenden Informationen über die Seite. Für viele Websites umfasst dies eine Adresse, Copyright-Informationen oder Links zu zusätzlichen Seiten. Es ist nicht erforderlich, immer eine einzige Fußzeile am Ende der Seite zu haben. Es kann überall platziert werden - auch in anderen Abschnitten - oder überhaupt nicht enthalten sein.

Die und Tags

Die W3C-Spezifikation definiert und in einer ähnlichen Weise. Beide dienen zum Gruppieren verschiedener Teile einer Seite. Ein wesentlicher Unterschied ist die Zusammensetzung. Ein ist so konzipiert, dass es in sich geschlossen ist. Der Inhalt darin würde als eigenständiges Stück Sinn machen. Beispiele hierfür sind ein Blog-Beitrag, ein Benutzerkommentar oder ein eingebetteter Tweet.

Im Gegensatz dazu a gruppiert mehrere Teile einer Seite, die sonst keine andere semantische Bedeutung hätten. Diese würden ihre Bedeutung verlieren, wenn sie getrennt würden. Beispiele hierfür sind eine Gruppe verwandter Absätze, ein Kapitel eines Buches oder eine einzelne Registerkarte als Teil einer Oberfläche mit Registerkarten.

Es ist erwähnenswert, dass ein > Tag kann aus mehreren bestehen Elemente.

Denken Sie daran, semantisches HTML ist mehr als nur die Gliederungsstruktur einer Seite. Fast jedes Element hat eine Bedeutung, was bedeutet, dass häufig eine gute Übereinstimmung gefunden werden kann. Nur verwenden oder Tags, wenn nichts anderes funktioniert.

Warum ist das richtige HTML-Markup wichtig?

HTML-Tags

Bestimmte Tags wie muss den richtigen Inhalt enthalten, um wirksam zu sein(Bildnachweis: Matt Crouch)

Es ist wichtig, die richtigen HTML-Tags und Markups zu erhalten. Hier sind drei Gründe warum.

01. Verbesserte Auffindbarkeit

Suchmaschinen wie Google durchsuchen ständig das Web, suchen nach Websites und analysieren deren Inhalte. Sie tun dies, indem sie nach bestimmten Tags suchen, wie z

und und Verwenden des Inhalts dieser, um ihren Algorithmus zu informieren. Zum Beispiel kann die Suche nach Tickets für ein Konzert die Suche nach Überschriften beinhalten, die den Namen der Veranstaltung enthalten.

Elemente, die den Künstler diskutieren und für das richtige Datum. Wenn sie nicht finden können, wonach sie suchen, wird die Website in diesen Suchergebnissen nicht angezeigt.

Einige Browser und Dienste wie Pocket ermöglichen es Benutzern, Websites ablenkungsfrei zu lesen. Diese extrahieren die Überschriften, Inhalte und Medien aus der Site und legen sie in einer Ansicht an, die das Lesen erleichtert. Durch die Verwendung der richtigen Elemente zum Erstellen der Seite können diese Tools leichter die richtigen Informationen extrahieren und dem Benutzer eine bessere Benutzererfahrung bieten.

02. Besser für die Zugänglichkeit

Mit einigen Elementen sind Verhaltensweisen definiert. EIN Es wird beispielsweise erwartet, dass das Element interaktiv ist und beim Klicken eine Aktion ausführt. Wenn ein nicht interaktives Element wie z wird stattdessen verwendet, würde ein Parser nicht wissen, dass er ohne einige hinzugefügte Attribute darauf klicken könnte.



Dies betrifft auch diejenigen, die zugängliche Technologien verwenden. Das Navigieren auf einer Seite ohne visuelle Elemente kann langsam sein. Diese Benutzer können stattdessen nach Orientierungspunkt oder Überschriftenebene durch Websites navigieren.

Ein Orientierungspunkt wird entweder mithilfe eines Schnittelements wie z oder durch Anwenden eines äquivalenten 'Rollen'-Attributs. Ohne diese oder durch falsche Verwendung kann der Benutzer den benötigten Inhalt nicht finden.

03. Planen Sie für die Zukunft

Eines der Hauptprinzipien des Webs ist die Abwärtskompatibilität. Alle Spezifikationen sind so konzipiert, dass sie mit Websites kompatibel sind, die vor vielen Jahren erstellt wurden, und berücksichtigen mögliche Änderungen, die in Zukunft auftreten können. Indem wir jetzt die richtigen Elemente und Tags verwenden, stellen wir sicher, dass unsere Website in Zukunft verstanden, gefunden und gesehen werden kann.

Es ist auch wichtig, Pannen zu planen. Stellen Sie daher sicher, dass Sie Ihr Vermögen mit dem gesichert haben bester Cloud-Speicher dort draußen.

Möchten Sie mehr über Webdesign erfahren? Dann abonnieren Netz , das weltweit meistverkaufte Magazin für Webdesigner und Entwickler.

GenerateJS Banner

Erfahren Sie, wie Sie bei generateJS besseres JavaScript erstellen(Bildnachweis: Future / Toa Heftiba, Unsplash)

Besuchen Sie uns im April 2020 mit unserer Reihe von JavaScript-Superstars bei GenerateJS - der Konferenz, die Ihnen hilft, besseres JavaScript zu erstellen. Buchen Sie jetzt bei generateconf.com

Weiterlesen: