Was ist neu in HTML5? 9 Elemente, die Sie kennen müssen
HTML5 ist das Neueste und Beste Was ist HTML5 und wie ändert sich die Art und Weise, wie ich browse? [MakeUseOf erklärt] Was ist HTML5 und wie ändert sich die Art und Weise, wie ich browse? [MakeUseOf Explains] In den letzten Jahren haben Sie möglicherweise gelegentlich den Begriff HTML5 gehört. Unabhängig davon, ob Sie etwas über Webentwicklung wissen oder nicht, das Konzept kann etwas nebulös und verwirrend sein. Offensichtlich… Lesen Sie mehr Version der am häufigsten verwendeten Auszeichnungssprache im Web. Es gibt einige große Änderungen gegenüber der letzten Version der Sprache, und wenn Sie sie nicht verwenden, verpassen Sie einige wirklich coole Funktionen.
Wir haben nicht den Raum, um jedes neue Element in der fünften HTML-Version zu behandeln, aber diese neun sind einige der wichtigsten. Weitere Informationen zu den neuen Elementen und APIs in HTML5 finden Sie unter W3Schools.
Eine Einführung in semantische Elemente
Wie in vielen anderen Bereichen des Internets hat sich HTML5 auf Semantik konzentriert. Anstatt Tags nur für die Formatierung zu verwenden, werden sie auch dazu verwendet, Browser und Suchmaschinen als eine Alternative zu Google zu definieren. Top 7 Semantic Search Engines als Alternative zu Google Lesen Sie mehr über die Bedeutung ihrer Umgebung.
Zum Beispiel,
teilt einem Browser einfach mit, dass er einen Absatz enthält. , die wir kurz besprechen werden, teilt einem Browser mit, dass er den Hauptinhalt der Seite enthält.
Das semantische Web entwickelt sich immer noch, und wir haben gerade erst angefangen, die Oberfläche dessen zu beschneiden, was es kann. HTML5 hilft semantisches Markup zu bringen Was semantisches Markup ist und wie es das Internet für immer verändern wird [Technologie erklärt] Was semantisches Markup ist und wie es das Internet für immer verändern wird [Technologie erklärt] Lesen Sie mehr zu einem viel größeren Teil des Internets. und das kann nur gut für die Zukunft der semantischen Verarbeitung sein.
1.
Das Tag definiert “unabhängige, in sich geschlossene Inhalte.” Das einfachste Beispiel ist natürlich ein Artikel. Für diesen Artikel öffnen wir den Tag vor der Einführung und schließen ihn nach dem Abschluss.
Der gesamte Text in Ihrem abgeschlossenen Abschnitt.
Es gibt aber auch andere Möglichkeiten, wie Sie es verwenden können. Zum Beispiel enthalten viele Kochblogs persönliche Geschichten darüber, wie ein Rezept entstanden ist oder warum es für den Autor wichtig ist. Es folgt dann das Rezept selbst. Sie könnten das Argument vorbringen, dass jedes dieser Elemente für sich alleine stehen könnte.
In einem Forum kann jeder Beitrag oder Thread als in sich geschlossen betrachtet werden, und jeder kann mit einem eigenen gekennzeichnet werden Etikett. Meist wird es für den Hauptinhalt einer Seite verwendet. Denken Sie jedoch daran, dass Sie es auch kreativer nutzen können.
2.
Eng verwandt mit ist . Dies definiert a “thematische Gruppierung von Inhalten, normalerweise mit Überschrift.” So wird drinnen sein … Recht?
Nicht unbedingt. W3 weist darauf hin, dass dies von der Struktur Ihrer Website abhängt. Sie haben möglicherweise in sich abgeschlossenen Inhalt in verschiedenen Abschnitten Ihrer Seite (denken Sie beispielsweise an die Startseite einer News-Site). Sie könnten dann Abschnitte in diesem Artikel haben.
Warum benötigen Sie einen DAC?
Alles hört sich besser an.
So richten Sie einen DAC ein
Hier ist was Sie tun müssen…
Sie können sogar Abschnitte innerhalb von Abschnitten enthalten, wenn diese auf Ihre Seite passen. Denken Sie daran, dass ein Abschnitt einfach ein ist “thematische Gruppierung von Inhalten,” und es gibt viele Orte, um es zu benutzen.
3.
Dieses Element “sollte als Container für einführende Inhalte verwendet werden.” Kurz gesagt, es ist der Teil Ihrer Seite, der den Nutzern hilft zu verstehen, was sie gerade lesen.
Aber lassen Sie sich nicht täuschen - Sie können diesen Container mehr als einmal verwenden. Beispielsweise können Sie damit den Seitentitel und den einleitenden Absatz Ihres Blogbeitrags ermitteln. Sie können es aber auch verwenden, um den einleitenden Inhalt für jeden Abschnitt zu markieren.
Alles, was Sie über DACs wissen müssen
Hier ist eine nützliche Einführung in DACs…
Der Rest Ihres Artikels geht hier.
Header-Abschnitte enthalten normalerweise mindestens ein Überschrift-Tag - H1, H2 usw. Sie müssen dies nicht, aber wenn Sie ein Überschrift-Tag verwenden, ist es eine gute Wette, dass Sie Header-Inhalt einbeziehen.
4.
W3 sagt, dass Fußzeilen-Tags normalerweise das enthalten “Urheber des Dokuments, Copyright-Informationen, Links zu Nutzungsbedingungen, Kontaktinformationen usw.” Sie können es sich als das vorstellen “Hauswirtschaft” Zeug.
In der Dokumentation heißt es auch, dass Sie mehr als einen Fußzeilenabschnitt auf Ihrer Seite haben können. Es ist jedoch wahrscheinlich eine gute Idee, all diese Informationen an einem einzigen Ort aufzubewahren.
5.
Dieses Tag enthält die Navigationslinks für eine bestimmte Seite. Beachten Sie, dass nur der Navigationsabschnitt dieses Tag erhält, nicht alle Links auf Ihrer Seite. Es ist für Navigationsleisten und ähnliche Tools.
Dies ist ein wirklich einfaches Tag - das ist alles, was dazu gehört. Definieren Sie den Navigationsbereich und verwenden Sie ihn nicht mehr auf Ihrer Seite.
6.
Eines der interessantesten neuen Elemente in HTML5 ist nebenbei. W3 gibt die etwas wenig hilfreiche Definition von “einige Inhalte, abgesehen von den Inhalten, in die sie eingefügt werden.”
Kurz gesagt, eine Nebenbemerkung ist alles, was mit der umgebenden Information zusammenhängt (aber nicht mit ihr verbunden ist). Es kann eine Seitenleiste sein, die Ihrem Inhalt Details hinzufügt. Wenn es innerhalb einer Gruppe von verwendet wird Tags enthält es zusätzliche Informationen, die zum Verständnis des Hauptinhalts nicht erforderlich sind.
Wenn wir in diesem Artikel beispielsweise eine Seitenleiste mit Informationen zum Verlauf von HTML5 eingefügt hätten, wäre dies eine Nebenfrage.
Aber die
Der Hauptartikel geht hier. Der Artikel geht hier weiter.
Da dieses Tag mehrfach verwendet werden kann, kann dies verwirrend sein. Wenn Sie bedenken, dass es ist “sekundärer Inhalt” und dass es nicht immer eine Seitenleiste sein muss, haben Sie eine bessere Vorstellung davon, wie man sie benutzt.
7.
Viele Websites enthalten Informationen, die angezeigt werden müssen, jedoch nicht auffällig sind. Vielleicht sind es die Copyright-Informationen für ein Foto. Oder das Kleingedruckte bei einem Wettbewerb. Diese Art von Informationen ist genau das, wofür das details-Tag dient.
Wenn Sie das Details-Tag verwenden, erstellen Sie ausgeblendeten Text, der leicht angezeigt werden kann. Hier ist ein Beispiel:
Klicken Sie hier, um Informationen anzuzeigen.
Hier finden Sie detailliertere Informationen, die Sie nicht sofort benötigen.
Klicken Sie einfach auf den Pfeil, um die Details anzuzeigen. Einfach. Das Erstellen ist genauso einfach. Hier ist der Code für das obige Beispiel:
Klicken Sie hier, um Informationen anzuzeigen. Hier finden Sie detailliertere Informationen, die Sie nicht sofort benötigen.
Das Tag definiert den Satz, der angezeigt wird, während der andere Inhalt ausgeblendet wird. Beachten Sie, dass Sie andere Tags im Detailabschnitt verwenden können: Überschriften, Abschnitte usw..
Es gibt andere coole Dinge, die Sie mit HTML 7 machen können. Coole HTML-Effekte, die jeder zu seiner Website hinzufügen kann. 7 Coole HTML-Effekte, die jeder zu seiner Website hinzufügen kann. Verzweifeln Sie nicht! Sie müssen kein CSS oder PHP kennen, um eine ausgefallene Website zu erstellen. Ein paar gute alte HTML-Kenntnisse und das Kopieren und Einfügen werden ausreichen. Lesen Sie auch mehr, auch wenn Sie nicht viel CSS oder JSON beherrschen.
8-9. und
Mach dir keine Sorgen, die Tag, den Sie seit Jahren verwenden, geht nicht weg. Umgeht das Image-Tag und teilt dem Browser mit, dass es sich um ein in sich geschlossenes Bild, ein Diagramm, eine Codeliste oder eine andere Abbildung handelt.
Wenn eine Figur von der Seite entfernt wird, hat dies keinen Einfluss auf den Fluss des Inhalts.
Geht innerhalb des Abbildungstags und gibt eine Beschriftung für ein Bild an. Es könnte ungefähr so aussehen:
Das ist unser Logo!
Dadurch haben Sie eine integrierte Möglichkeit, Ihren Bildern eine Beschriftung hinzuzufügen. Sie müssen Ihr CMS nicht mehr durchgehen.
Nutzen Sie die Vorteile von HTML5
Die neuen Elemente in HTML5 fügen vor allem für semantische Zwecke viel Leistung hinzu. Es gibt zusätzliche Elemente für die Formatierung, Skalarmessungen, den Taskfortschritt und vieles mehr. Sie können alle neuen Elemente in W3Schools sehen.
Aber wenn Sie diese neun beherrschen, sind Sie auf gutem Weg, HTML5 gut zu nutzen. Wenn Sie sich mit HTML noch nicht auskennen, lesen Sie diese Codebeispiele. 17 Einfache HTML-Code-Beispiele, die Sie in 10 Minuten lernen können 17 Einfache HTML-Code-Beispiele, die Sie in 10 Minuten lernen können Wenn Sie die folgenden 17 HTML-Tags kennen (und die Außerdem können Sie eine grundlegende Webseite von Grund auf erstellen oder den Code einer App wie… Lesen Sie weiter !
Haben Sie begonnen, HTML5 zu verwenden? Welche neuen Elemente finden Sie am nützlichsten? Teilen Sie Ihre Gedanken in den Kommentaren unten mit!
Erfahren Sie mehr über: HTML5, Webdesign, Webentwicklung.
