Im letzten Artikel haben wir uns einige neue Elemente angesehen, die in HTML5 eingeführt wurden, und wie sie richtig implementiert werden können. In diesem Artikel werden wir erneut eine Reihe neuer Elemente diskutieren. Dieses Mal werden jedoch nur die HTML5-Elemente untersucht, die eine bedeutende semantische Änderung der Strukturierung Ihrer Websites darstellen. In diesem Artikel wird beschrieben, wie Sie jedes dieser neuen Elemente so einsetzen können, dass das div-itus-System, das die Struktur vieler heutiger Standorte plagt, dringend benötigt wird.

Semantik?

Bevor wir loslegen, sollten Sie wissen, dass ich mit Semantik lediglich auf HTML-Tags und -Elemente verweise, wie sie beabsichtigt waren. Im Gegensatz zu Programmiersprachen, die kompiliert werden müssen, um zu laufen, benötigt HTML keinen Compiler (der Browser versucht alle Interpretationen) und gibt Ihnen somit die Freiheit, ein bestimmtes Element nach Belieben zu verwenden. Wenn Sie jedoch ein neuer Webdesigner sind, stellen Sie möglicherweise fest, dass viele Leute semantische Fanatiker sind, und das vielleicht zu Recht. Tische verwenden, wo sie nicht hingehören, oder herumwerfen

Tags jedes Mal, wenn Sie etwas fett hervorheben möchten, ist das zwar praktisch, aber es ist etwas unordentlich und schwer lesbarer Code. Daher betrachten wir semantische, browserübergreifende, gültige HTML-Praktiken, um Websites im gesamten Web Einheitlichkeit und Konsistenz zu verleihen. Viele der HTML5-Elemente, die wir betrachten, werden durch das Lesen des Namens leicht zu interpretieren sein. Wenn Sie sich jedoch mit der richtigen Art und Weise der Implementierung dieser Elemente vertraut machen möchten, müssen Sie unbedingt professionelle Websites erstellen, die in einer Reihe funktionieren der wichtigsten Browser.

Das Problem

Werfen Sie einen Blick auf 100 verschiedene Websites mit nahezu identischen Layouts. Im darunter liegenden HTML-Code finden Sie 100 verschiedene Strukturen und Namenskonventionen. Obwohl jeder gute Webentwickler seinen Namen nennen wird

Da sie so leicht verständlich sind, können die riesigen Möglichkeiten zu Verwirrung über die Identifizierung relativ einfacher und einheitlicher Codeabschnitte führen. Aus diesem Grund gibt uns HTML5 eine Reihe von Elementen, mit denen Elemente identifiziert und anvisiert werden können, die auf fast jeder Website im Internet angezeigt werden, z. B. Kopfzeilen, Fußzeilen und Navigationsmenüs. Abgesehen von inkonsistenten Namenskonventionen kann die derzeitige Vorgehensweise schnell zu Div-Strukturen führen, die im Vergleich zu einfachen, eingebauten HTML-Elementen viel Gewicht haben. Lassen Sie uns zur Veranschaulichung eine einfache Struktur betrachten, die Sie möglicherweise in HTML4 finden.

<p>Etwas Text</p> <p>Etwas Text</p>

Sie können sehen, wie dieser relativ einfache Code durch divs überlaufen wird. Das Sortieren kann jedoch aufgrund der erforderlichen Flusen lange dauern. Das CSS, das mit diesem HTML-Code arbeitet, enthält die folgenden Selektoren:

#nav_bar {} #main_header {} .side_bar {} #container {} .section {} #header {} .section p {} .footer {} #main_footer

Dieser Code ist zwar nicht so kompliziert wie der HTML-Code davor, aber er ist nicht so einfach, wie er sein könnte. Lassen Sie uns nun untersuchen, wie HTML5 uns bei der Lösung dieses Problems unterstützt.

Die Lösung

Mit HTML5 können wir fast alle benutzerdefinierten Divs verwenden und in Standardelemente konvertieren. Schauen wir uns den Code an, der notwendig ist, um das gleiche in HTML5 zu erreichen.

<p>Etwas Text</p> <p>Etwas Text</p>

