Was ist der Unterschied zwischen einem Element und einem Tag? Wann sollte ich Strong verwenden und wann sollte ich Fett verwenden? Was zum Teufel ist das DOM? Wenn Sie sich mit Webdesign noch nicht auskennen, ist die Fachsprache immer eine der größten Hürden, die es zu überwinden gilt. So viele Fachbegriffe werden leichtfertig herumgeschleudert und kaum erklärt, dass man leicht verloren gehen kann.
Diese Serie dient als grundlegende Einführung in einige Begriffe, die jeder neue Webdesigner unbedingt in sein Vokabular aufnehmen sollte. Dies ist keine erschöpfende Vokabelliste, sondern eher eine Einführung in ein paar Begriffen, die mir als Anfänger schwer zu verstehen waren. Wir beginnen heute mit HTML und werden in naher Zukunft mit CSS fortfahren.
HTML & HTML5
HTML
HTML steht für HyperText Markup Language. Um diesen Begriff besser zu verstehen, teilen wir ihn Stück für Stück auf.
Hypertext
Hypertext ist einfach Text, der auf einem digitalen Gerät angezeigt wird und aktive Links verwendet, um die Navigation zu vereinfachen. Um zu dieser Seite zu gelangen, haben Sie wahrscheinlich auf einen Text geklickt, der Ihren Browser an den richtigen Ort weiterleitete.
Auszeichnungssprache
Eine Auszeichnungssprache ist eine Möglichkeit, Dokumente mit Anmerkungen zu versehen. Mit einer Markup-Sprache können Sie aus reinem Text durch die Verwendung einer speziellen Syntax, die dem Parser anzeigt, wie die an ihn übergebenen Informationen und Elemente angezeigt werden sollen, reich formatierte Dokumente verwenden.
Set es zusammen
In diesem Sinne ist HTML eine Möglichkeit, Dokumente zur Anzeige mit Anmerkungen zu versehen und anschließend zu formatieren, was weitgehend von einem System abhängt, das textbasierte Verknüpfungen ermöglicht. Dies ist die Grundlage dafür, wie das Web funktioniert.
HTML5
HTML5 ist genau das, was es klingt, die fünfte große Iteration von HTML. HTML5 dient als Ersatz für HMTL 4.01 und XHTML 1.1. Wenn Sie also Verweise auf diese Sprachen sehen, wissen Sie einfach, dass HTML5 die neuere Syntax ist.
HTML5 bringt eine Menge neuer Funktionen, Elemente und Syntaxänderungen in HTML, zu viele, um sie hier aufzulisten. Einige, die Sie vielleicht regelmäßig erwähnen, sind ein Canvas-Element zum Rendern von Grafiken, ein neuer vereinfachter Doctype, die Möglichkeit, Video ohne benutzerdefinierte Plugins wie Flash einzubetten, und neue APIs für Entwickler von Webanwendungen.
Um alles über HTML5 zu erfahren, schauen Sie sich die folgenden umfangreichen Ressourcen an:
- HTML5 Rocks
- Tauchen Sie ein in HTML5
- HTML5 Doktor
Zur Semantik
Semantisches HTML
Als ich mit Webdesign anfing, hörte ich diesen Satz täglich und es machte mich verrückt. Jeder schien immer in den Armen zu sein, was semantisch war und was nicht. Der Grund dafür ist einfach: Ein Semantic Web ist besser.
Im Kern geht es hier im Kern darum, dass Ihr Markup so viel Sinn wie möglich vermittelt. Um dies zu erreichen, sollten Sie die Elemente so verwenden, wie sie beabsichtigt sind, und auf eine Art und Weise verwendet werden, die eindeutig an alle Personen oder an irgendetwas, das Ihren Code betrachtet, kommuniziert.
Beispielsweise war es in der Regel so, dass Entwickler ganze Webseiten mit HTML-Tabellen strukturierten. Das Problem dabei ist, dass das Tabellenelement einen ganz bestimmten Zweck hat: Anzeige einer Informationstabelle (denken Sie an eine Preistabelle oder ein Feature-Vergleichsdiagramm). Wenn Sie das sehen
div
Während wir uns mit dem Thema "Semantic Web Design" beschäftigen, könnten wir genauso gut über das Element diskutieren, das seit table: div am meisten diskutiert wird. Wenn Sie sich schon einmal die Quelle einer HTML-Seite angesehen haben, werden Sie wahrscheinlich überall Divs sehen. Was zum Teufel ist also ein Div?
Der Begriff? Div? ist kurz für? Division.? Wenn Sie denken, dass dies etwas vage ist, haben Sie recht. Tatsächlich besteht der gesamte Zweck des div-Elements darin, vage zu sein. Divs sind im Grunde ein generischer Container für Inhaltsblöcke, die sonst nicht auf semantischer Ebene beschrieben werden können.
Dies führt natürlich zu der Idee, dass divs nicht semantische Kreaturen sind, was bedeutet, dass ein div an und für sich nicht wirklich Sinn vermittelt. Angesichts der Prinzipien, die wir in den vorherigen Definitionen umrissen haben, sollten Divs daher zumindest in der Theorie so sparsam wie möglich verwendet werden. In der Praxis sind viele Entwickler ziemlich großzügig.
Da sie so vielseitig und nützlich für die Erstellung von Strukturen sind, die mit CSS leicht anvisiert werden können, verwenden wir instinktiv Tonnen von divs. Wo immer möglich, sollten Sie immer nach etwas mehr Semantik greifen. Betrachten Sie beispielsweise den folgenden Codeblock, der vor HTML5 recht beliebt war.
Mit der ID haben wir eine gewisse Bedeutung beigemessen, aber das div selbst ist immer noch ein generischer, unerwünschter Gegenstand. Mit HTML5 können wir das div aufheben und das viel semantischere Header-Element verwenden.
em vs. kursiv und stark vs. mutig
Dies kann wirklich schwierig werden, vor allem, weil HTML5 für diese Begriffe etwas modifizierte semantische Bedeutung bietet. Beginnen wir mit em vs. italic.
Die Spezifikation für die Verwendung des kursiven Elements gibt an, dass es jetzt für Text verwendet wird, der vom umgebenden Inhalt versetzt ist, ohne dass eine besondere Betonung oder Wichtigkeit vorhanden ist und für die die herkömmliche typografische Darstellung kursiver Text ist.
Der Schlüssel hier ist, dass das kursive Element keine zusätzliche Betonung vermittelt, während das em-Tag dies offensichtlich tut. Betrachten Sie es einfach als eine andere Stimmung oder Stimme.
Beispiele sind eine taxonomische Bezeichnung, ein technischer Begriff, ein idiomatischer Ausdruck aus einer anderen Sprache, ein Gedanke oder ein Schiffsname.
Vergleichen Sie dies mit dem Element em, das für starke Betonung verwendet wird. Hier versuchen wir tatsächlich zu kommunizieren, dass Sie den Inhalt des Elements anders als den Rest des Satzes sprechen würden.
Im weiteren Verlauf wurde das Fett-Element so geändert, dass es eine fast identische Bedeutung wie das Kursiv-Element hat: Versatz von seinem umgebenden Inhalt, ohne dass es einer besonderen Betonung oder Wichtigkeit entspricht, und für die die herkömmliche typografische Darstellung fett formatierter Text ist.
Wieder sehen wir, dass der Schlüssel hier ist, dass wir nicht wirklich Akzente setzen, sondern lediglich typografische Konventionen befolgen. Beispielsweise könnte ein Skript die Namen der Zeichen verbessern.
Alternativ sollten Sie stark verwenden, um "starke Bedeutung" zu vermitteln. Beispielsweise verwenden Warnmeldungen häufig diese Konvention.
Mit Strong können Sie sogar Verschachtelung verwenden, um mehr Bedeutung zu erzielen.
Um mehr über diese vier Elemente zu erfahren, lesen Sie HTML5 Doctor. Hier finden Sie eine ausführliche Erklärung zu den Änderungen, die in HTML5 implementiert wurden, und wie Sie diese verwenden sollten.
Attribute
Klasse vs. ID
Einer der wichtigsten Unterschiede, den Sie als Front-End-Webdesigner verstehen müssen, ist der Unterschied zwischen einem Clasa und einer ID. Betrachten Sie die folgenden zwei Ausschnitte. Verstehen Sie, wie sie sich unterscheiden?
Zum Glück ist der Unterschied eigentlich einfach zu verstehen: IDs sind eindeutig und Klassen sind resuable. Das Folgende ist beispielsweise keine gültige Verwendung von HTML, da ich dieselbe ID für zwei verschiedene Elemente verwendet habe.
Das Update hier besteht darin, diese IDs in Klassen zu ändern. Dieselbe Klasse kann auf beliebig viele Elemente angewendet werden. Durch das Targeting auf eine Klasse in Ihrem CSS können Sie mehrere Elemente auf einmal erstellen.
Einige sind so weit gegangen zu sagen, dass Sie niemals IDs verwenden sollten und stattdessen immer auf Klassen achten sollten, da sie vielseitiger sind. Das Argument macht Sinn, aber um ehrlich zu sein, lehne ich es nicht wirklich ab und finde immer noch gültige Verwendungen für IDs.
Andere Jargon
Elemente vs. Tags
Auf der einen Seite scheint diese Unterscheidung nicht die kritischste Sache der Welt zu sein. Immerhin verwenden viele Entwickler diese Begriffe austauschbar. Ein korrektes Verständnis der grundlegenden Struktur von HTML ist jedoch die Grundlage für eine solide Ausbildung in der Webentwicklung. Es mag unspektakulär erscheinen, aber diese beiden Begriffe bedeuten in der Tat verschiedene Dinge.
Beginnen wir zur Veranschaulichung mit der grundlegendsten Ebene. Folgendes ist ein? Starttag? für einen Listeneintrag.
Ähnlich ist hier das? End-Tag? für einen Listeneintrag.
Jeder von ihnen ist ein Tag für sich. Sie sind jedoch keine Elemente. Das Element list list sieht folgendermaßen aus.
Kurz gesagt, HTML besteht aus Elementen und Elemente aus Tags und Inhalt. Im Allgemeinen enthält ein Element ein Start-Tag, einen Inhalt und ein End-Tag. Einige Tags sind jedoch selbstschließend, sodass diese Terminologie etwas kompliziert werden kann.
Aktualisieren!
Wenn Paul Irish sagt, dass Sie falsch liegen, seien wir ehrlich. Ich kann nicht so tun, als wüsste ich ein Zehntel der Sachen, die dieser Kerl im Schlaf über Webentwicklung vortragen kann, und ich schätze es sehr, dass er sich die Zeit genommen hat, uns in den Kommentaren in die richtige Richtung zu weisen.
Ich habe eine Reihe von unterschiedlichen Quellen nach diesen Definitionen durchsucht und schließlich meine eigenen zusammengebastelt, je nachdem, wo Übereinstimmung zu sein schien. In diesem Video beschreibt Paul jedoch, was ein Element wirklich ist, was viel mehr ist, als Sie denken. Letztendlich kommt er zu dem Schluss, dass dies nicht der größte Deal der Welt ist, aber wenn wir uns mit dem Thema befassen, könnten wir genauso gut dafür sorgen, dass wir es richtig machen!
DOM
Dies ist eine andere Sache, die mich sehr verwirrte, als ich anfing, HTML zu schreiben. Ich habe ständig gehört, dass sich Leute auf das DOM beziehen. Ich dachte, es klang nach etwas übermäßig Technischem, das ich wahrscheinlich nicht verstehen würde. Ich wusste, dass es ein DOM gab und vielleicht, dass die Leute alles durchqueren würden, aber ich hatte keine Ahnung, was das alles bedeutete. Die offensichtliche Antwort ist das Document Object Model. hat mich nicht wo gebracht.
Es stellt sich heraus, dass das DOM eigentlich ziemlich einfach zu verstehen ist. Grundsätzlich bezieht es sich einfach auf die Struktur einer Webseite und gibt uns eine klare Konvention für die Visualisierung und Bezugnahme auf jedes Stück.
Anders ausgedrückt, das DOM ist der Familienstammbaum einer Webseite. Oben haben Sie das Dokument, das sich bis zum Root- oder HTML-Element und anschließend zu den Kopf- und Körperelementen erstreckt. Wenn wir das Körperelement unten betrachten, können wir erkennen, dass es sich in andere Elemente verzweigt, von denen jedes seinen eigenen Inhalt und Unterelemente haben kann.
Wir beziehen uns auf die Beziehungen im DOM-Baum genauso wie in einem Familienstammbaum. Wenn sich ein Element in einem anderen Element befindet, ist es ein untergeordnetes Element eines übergeordneten Elements. Wenn zwei Elemente ein übergeordnetes Element direkt gemeinsam nutzen, handelt es sich um Geschwister.
Diese Struktur und Sprache gibt uns eine Schnittstelle für die Interaktion mit bestimmten Elementen über eine Webseite. In JavaScript oder sogar in HTML können Sie beispielsweise Ihr Wissen über das DOM dazu verwenden, das erste Kind einer ungeordneten Liste anzuvisieren, d. H. Das erste li-Element innerhalb des ul-Elements.
Tiefer gehen
Die obige Definition ist wirklich eine vereinfachte Version des DOM. Wenn Sie genau wissen, wie das DOM die Struktur von HTML-Dokumenten definiert, können Sie zu den komplizierteren Definitionen übergehen, die jetzt hoffentlich etwas mehr Sinn ergeben. Schauen Sie sich die W3C-Definition für eine ausführlichere Diskussion an.
Hier sehen Sie das DOM, das als Programmierschnittstelle für Dokumente bezeichnet wird, die eine Objektstruktur definieren. Sie sehen auch, dass diese API verschiedene Module enthält, beispielsweise CSS und MouseEvents, die auf verschiedene Arten implementiert werden können.
Block gegenInline-Elemente
Wenn Sie Elemente in HTML erstellen und ihren Stil in CSS definieren, werden Sie feststellen, dass der Browser verschiedene Elemente aus einer Layout-Perspektive auf unterschiedliche Weise interpretiert.
Wenn Sie ein Element auf Blockebene erstellen, z. B. einen Absatz oder ein Div, wird es in einer neuen Zeile oder Zeile im Dokumentfluss angezeigt. Wenn Sie also drei Absätze erstellen, werden diese in der Live-Vorschau vertikal gestapelt und nicht horizontal als Spalten dargestellt. Ein weiterer wichtiger Unterschied ist hier, dass Elemente auf Blockebene eine bestimmte Breite und Höhe erhalten können.
Ein Inline-Element wird dagegen in einer Zeile dargestellt. mit dem Inhalt davor und danach. Wenn Sie beispielsweise ein starkes Element in einen Absatz einfügen, wird keine neue Zeile erstellt, sondern der Absatzfluss wird beibehalten. Inline-Elemente haben eine Höhe und Breite, die automatisch durch ihren Inhalt festgelegt wird. Diese Werte können nicht spezifisch ausgedrückt werden.
Verhalten ändern
Verwendung der CSS-Anzeige? Eigenschaft können wir das Verhalten bestimmter Elemente ändern. Zum Beispiel nehme ich hier einen Anker, der standardmäßig ein Inline-Element ist, und sage dem Browser, dass er es so rendert, als wäre es ein Block-Level-Element. Dies erhält nun eine eigene Linie, die auf eine bestimmte Höhe und Breite eingestellt ist.
Wir haben dieses Thema in unserem Artikel zur Verwendung von? Display: Inline-Block? als Alternative zu Schwimmern. Überprüfen Sie das hier.
Mit welchen Begriffen kämpfen Sie?
Ich hoffe, dass dieses kurze Glossar mit HTML-Begriffen einige potenziell verwirrende Themen beleuchtet hat. Jeder von ihnen hat mich irgendwann einmal in die Knie gezwungen, also fühle mich überhaupt nicht schlecht, wenn es etwas gibt, das du vorher noch nie richtig verstanden hast.
Gibt es andere HTML-Begriffe, die Sie derzeit entweder verwirren oder Sie in der Vergangenheit verwirrt haben? Lass es uns in den Kommentaren wissen und schau bald wieder vorbei, um unsere CSS Vocab-Aktualisierung zu erhalten!