HTML5 ist das neueste und größte Was ist HTML5 und wie ändert es die Art und Weise, wie ich surfe? [MakeUseOf erklärt]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, kann das Konzept etwas nebulös und verwirrend sein. Offensichtlich,... Weiterlesen Version der am häufigsten verwendeten Markup-Sprache im Web. Es gibt einige große Änderungen gegenüber der letzten Version der Sprache. 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 Schauen Sie sich W3Schools an.
Eine Einführung in semantische Elemente
Wie ein Großteil des Internets hat sich HTML5 verschoben, um sich auf die Semantik zu konzentrieren. Anstatt Tags nur zum Formatieren zu verwenden, werden sie jetzt auch zum Informieren von Browsern verwendet
und Suchmaschinen Top 7 Semantische Suchmaschinen als Alternative zu Google Weiterlesen die Bedeutung dessen, was sie umgeben.
Zum Beispiel,
teilt einem Browser einfach mit, dass er einen Absatz enthält. , auf die wir gleich noch eingehen werden, teilt einem Browser mit, dass er den Hauptinhalt der Seite enthält.
Das Semantic Web entwickelt sich noch und wir haben erst begonnen, die Oberfläche dessen zu kratzen, was es kann. HTML5 hilft zu bringen semantisches Markup Was semantisches Markup ist und wie es das Internet für immer verändern wird [Technologie erklärt] Weiterlesen zu einem viel größeren Teil des Internets, und das kann nur für die Zukunft der semantischen Verarbeitung gut sein.
1.
Das Tag definiert "unabhängige, in sich geschlossene Inhalte". Das einfachste Beispiel ist natürlich ein Artikel. Für diesen bestimmten Artikel öffnen wir das Tag vor der Einführung und schließen es nach dem Abschluss.
Der gesamte Text in Ihrem eigenständigen 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 argumentieren, dass jedes dieser Elemente für sich allein stehen könnte.
In einem Forum kann jeder Beitrag oder Thread als eigenständig betrachtet und mit einem eigenen gekennzeichnet werden Etikett. Zum größten Teil wird es für den Hauptinhalt einer Seite verwendet. Aber denken Sie daran, dass Sie es auch kreativer einsetzen können.
2.
Eng verwandt mit ist . Dies definiert eine „thematische Gruppierung von Inhalten, normalerweise mit einer Überschrift“. So wird drinnen sein … richtig?
Nicht unbedingt. W3 weist darauf hin, dass dies von der Struktur Ihrer Site abhängt. Möglicherweise haben Sie in verschiedenen Abschnitten Ihrer Seite in sich geschlossene Inhalte (denken Sie beispielsweise an die Startseite einer Nachrichtenseite). Möglicherweise haben Sie dann Abschnitte in diesem Artikel.
Warum brauchen Sie einen DAC?
Alles klingt besser.
So richten Sie einen DAC ein
Folgendes müssen Sie tun.. .
Sie können sogar Abschnitte innerhalb von Abschnitten haben, wenn dies zu Ihrer Seite passt. Denken Sie daran, dass ein Abschnitt einfach eine "thematische Gruppierung von Inhalten" ist und Sie viele Orte finden, an denen Sie ihn verwenden können.
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 mehrmals verwenden. Sie können es beispielsweise verwenden, um den Seitentitel und den einleitenden Absatz Ihres Blogposts zu identifizieren. Sie können es aber auch verwenden, um den Einführungsinhalt 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.
Kopfzeilenabschnitte enthalten normalerweise mindestens ein Überschriften-Tag - H1, H2 usw. Sie müssen nicht, aber wenn Sie ein Überschriften-Tag verwenden, ist es im Allgemeinen eine gute Wette, dass Sie Header-Inhalte einschließen.
4.
Laut W3 enthalten Fußzeilentags normalerweise den „Autor des Dokuments, Copyright-Informationen, Links zu Nutzungsbedingungen, Kontaktinformationen usw.“. Sie können sich das als "Housekeeping" -Ding vorstellen.
In der Dokumentation heißt es außerdem, dass Ihre Seite mehr als einen Fußzeilenabschnitt enthalten kann. 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 Navigationsbereich 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. Verwenden Sie diese Option, um den Navigationsbereich zu definieren, und verwenden Sie ihn auf Ihrer Seite nicht erneut.
6.
Eines der interessantesten neuen Elemente in HTML5 ist die Seite. W3 gibt ihm die etwas wenig hilfreiche Definition von "einigen Inhalten, abgesehen von den Inhalten, in denen sie platziert sind".
Kurz gesagt, eine Seite ist alles, was mit den umgebenden Informationen zusammenhängt (aber von diesen getrennt ist). Es könnte sich um eine Seitenleiste handeln, die Ihrem Inhalt Details hinzufügt. Wenn es innerhalb eines Satzes von verwendet wird Tags enthält zusätzliche Informationen, die für das Verständnis des Hauptinhalts nicht erforderlich sind.
Wenn wir beispielsweise eine Seitenleiste in diesen Artikel aufgenommen hätten, die Informationen zum Verlauf von HTML5 enthält, wäre dies eine Nebensache.
Aber die
Der Hauptartikel geht hier. Der Artikel wird hier fortgesetzt.
Da dieses Tag mehrfach verwendet werden kann, kann es verwirrend sein. Wenn Sie bedenken, dass es sich um "sekundären Inhalt" handelt und dass es sich nicht immer um eine Seitenleiste handeln muss, haben Sie eine bessere Vorstellung davon, wie Sie ihn verwenden.
7.
Viele Websites enthalten Informationen, die angezeigt werden müssen, jedoch nicht prominent. Möglicherweise handelt es sich um die Copyright-Informationen für ein Foto. Oder das Kleingedruckte eines Wettbewerbs. Diese Art von Informationen ist genau das, wofür das Detail-Tag bestimmt ist.
Wenn Sie das Detail-Tag verwenden, erstellen Sie versteckten Text, der einfach angezeigt werden kann. Hier 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 zu erhalten. 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 die anderen Inhalte ausgeblendet sind. Beachten Sie, dass Sie im Detailabschnitt andere Tags verwenden können: Überschriften, Abschnitte usw.
Da sind andere coole Dinge, die du mit HTML machen kannst 8 coole HTML-Effekte, die jeder seiner Website hinzufügen kannSie müssen weder CSS noch PHP kennen, um eine schicke Site zu erstellen. Verwenden Sie diese coolen HTML-Tricks, um fantastische Effekte zu erzielen. Weiterlesen Auch wenn Sie nicht viel über CSS oder JSON wissen.
8-9. und
Mach dir keine Sorgen, die Das Tag, das Sie seit Jahren verwenden, verschwindet nicht. geht um das Bild-Tag herum und teilt dem Browser mit, dass es sich um ein in sich geschlossenes Bild, Diagramm, Codeliste oder eine andere Figur handelt.
Wenn eine Figur von der Seite entfernt wird, hat dies keinen Einfluss auf den Inhaltsfluss.
geht innerhalb des Figurentags und gibt eine Beschriftung für ein Bild an. Es könnte ungefähr so aussehen:
Das ist unser Logo!
Auf diese Weise können Sie Ihren Bildern eine Beschriftung hinzufügen. Sie müssen Ihr CMS nicht mehr durchgehen.
Nutzen Sie die Leistung von HTML5
Die neuen Elemente in HTML5 bieten viel Leistung, insbesondere für semantische Zwecke. Es gibt zusätzliche Elemente für Formatierung, Skalarmessungen, Aufgabenfortschritt und mehr. Du kannst sehen alle neuen Elemente bei W3Schools.
Wenn Sie diese neun jedoch beherrschen, sind Sie auf dem besten Weg, HTML5 gut zu nutzen. Wenn Sie mit HTML noch nicht vertraut sind, sollten Sie dies unbedingt überprüfen diese Codebeispiele 17 Beispiele für einfachen HTML-Code, die Sie in 10 Minuten lernen könnenMöchten Sie eine einfache Webseite erstellen? Lernen Sie diese HTML-Beispiele kennen und probieren Sie sie in einem Texteditor aus, um zu sehen, wie sie in Ihrem Browser aussehen. Weiterlesen !
Haben Sie angefangen, HTML5 zu verwenden? Welche neuen Elemente finden Sie am nützlichsten? Teilen Sie Ihre Gedanken in den Kommentaren unten!
Dann ist ein Content-Strategie- und Marketingberater, der Unternehmen dabei hilft, Nachfrage und Leads zu generieren. Er bloggt auch über Strategie- und Content-Marketing auf dannalbright.com.