Und das entsprechende CSS:

nav {} Header {} beiseite {} Abschnitt {} Fußzeile {} Abschnitt p {} #container {} #container Header {} #container Fußzeile {}

Es gibt viel zu besprechen über diese Beispiele, also beginnen wir mit HTML. Beachten Sie, dass der chronische Div-Itus verschwunden ist und an seiner Stelle allgemein verstanden werden und Elemente leicht interpretieren können. Dies verbessert die Lesbarkeit des Codes erheblich. Wenn ich den Code einer anderen Person durchgelesen habe, spüre ich, dass ich das passende finde

und

Stichworte. Dies kann eine lächerliche Zeit in Anspruch nehmen, wenn acht oder zehn gestrandete und nicht beschriftete schließende div-Tags vorhanden sind. Die Verwendung von Standardelementen trägt wesentlich dazu bei, dieses Problem zu beheben, da das schließende Tag informativer ist (es ist einfacher zu finden)

als es ist eine zufällige zu finden

das gehört zu

).

Das CSS wurde ebenfalls vereinfacht. Wir können jetzt in den meisten Fällen nur Bezeichner ohne Hash-Tags oder Punkte verwenden, da wir uns auf nativ unterstützte Elemente beziehen, anstatt auf eindeutig benannte divs. Beachten Sie, dass wir dieses Mal in unserem HTML-Code dasselbe Tag für alle Header- und Footer-Elemente verwenden konnten (wir haben die Hauptklassifizierung). Dies liegt daran, wenn wir Header in einem Container anders gestalten möchten als die anderen, können wir einfach #container header verwenden. um nur die Header-Elemente im Container div anzuvisieren (und wir können sicher sein, dass die Eigenschaften, die wir behalten möchten, ordnungsgemäß erben). Nachdem wir nun einen Einblick in die neuen Strukturelemente erhalten haben, wollen wir uns nun mit den einzelnen Komponenten beschäftigen.

Das

Element

Sie können zunächst davon ausgehen, dass sich das Header-Element auf den einen Principal-Header auf der Seite bezieht. Es ist jedoch nur ein generisches Element, das in Ihrem Code mehrmals verwendet werden kann. Hier ist ein Beispiel:

<h2>HTML5-Tutorials</h2> <p>Vollständig kostenloses HTML5-Training</p> <ul> <li>Ein</li> <li>Zwei</li> <li>Drei</li> </ul> <h2>CSS3-Tutorials</h2> <p>Vollständig kostenloses CSS3-Training</p> <ul> <li>Ein</li> <li>Zwei</li> <li>Drei</li> </ul>

Wieder haben wir, was normalerweise ein Haufen Divs gewesen wäre, durch einfachere Header-Tags ersetzt. Beachten Sie, dass das Header-Element nicht als Ersatz für das Header-Element gedacht ist, da in einer einzigen HTML-Datei mehrere Header-Tags vorhanden sein können

, was ein einmaliges div darstellt, das nur einmal erscheint, sondern eher für

, das ein Element darstellt, das mehrmals erscheint.Dies ist eine wichtige Unterscheidung aus semantischen Gründen sowie aus CSS-Stil und gilt für einige der Elemente, die wir diskutieren werden.

Das

Element

Die meisten Dinge, die ich gerade über das Header-Element erklärt habe, gelten auch für das Footer-Element. Das bedeutet, dass es generisch ist und mehrmals im gesamten Code platziert werden kann. Offensichtlich gehen Fußzeilen im Allgemeinen (wenn auch nicht immer) am Ende eines Codeabschnitts und enthalten Informationen, die sekundärer Natur sind, z. B. Veröffentlichungsdatum, Autor, Copyrightinformationen usw. Was jedoch in die Fußzeile eingeht, hängt weitgehend davon ab Sie. Hier ein kurzes Beispiel, das auf dem basiert, was wir mit dem Header-Element gesehen haben:

<h2>HTML5-Tutorials</h2> <p>Vollständig kostenloses HTML5-Training</p> <ul> <li>Ein</li> <li>Zwei</li> <li>Drei</li> </ul> 6 Stunden kostenlose Tutorials! <h2>CSS3-Tutorials</h2> <p>Vollständig kostenloses CSS3-Training</p> <ul> <li>Ein</li> <li>Zwei</li> <li>Drei</li> </ul> 4 Stunden Tutorials!

Das

Element

Das Abschnittselement ist eine generelle Methode zum Trennen von Teilen Ihrer Site. Angenommen, eine Veranstaltungswebsite ist unterteilt in "Was", "Wann" und "Wo". Du könntest benutzen

Tags, um diese Unterteilung in Ihrem Code vorzunehmen (denken Sie erneut an "class", "id"). An unserem vorherigen Beispiel könnten wir die "Tutslist" ersetzen. Klasse mit Abschnittselementen.

<h2>HTML5-Tutorials</h2> <p>Vollständig kostenloses HTML5-Training</p> <ul> <li>Ein</li> <li>Zwei</li> <li>Drei</li> </ul> 6 Stunden kostenlose Tutorials! <h2>CSS3-Tutorials</h2> <p>Vollständig kostenloses CSS3-Training</p> <ul> <li>Ein</li> <li>Zwei</li> <li>Drei</li> </ul> 4 Stunden Tutorials!

Beachten Sie, dass Abschnitte häufig mit einem Header-Element beginnen und mit einem Footer-Element enden, obwohl dies keinesfalls eine Notwendigkeit darstellt.

Das

Element

Ich habe das Artikelelement in meinem letzten Beitrag kurz erwähnt und vergaß vollständig, dass ich es für diesen Beitrag aufsparte. Ein Kommentator hat jedoch auf einige schlechte Informationen aufmerksam gemacht, die wir aufräumen sollten. Trotz der Tatsache, dass w3schools angibt, dass das Artikelelement ausschließlich für externen Inhalt bestimmt ist, gibt w3.org eindeutig an, dass sein eigentlicher Zweck darin besteht, einen Abschnitt Ihrer Website zu identifizieren, der unabhängig verteilt werden soll. Beispielsweise könnte ein Blogpost wie dieser für sich stehen und ist nicht vom Rest des Inhalts der Website abhängig. Darüber hinaus möchten wir, dass dieser Post eigentlich von anderen Websites diskutiert und verlinkt wird. Nachrichten, Forenbeiträge und Tutorials sind gute Beispiele für diese Art von Inhalten. Wenden wir das auf unser laufendes Beispiel an.

<h2>HTML5-Tutorials</h2> <p>Vollständig kostenloses HTML5-Training</p> <h3>HTML-Tutorial 1</h3> <p>Viele gute gute Informationen</p> <h3>HTML-Tutorial 2</h3> <p>Viele gute gute Informationen</p> 6 Stunden kostenlose Tutorials! <h2>CSS3-Tutorials</h2> <p>Vollständig kostenloses CSS3-Training</p> <h3>CSS Tutorial 1</h3> <p>Viele gute gute Informationen</p> <h3>CSS Tutorial 2</h3> <p>Viele gute gute Informationen</p> 4 Stunden Tutorials!

Wie Sie sehen, handelt es sich dabei tatsächlich um einen internen Inhalt, der extern referenziert werden kann, und nicht umgekehrt, wie dies von w3schools empfohlen wird.

Das

Element

Das Element nav bezieht sich auf Abschnitte Ihres HTML-Codes, die zu Navigationszwecken Verknüpfungen enthalten, z. B. die in einer Seitenleiste oder in einem Streifen von Schaltflächen oben auf einer Seite. Dies gilt jedoch nicht für alle Gruppen von Navigationslinks auf Ihren Seiten. Reservieren Sie dieses Element stattdessen für die wichtigsten Navigationsquellen auf Ihrer Website. w3.org gibt das Beispiel einer Reihe von Links in einer Fußzeile als eine Situation, die ein Nav-Element nicht verdient. Wir werden unser Beispiel noch einmal überarbeiten, um das neue Element aufzunehmen.

Home Über HTML5 Tuts CSS3 Tuts Kontakt <h2>HTML5-Tutorials</h2> <p>Vollständig kostenloses HTML5-Training</p> <h3>HTML-Tutorial 1</h3> <p>Viele gute gute Informationen</p> <h3>HTML-Tutorial 2</h3> <p>Viele gute gute Informationen</p> 6 Stunden kostenlose Tutorials! <h2>CSS3-Tutorials</h2> <p>Vollständig kostenloses CSS3-Training</p> <h3>CSS Tutorial 1</h3> <p>Viele gute gute Informationen</p> <h3>CSS Tutorial 2</h3> <p>Viele gute gute Informationen</p> 4 Stunden Tutorials!

Das

Element

Das letzte Element, das wir besprechen werden, ist beiseite. Dieses Element ist für Inhalte reserviert, die sich auf den Inhalt der Seite beziehen, jedoch deutlich voneinander getrennt sind. Das side-Element kann für Anführungszeichen, Werbung, Nav-Elemente, Seitenleisten usw. verwendet werden. Nehmen wir beispielsweise an, wir wollten unsere Navigation vom letzten Beispiel nehmen und in eine Seitenleiste einfügen:

<p>Allgemeine Information</p> Home Über Kontakt <p>Tutorials</p> HTML5 schneidet CSS3 <h2>HTML5-Tutorials</h2> <p>Vollständig kostenloses HTML5-Training</p> <h3>HTML-Tutorial 1</h3> <p>Viele gute gute Informationen</p> <h3>HTML-Tutorial 2</h3> <p>Viele gute gute Informationen</p> 6 Stunden kostenlose Tutorials! <h2>CSS3-Tutorials</h2> <p>Vollständig kostenloses CSS3-Training</p> <h3>CSS Tutorial 1</h3> <p>Viele gute gute Informationen</p> <h3>CSS Tutorial 2</h3> <p>Viele gute gute Informationen</p> 4 Stunden kostenlose Tutorials!

Schau mal, keine Divs!

Das obige Beispiel veranschaulicht die außergewöhnlich große Menge an Code, die HTML5 nur mit Standardelementen ausführen kann! Jeder Teil dieses Beispiels ist in CSS extrem einfach anzuvisieren, er ist für jeden Entwickler (zumindest für Entwickler, die sich mit HTML5 auskennen) sofort verständlich und unglaublich knapp im Vergleich zu der Menge an Code, die in HTML4 erforderlich ist. Und es ist kein Div in Sicht.

Fazit

In diesem Artikel wurde das Konzept und die Bedeutung von semantischem Code kurz beschrieben und die wichtigsten semantischen Änderungen von HTML5 erörtert. Wir haben herausgefunden, wie sechs unglaublich hilfreiche neue HTML5-Elemente richtig verwendet werden: Header, Fußzeile, Abschnitt, Artikel, Navi und beiseite. Schließlich haben wir gelernt, wie diese neuen Elemente verwendet werden können, um sauber strukturierten und leicht lesbaren Code zu erstellen, der die übermäßige Verwendung von divs vermeidet.

Um Verwirrung zu vermeiden (und um eine Flut wütender Kommentare zu vermeiden), sollte ich klarstellen, dass mit divs absolut nichts falsch ist.Ich persönlich benutze divs in jeder von mir erstellten Site recht großzügig und finde, dass sie zu den flexibelsten und wichtigsten Elementen in HTML gehören. Je mehr Sie eindeutig benannte Divs durch Elemente mit universellem Namen ersetzen können, desto zuverlässiger und standardmäßiger wird Ihr Code.

Blick nach vorne: Drei nach unten, einer zum Mitnehmen!

Der nächste Artikel wird das Finale in unserer Serie zu HTML5 sein. Wie Sie wahrscheinlich zu diesem Zeitpunkt wissen, ist nichts von dem, was ich Ihnen gezeigt habe, bereit, in eine Website integriert zu werden, damit es in der Öffentlichkeit weit verbreitet wird. Im nächsten Artikel werden Ihnen jedoch verschiedene Tricks gezeigt, mit denen Sie HTML5 sofort einsetzen können. Außerdem erfahren Sie, wie Sie Ihre Websites auf das unvermeidliche Update vorbereiten sollten.