Das HTML-Handbuch

Hinweis: Sie können eine PDF / ePub / Mobi-Version dieses Buches herunterladen, um es offline lesen zu können.

Einführung

Herzlich willkommen! Ich habe dieses Buch geschrieben, damit Sie schnell HTML lernen und sich mit den fortgeschrittenen HTML-Themen vertraut machen können.

HTML, eine Abkürzung für Hyper Text Markup Language, ist einer der grundlegendsten Bausteine ​​des Web.

HTML wurde 1993 offiziell geboren und hat sich seitdem zu seinem aktuellen Status entwickelt. Es hat sich von einfachen Textdokumenten zu leistungsstarken Webanwendungen entwickelt.

Dieses Handbuch richtet sich an ein breites Publikum.

Erstens der Anfänger. Ich erkläre HTML von Null auf prägnante, aber umfassende Weise, sodass Sie dieses Buch verwenden können, um HTML aus den Grundlagen zu lernen.

Dann der Profi. HTML wird oft als zweitrangig angesehen. Es könnte selbstverständlich sein.

Dennoch sind viele Dinge für viele Menschen dunkel. Ich eingeschlossen. Ich habe dieses Handbuch geschrieben, um das Thema besser zu verstehen, denn wenn ich etwas erklären muss, stelle ich besser sicher, dass ich die Sache zuerst genau kenne.

Selbst wenn Sie in Ihrer täglichen Arbeit kein HTML schreiben, kann Ihnen das Wissen, wie HTML funktioniert, helfen, Kopfschmerzen zu ersparen, wenn Sie es von Zeit zu Zeit verstehen müssen, beispielsweise beim Optimieren einer Webseite.

Sie können mich auf Twitter @flaviocopes erreichen.

Meine Website ist flaviocopes.com.

Buchverzeichnis

  • Vorwort
  • HTML-Grundlagen
  • Die Dokumentüberschrift
  • Der Dokumentkörper
  • Tags, die mit Text interagieren
  • Links
  • Container-Tags und Seitenstruktur-HTML
  • Formen
  • Tabellen
  • Multimedia-Tags: Audio und Video
  • iframes
  • Bilder
  • Barrierefreiheit

VORWORT

HTML ist die Grundlage des Wunders namens Web.

Unter diesem ziemlich einfachen und begrenzten Regelwerk steckt eine unglaubliche Kraft, mit der wir - Entwickler, Macher, Designer, Schriftsteller und Bastler - Dokumente, Apps und Erlebnisse für Menschen auf der ganzen Welt erstellen können.

Mein erstes HTML-Buch erschien 1997 und hieß "HTML Unleashed". Ein großer, viele Seiten langer Band.

Über 20 Jahre sind vergangen, und HTML ist immer noch die Grundlage des Web, mit minimalen Änderungen von damals.

Sicher, wir haben mehr semantische Tags, Präsentations-HTML ist keine Sache mehr und CSS hat sich um das Design der Dinge gekümmert.

Der Erfolg von HTML basiert auf einer Sache: Einfachheit .

Es widersetzte sich der Entführung in einen XML-Dialekt über XHTML, als die Leute schließlich erkannten, dass das Ding viel zu komplex war.

Dies geschah aufgrund eines anderen Merkmals, das es uns bietet: Vergebung . Es gibt einige Regeln, richtig, aber nachdem Sie diese gelernt haben, haben Sie viel Freiheit.

Browser haben gelernt, belastbar zu sein und immer zu versuchen, ihr Bestes zu geben, wenn sie HTML analysieren und den Benutzern präsentieren.

Und die gesamte Webplattform hat eines richtig gemacht: Sie hat nie die Abwärtskompatibilität gebrochen. Ziemlich unglaublich, wir können auf HTML-Dokumente zurückgreifen, die 1991 geschrieben wurden, und sie sehen so aus, wie sie damals ausgesehen haben.

Wir wissen sogar, was die erste Webseite war. Es ist dies: //info.cern.ch/hypertext/WWW/TheProject.html

Dank einer weiteren wichtigen Funktion des Webs und des HTML- Codes können Sie die Quelle der Seite sehen: Wir können den HTML-Code jeder Webseite überprüfen .

Nimm das nicht als selbstverständlich an. Ich kenne keine andere Plattform, die uns diese Fähigkeit gibt.

Mit den außergewöhnlichen Entwicklertools, die in jedem Browser integriert sind, können wir HTML von jedem auf der Welt überprüfen und uns inspirieren lassen.

Wenn Sie mit HTML noch nicht vertraut sind, soll Ihnen dieses Buch den Einstieg erleichtern. Wenn Sie ein erfahrener Webentwickler sind, wird dieses Buch Ihr Wissen verbessern.

Ich habe beim Schreiben so viel gelernt, obwohl ich seit über 20 Jahren mit dem Web arbeite, und ich bin sicher, dass Sie auch etwas Neues finden werden.

Oder Sie lernen etwas Altes wieder, das Sie vergessen haben.

In jedem Fall ist es das Ziel des Buches, Ihnen nützlich zu sein, und ich hoffe, es gelingt.

HTML-GRUNDLAGEN

HTML ist ein Standard, der von der WHATWG definiert wird , einer Abkürzung für Web Hypertext Application Technology Working Group, einer Organisation, die aus Personen besteht, die mit dem beliebtesten Webbrowser arbeiten. Dies bedeutet, dass es im Wesentlichen von Google, Mozilla, Apple und Microsoft gesteuert wird.

In der Vergangenheit war das W3C (World Wide Web Consortium) die Organisation, die für die Erstellung des HTML-Standards verantwortlich war.

Die Kontrolle wechselte informell von W3C zu WHATWG, als klar wurde, dass der W3C-Vorstoß in Richtung XHTML keine gute Idee war.

Wenn Sie noch nie von XHTML gehört haben, finden Sie hier eine kurze Geschichte. In den frühen 2000er Jahren glaubten wir alle, dass die Zukunft des Web XML ist (ernsthaft). Daher wurde HTML von einer SGML-basierten Autorensprache zu einer XML-Auszeichnungssprache.

Es war eine große Veränderung. Wir mussten mehr Regeln kennen und respektieren. Strengere Regeln.

Schließlich erkannten Browser-Anbieter, dass dies nicht der richtige Weg für das Web war, und sie drängten zurück und erstellten das, was jetzt als HTML5 bekannt ist.

W3C war sich nicht wirklich einig, die Kontrolle über HTML aufzugeben, und wir hatten jahrelang zwei konkurrierende Standards, von denen jeder darauf abzielte, der offizielle zu sein. Schließlich wurde am 28. Mai 2019 von W3C offiziell bekannt gegeben, dass die "wahre" HTML-Version die von WHATWG veröffentlichte war.

Ich habe HTML5 erwähnt. Lassen Sie mich diese kleine Geschichte erklären. Ich weiß, es ist bis jetzt etwas verwirrend, wie bei vielen Dingen im Leben, wenn viele Schauspieler involviert sind, aber es ist auch faszinierend.

Wir hatten 1993 HTML Version 1. Hier ist der ursprüngliche RFC.

HTML 2 folgte 1995.

Wir haben HTML 3 im Januar 1997 und HTML 4 im Dezember 1997 erhalten.

Beschäftigte Zeiten!

Über 20 Jahre vergingen, wir hatten diese ganze XHTML-Sache und schließlich kamen wir zu dieser HTML5- "Sache", die nicht mehr nur HTML ist .

HTML5 ist ein Begriff, der jetzt eine ganze Reihe von Technologien definiert, einschließlich HTML, aber viele APIs und Standards wie WebGL, SVG und mehr hinzufügt.

Das Wichtigste, was Sie hier verstehen sollten, ist Folgendes: Es gibt derzeit keine HTML-Version mehr. Es ist ein Lebensstandard. Wie CSS, das als "3" bezeichnet wird, aber in Wirklichkeit eine Reihe unabhängiger Module ist, die separat entwickelt wurden. Wie bei JavaScript, wo wir jedes Jahr eine neue Ausgabe haben, aber heutzutage kommt es nur darauf an, welche einzelnen Funktionen von der Engine implementiert werden.

Ja, wir nennen es HTML5, aber HTML4 stammt aus dem Jahr 1997. Das ist eine lange Zeit für alles, geschweige denn für das Web.

Hier "lebt" jetzt der Standard: //html.spec.whatwg.org/multipage.

HTML ist die Auszeichnungssprache, mit der wir Inhalte strukturieren, die wir im Web verwenden.

HTML wird dem Browser auf verschiedene Arten bereitgestellt.

  • Es kann von einer serverseitigen Anwendung generiert werden, die es abhängig von der Anforderung oder den Sitzungsdaten erstellt, z. B. einer Rails- oder Laravel- oder Django-Anwendung.
  • Es kann von einer clientseitigen JavaScript-Anwendung generiert werden, die HTML im laufenden Betrieb generiert.
  • Im einfachsten Fall kann es in einer Datei gespeichert und dem Browser von einem Webserver bereitgestellt werden.

Lassen Sie uns in diesen letzten Fall eintauchen. Obwohl es in der Praxis wahrscheinlich die am wenigsten verbreitete Methode ist, HTML zu generieren, ist es dennoch wichtig, die Grundbausteine ​​zu kennen.

Konventionell wird eine HTML-Datei mit einer .htmloder .htm-Erweiterung gespeichert .

In dieser Datei organisieren wir den Inhalt mithilfe von Tags .

Tags umschließen den Inhalt, und jedes Tag gibt dem umgebrachten Text eine besondere Bedeutung.

Lassen Sie uns ein paar Beispiele machen.

Dieses HTML-Snippet erstellt einen Absatz mit dem pTag:

A paragraph of text

Dieses HTML-Snippet erstellt eine Liste von Elementen mithilfe des ulTags, das eine ungeordnete Liste bedeutet , und der liTags, die ein Listenelement bedeuten :

  • First item
  • Second item
  • Third item

Wenn eine HTML-Seite vom Browser bereitgestellt wird, werden die Tags interpretiert und der Browser rendert die Elemente gemäß den Regeln, die ihr visuelles Erscheinungsbild definieren.

Einige dieser Regeln sind integriert, z. B. wie eine Liste gerendert wird oder wie ein Link blau unterstrichen wird.

Einige andere Regeln werden von Ihnen mit CSS festgelegt.

HTML ist nicht präsentativ. Es geht nicht darum, wie die Dinge aussehen . Stattdessen geht es darum, was Dinge bedeuten .

Es ist Sache des Browsers, zu bestimmen, wie die Dinge aussehen, wobei die Anweisungen von der Person, die die Seite erstellt, mit der CSS-Sprache definiert werden.

Diese beiden Beispiele, die ich gemacht habe, sind HTML-Schnipsel, die außerhalb eines Seitenkontexts erstellt wurden.

HTML-Seitenstruktur

Lassen Sie uns ein Beispiel für eine richtige HTML-Seite machen.

Die Dinge beginnen mit der Dokumenttypdeklaration (auch bekannt als doctype ), einer Möglichkeit, dem Browser mitzuteilen, dass es sich um eine HTML-Seite handelt und welche HTML-Version wir verwenden.

Modernes HTML verwendet diesen Doctype:

Dann haben wir das htmlElement, das ein öffnendes und ein schließendes Tag hat:

  ...  

Die meisten Tags werden paarweise mit einem öffnenden und einem schließenden Tag geliefert. Das schließende Tag wird genauso geschrieben wie das öffnende Tag, jedoch mit einem /:

some content 

Es gibt ein paar selbstschließenden Tags, die Mittel , die sie keinen separaten schließenden Tag benötigen , da sie enthalten nichts , in ihnen .

Das htmlStart-Tag wird am Anfang des Dokuments direkt nach der Dokumenttypdeklaration verwendet.

Das htmlEnding-Tag ist das letzte, was in einem HTML-Dokument vorhanden ist.

Innerhalb des htmlElements haben wir 2 Elemente: headund body:

   ...   ...   

Im Inneren headbefinden sich Tags, die für die Erstellung einer Webseite unerlässlich sind, z. B. der Titel, die Metadaten sowie internes oder externes CSS und JavaScript. Meistens Dinge, die nicht direkt auf der Seite erscheinen, sondern nur dem Browser (oder Bots wie dem Google-Suchbot) helfen, sie richtig anzuzeigen.

Im Inneren haben bodywir den Inhalt der Seite. Das sichtbare Zeug .

Tags vs Elemente

Ich habe Tags und Elemente erwähnt. Was ist der Unterschied?

Elemente haben ein Start-Tag und ein Schluss-Tag. In diesem Beispiel verwenden wir die pStart- und Schließ-Tags, um ein pElement zu erstellen :

A paragraph of text

Ein Element bildet also das gesamte Paket :

  • Starttag
  • Textinhalt (und möglicherweise andere Elemente)
  • Tag schließen

Wenn ein Element kein schließendes Tag hat, wird es nur mit dem Start-Tag geschrieben und darf keinen Textinhalt enthalten.

Das heißt, ich könnte den Tag- oder Elementbegriff im Buch verwenden, der dasselbe bedeutet, außer wenn ich ausdrücklich das Start- oder End-Tag erwähne.

Attribute

Das Start-Tag eines Elements kann spezielle Informationsausschnitte enthalten, die wir anhängen können, sogenannte Attribute .

Attribute haben die key="value"Syntax:

A paragraph of text

Sie können auch einfache Anführungszeichen verwenden, aber die Verwendung von doppelten Anführungszeichen in HTML ist eine nette Konvention.

Wir können viele davon haben:

A paragraph of text

und einige Attribute sind boolesch, was bedeutet, dass Sie nur den Schlüssel benötigen:

Die Attribute classund idsind zwei der am häufigsten verwendeten Attribute.

Sie haben eine besondere Bedeutung und sind sowohl in CSS als auch in JavaScript nützlich.

Der Unterschied zwischen den beiden besteht darin, dass an idim Kontext einer Webseite eindeutig ist. es kann nicht dupliziert werden.

Klassen hingegen können auf mehreren Elementen mehrfach vorkommen.

Außerdem idist an nur ein Wert. classkann mehrere Werte enthalten, die durch ein Leerzeichen getrennt sind:

A paragraph of text

Es ist üblich, den Bindestrich -zu verwenden, um Wörter in einem Klassenwert zu trennen, aber es ist nur eine Konvention.

Dies sind nur zwei der möglichen Attribute, die Sie haben können. Einige Attribute werden nur für ein Tag verwendet. Sie sind hoch spezialisiert.

Andere Attribute können allgemeiner verwendet werden. Sie haben gerade gesehen idund class, aber wir haben auch andere, mit styledenen Inline-CSS-Regeln in ein Element eingefügt werden können.

Groß- und Kleinschreibung wird nicht berücksichtigt

Bei HTML wird die Groß- und Kleinschreibung nicht berücksichtigt. Tags können in Großbuchstaben oder Kleinbuchstaben geschrieben werden. In den frühen Tagen waren Kappen die Norm. Heute ist Kleinbuchstaben die Norm. Es ist eine Konvention.

Normalerweise schreibst du so:

A paragraph of text

so nicht:

A paragraph of text

Leerraum

Ziemlich wichtig. Selbst wenn Sie in HTML einer Zeile mehrere Leerzeichen hinzufügen, wird diese von der CSS-Engine des Browsers reduziert.

Zum Beispiel das Rendern dieses Absatzes:

A paragraph of text

ist das gleiche wie das:

A paragraph of text

und das gleiche wie das:

A paragraph of text

> Mit der White-Space-CSS-Eigenschaft können Sie das Verhalten ändern. Weitere Informationen dazu, wie CSS Leerzeichen verarbeitet, finden Sie in der CSS-Spezifikation

Ich bevorzuge normalerweise

A paragraph of text

oder

A paragraph of text

Verschachtelte Tags sollten je nach Wunsch mit 2 oder 4 Zeichen eingerückt werden:

A paragraph of text

  • A list item

Hinweis: Diese Funktion "Leerraum ist nicht relevant" bedeutet, dass Sie ziemlich verrückt werden können, wenn Sie zusätzlichen Speicherplatz hinzufügen möchten. Ich schlage vor, Sie verwenden CSS, um bei Bedarf mehr Speicherplatz zu schaffen.

Hinweis: In besonderen Fällen können Sie die HTML-Entität verwenden (ein Akronym, das nicht unterbrechendes Leerzeichen bedeutet ) - mehr zu HTML-Entitäten später. Ich denke, das sollte nicht missbraucht werden. CSS wird immer bevorzugt, um die visuelle Darstellung zu ändern.

DIE DOKUMENTENKOPF

Das headTag enthält spezielle Tags, die die Dokumenteigenschaften definieren.

Es steht immer vor dem bodyTag, direkt nach dem Eröffnungs- htmlTag:

   ...  ...  

Wir verwenden niemals Attribute für dieses Tag. Und wir schreiben keine Inhalte darin.

Es ist nur ein Container für andere Tags. Darin können wir eine Vielzahl von Tags haben, je nachdem, was Sie tun müssen:

  • title
  • script
  • noscript
  • link
  • style
  • base
  • meta

Das titleTag

Das titleTag bestimmt den Seitentitel. Der Titel wird im Browser angezeigt und ist besonders wichtig, da er einer der Schlüsselfaktoren für die Suchmaschinenoptimierung (SEO) ist.

Das scriptTag

Dieses Tag wird verwendet, um der Seite JavaScript hinzuzufügen.

Sie können es inline einfügen, indem Sie ein öffnendes Tag, den JavaScript-Code und dann das schließende Tag verwenden:

 ..some JS  

Oder Sie können eine externe JavaScript-Datei mit dem folgenden srcAttribut laden :

Das typeAttribut ist standardmäßig auf eingestellt text/javascript, daher ist es vollständig optional.

Es gibt etwas ziemlich Wichtiges über dieses Tag zu wissen.

Manchmal wird dieses Tag am Ende der Seite unmittelbar vor dem schließenden Tag verwendet. Warum? Aus Leistungsgründen.

Das Laden von Skripten blockiert standardmäßig das Rendern der Seite, bis das Skript analysiert und geladen wird.

Wenn Sie es am Ende der Seite platzieren, wird das Skript geladen und ausgeführt, nachdem die gesamte Seite bereits analysiert und geladen wurde. Dies bietet dem Benutzer eine bessere Erfahrung, wenn es im headTag verbleibt.

Meiner Meinung nach ist dies jetzt eine schlechte Praxis. Lass scriptim headTag leben.

In modernem JavaScript haben wir eine Alternative, die leistungsfähiger ist, als das Skript am Ende der Seite zu belassen - das deferAttribut. Dies ist ein Beispiel, das eine file.jsDatei relativ zur aktuellen URL lädt :

Dies ist das Szenario, das den schnelleren Pfad zu einer schnell ladenden Seite und schnelles Laden von JavaScript auslöst.

Hinweis: Das asyncAttribut ist ähnlich, aber meiner Meinung nach eine schlechtere Option als defer. Ich beschreibe auf der Seite //flaviocopes.com/javascript-async-defer/ ausführlicher, warum.

Das noscriptTag

Dieses Tag wird verwendet, um zu erkennen, wenn Skripte im Browser deaktiviert sind.

Hinweis: Benutzer können JavaScript-Skripte in den Browsereinstellungen deaktivieren. Oder der Browser unterstützt sie möglicherweise nicht standardmäßig.

Es wird unterschiedlich verwendet, je nachdem, ob es im Dokumentenkopf oder im Dokumententext abgelegt ist.

Wir sprechen jetzt über den Dokumentenkopf. Lassen Sie uns zunächst diese Verwendung einführen.

In diesem Fall kann das noscriptTag nur andere Tags enthalten:

  • link Stichworte
  • style Stichworte
  • meta Stichworte

um die von der Seite bereitgestellten Ressourcen oder die metaInformationen zu ändern , wenn Skripte deaktiviert sind.

In diesem Beispiel habe ich ein Element mit der no-script-alertKlasse festgelegt, das angezeigt werden soll, wenn Skripte deaktiviert sind, wie dies display: nonestandardmäßig der Fall war:

   ...   .no-script-alert { display: block; }   ...  ...  

Lassen Sie uns den anderen Fall lösen: Wenn er in den Text eingefügt wird, kann er Inhalt wie Absätze und andere Tags enthalten, die in der Benutzeroberfläche gerendert werden.

Das linkTag

Das linkTag wird verwendet, um Beziehungen zwischen einem Dokument und anderen Ressourcen festzulegen.

Es wird hauptsächlich verwendet, um eine externe CSS-Datei zu verknüpfen, die geladen werden soll.

Dieses Element hat kein schließendes Tag.

Verwendung:

   ...  ...  ...  

Das mediaAttribut ermöglicht das Laden verschiedener Stylesheets, abhängig von den Gerätefunktionen:

Wir können auch auf andere Ressourcen als Stylesheets verweisen.

Zum Beispiel können wir einen RSS-Feed mit verknüpfen

Oder wir können ein Favicon mit folgendem verknüpfen:

Dieses Tag wurde auch für mehrseitige Inhalte verwendet, um die vorherige und nächste Seite mit rel="prev"und anzuzeigen rel="next". Meistens für Google. Ab 2019 gab Google bekannt, dass dieses Tag nicht mehr verwendet wird, da es ohne es die richtige Seitenstruktur finden kann.

Das styleTag

Dieses Tag kann verwendet werden, um dem Dokument Stile hinzuzufügen, anstatt ein externes Stylesheet zu laden.

Verwendung:

 .some-css {}  

Wie beim linkTag können Sie das mediaAttribut verwenden, um dieses CSS nur auf dem angegebenen Medium zu verwenden:

 .some-css {}  

Das baseTag

Dieses Tag wird verwendet, um eine Basis-URL für alle auf der Seite enthaltenen relativen URLs festzulegen.

   ...  ...  ...  

Das metaTag

Meta-Tags führen eine Vielzahl von Aufgaben aus und sind sehr, sehr wichtig.

Besonders für SEO.

meta Elemente haben nur das Start-Tag.

Das grundlegendste ist das descriptionMeta-Tag:

Dies könnte von Google verwendet werden , um die Seitenbeschreibung in seinen Seiten zu erzeugen, wenn sie feststellt , ist es besser , die Seite als der On-Page - Inhalt beschreibt (fragt mich nicht , wie).

Das charsetMeta-Tag wird verwendet, um die Seitenzeichencodierung festzulegen. utf-8in den meisten Fällen:

Das robotsMeta-Tag weist die Suchmaschinen-Bots an, eine Seite zu indizieren oder nicht:

Oder ob sie Links folgen sollen oder nicht:

Sie können nofollow auch für einzelne Links festlegen. So können Sie nofollowglobal einstellen .

Sie können sie kombinieren:

Das Standardverhalten ist index, follow.

Sie können andere Eigenschaften verwenden, einschließlich nosnippet, noarchive, noimageindexund vieles mehr.

Sie können Google auch einfach mitteilen, anstatt alle Suchmaschinen anzusprechen:

Und andere Suchmaschinen haben möglicherweise auch ein eigenes Meta-Tag.

Apropos, wir können Google anweisen, einige Funktionen zu deaktivieren. Dies verhindert die Übersetzungsfunktion in den Suchmaschinenergebnissen:

Das viewportMeta-Tag wird verwendet, um den Browser anzuweisen, die Seitenbreite basierend auf der Gerätebreite festzulegen.

Weitere Informationen zu diesem Tag.

Ein weiteres sehr beliebtes Meta-Tag ist das http-equiv="refresh". Diese Zeile weist den Browser an, 3 Sekunden zu warten und dann auf die andere Seite umzuleiten:

Wenn Sie 0 anstelle von 3 verwenden, wird die Umleitung so schnell wie möglich durchgeführt.

Dies ist keine vollständige Referenz. Andere weniger verwendete Meta-Tags existieren.

Nach dieser Einführung in die Dokumentüberschrift können wir mit dem Eintauchen in den Dokumentkörper beginnen.

DER DOKUMENTENKÖRPER

Nach dem schließenden Head-Tag können wir nur eines in einem HTML-Dokument haben: das bodyElement.

   ...   ...   

Genau wie die headund htmlTags können wir nur eine haben bodyTag auf einer Seite.

Innerhalb des bodyTags befinden sich alle Tags, die den Inhalt der Seite definieren.

Technisch gesehen sind die Start- und End-Tags optional. Aber ich halte es für eine gute Praxis, sie hinzuzufügen. Nur zur Klarheit.

In den nächsten Kapiteln definieren wir die verschiedenen Tags, die Sie im Seitenkörper verwenden können.

Zuvor müssen wir jedoch einen Unterschied zwischen Blockelementen und Inline-Elementen einführen.

Blockelemente gegen Inline-Elemente

Visuelle Elemente, die im Seitenkörper definiert sind, können allgemein in zwei Kategorien eingeteilt werden:

  • Blockelemente ( p, div, Überschrift Elemente, Listen und Listenelemente, ...)
  • Inline - Elemente ( a, span, img, ...)

Was ist der Unterschied?

Blockelemente lassen, wenn sie auf der Seite positioniert sind, keine anderen Elemente neben ihnen zu. Links oder rechts.

Inline-Elemente können stattdessen neben anderen Inline-Elementen stehen.

Der Unterschied liegt auch in den visuellen Eigenschaften, die wir mit CSS bearbeiten können. Wir können die Breite / Höhe, den Rand, die Polsterung und den Rand von Blockelementen ändern. Das können wir für Inline-Elemente nicht tun.

Beachten Sie, dass wir mit CSS die Standardeinstellung für jedes Element ändern können, indem wir ein pTag beispielsweise als Inline oder spanals Blockelement festlegen.

Ein weiterer Unterschied besteht darin, dass Inline-Elemente in Blockelementen enthalten sein können. Das Gegenteil ist nicht der Fall.

Einige Blockelemente können andere Blockelemente enthalten, dies hängt jedoch davon ab. Das pTag erlaubt beispielsweise keine solche Option.

TAGS, DIE MIT TEXT INTERAKTIEREN

Das pTag

Dieses Tag definiert einen Textabschnitt.

Some text

Es ist ein Blockelement.

Darin können wir jedes beliebige Inline-Element hinzufügen, das uns gefällt, gefällt spanoder gefällt a.

Wir können keine Blockelemente hinzufügen.

Wir können ein pElement nicht in ein anderes verschachteln .

Standardmäßig formatieren Browser einen Absatz mit einem Rand oben und unten. 16pxin Chrome, aber der genaue Wert kann zwischen den Browsern variieren.

Dies führt dazu, dass zwei aufeinanderfolgende Absätze voneinander beabstandet sind, was dem entspricht, was wir von einem "Absatz" im gedruckten Text halten.

Das spanTag

Dies ist ein Inline-Tag, mit dem ein Abschnitt in einem Absatz erstellt werden kann, auf den mithilfe von CSS abgezielt werden kann:

A part of the text and here another part

Das brTag

Dieses Tag steht für einen Zeilenumbruch. Es ist ein Inline-Element und benötigt kein schließendes Tag.

Wir verwenden es, um eine neue Zeile innerhalb eines pTags zu erstellen , ohne einen neuen Absatz zu erstellen .

Im Vergleich zum Erstellen eines neuen Absatzes werden keine zusätzlichen Abstände hinzugefügt.

Some text

A new line

Die Überschriften-Tags

HTML bietet uns 6 Überschriften-Tags. Von wichtigsten zu unwichtigste, haben wir h1, h2, h3, h4, h5, h6.

Normalerweise hat eine Seite ein h1Element, nämlich den Seitentitel. Dann können Sie h2je nach Seiteninhalt ein oder mehrere Elemente haben.

Überschriften, insbesondere die Organisation der Überschriften, sind ebenfalls für die Suchmaschinenoptimierung von entscheidender Bedeutung, und Suchmaschinen verwenden sie auf verschiedene Arten.

Der Browser macht das h1Tag standardmäßig größer und verkleinert die Elemente mit hzunehmender Anzahl :

Alle Überschriften sind Blockelemente. Sie können keine anderen Elemente enthalten, nur Text.

Das strongTag

Dieses Tag wird verwendet, um den darin enthaltenen Text als stark zu markieren . Dies ist ziemlich wichtig, es ist kein visueller Hinweis, sondern ein semantischer Hinweis. Je nach verwendetem Medium variiert die Interpretation.

Browser machen den Text in diesem Tag standardmäßig fett .

Das emTag

Dieses Tag wird verwendet, um den darin enthaltenen Text als hervorgehoben zu markieren . Wie bei strongist es kein visueller Hinweis, sondern ein semantischer Hinweis.

Browser machen den Text standardmäßig kursiv .

Zitate

Das blockquoteHTML-Tag ist nützlich, um Zitate in den Text einzufügen.

Browser wenden standardmäßig einen Rand auf das blockquoteElement an. Chrome wendet einen linken und rechten Rand von 40 Pixel sowie einen oberen und unteren Rand von 10 Pixel an.

Das qHTML-Tag wird für Inline-Anführungszeichen verwendet.

Horizontale Linie

Nicht wirklich auf Text basierend, aber das hrTag wird oft innerhalb einer Seite verwendet. Dies bedeutet horizontal rule, und es wird eine horizontale Linie auf der Seite hinzugefügt.

Nützlich, um Abschnitte auf der Seite zu trennen.

Codeblöcke

Das codeTag ist besonders nützlich, um Code anzuzeigen, da Browser ihm eine monospaced Schriftart geben.

Dies ist normalerweise das einzige, was Browser tun. Dies ist das von Chrome angewendete CSS:

code { font-family: monospace; } 

Dieses Tag wird normalerweise in ein preTag eingeschlossen, da das codeElement Leerzeichen und Zeilenumbrüche ignoriert. Wie das pEtikett.

Chrome bietet predieses Standard-Styling:

pre { display: block; font-family: monospace; white-space: pre; margin: 1em 0px; } 

Dies verhindert das Zusammenfallen von Leerzeichen und macht es zu einem Blockelement.

Listen

Wir haben 3 Arten von Listen:

  • ungeordnete Listen
  • geordnete Listen
  • Definitionslisten

Mit dem ulTag werden ungeordnete Listen erstellt . Jedes Element in der Liste wird mit dem liTag erstellt:

  • First
  • Second

Bestellte Listen sind ähnlich und werden nur mit dem olTag erstellt:

  1. First
  2. Second

Der Unterschied zwischen den beiden besteht darin, dass geordnete Listen vor jedem Artikel eine Nummer haben:

Definitionslisten sind etwas anders. Sie haben einen Begriff und seine Definition:

Flavio
The name
Copes
The surname

So rendern Browser sie normalerweise:

Ich muss sagen, dass Sie sie selten in freier Wildbahn sehen, sicher nicht so viel wie ulund ol, aber manchmal könnten sie nützlich sein.

Andere Text-Tags

Es gibt eine Reihe von Tags für Präsentationszwecke:

  • das markTag
  • das insTag
  • das delTag
  • das supTag
  • das subTag
  • das smallTag
  • das iTag
  • das bTag

Dies ist ein Beispiel für deren visuelles Rendern, das standardmäßig von Browsern angewendet wird:

Sie fragen sich vielleicht, wie ist das banders als strong? Und wie iist das anders als em?

Der Unterschied liegt in der semantischen Bedeutung. Während bund isind ein direkter Hinweis auf den Browser, um einen Text fett oder kursiv zu machen strongund emdem Text eine besondere Bedeutung zu geben, und es ist Sache des Browsers, das Styling festzulegen. Welches ist genau das gleiche wie bund i, standardmäßig. Obwohl Sie dies mit CSS ändern können.

Es gibt eine Reihe anderer, weniger verwendeter Tags, die sich auf Text beziehen. Ich habe nur diejenigen erwähnt, die meiner Meinung nach am häufigsten verwendet werden.

LINKS

Links werden mit dem aTag definiert . Das Verbindungsziel wird über sein hrefAttribut festgelegt.

Beispiel:

click here 

Zwischen dem Start- und dem Schluss-Tag befindet sich der Link-Text.

Das obige Beispiel ist eine absolute URL. Links funktionieren auch mit relativen URLs:

click here 

In diesem Fall wird der Benutzer beim Klicken auf den Link zur /testURL des aktuellen Ursprungs verschoben .

Sei vorsichtig mit dem /Charakter. Wenn dies weggelassen wird, fügt der Browser anstelle des Ursprungs nur die testZeichenfolge zur aktuellen URL hinzu.

Beispiel, ich bin auf der Seite //flaviocopes.com/axios/und habe diese Links:

  • /test einmal geklickt bringt mich zu //flaviocopes.com/test
  • test einmal geklickt bringt mich zu //flaviocopes.com/axios/test

Link-Tags können andere Dinge enthalten, nicht nur Text. Zum Beispiel Bilder:

oder andere Elemente außer anderen Tags.

Wenn Sie den Link in einer neuen Registerkarte öffnen möchten, können Sie das targetAttribut verwenden:

open in new tab 

CONTAINER-TAGS UND SEITENSTRUKTUR HTML

Container-Tags

HTML bietet eine Reihe von Container-Tags. Diese Tags können einen nicht spezifizierten Satz anderer Tags enthalten.

Wir haben:

  • article
  • section
  • div

und es kann verwirrend sein, den Unterschied zwischen ihnen zu verstehen.

Mal sehen, wann jeder von ihnen verwendet werden soll.

article

Das Artikel-Tag kennzeichnet eine Sache , die von anderen Dingen auf einer Seite unabhängig sein kann .

Zum Beispiel eine Liste von Blog-Posts auf der Homepage.

Oder eine Liste von Links.

A blog post

Read more

Another blog post

Read more

Wir sind nicht auf Listen beschränkt: Ein Artikel kann das Hauptelement einer Seite sein.

A blog post

Here is the content...

Innerhalb eines articleTags sollten wir einen Titel ( h1- h6) und haben

section

Stellt einen Abschnitt eines Dokuments dar. Jeder Abschnitt hat einen Überschrift - Tag ( h1- h6), wird der Abschnitt Körper .

Beispiel:

A section of the page

...

Es ist nützlich, einen langen Artikel in verschiedene Abschnitte zu unterteilen .

Sollte nicht als generisches Containerelement verwendet werden. divist dafür gemacht.

div

div ist das generische Containerelement:

 ... 

Sie fügen diesem Element häufig ein classoder id-Attribut hinzu, damit es mit CSS gestaltet werden kann.

Wir verwenden divan jedem Ort, an dem wir einen Container benötigen, die vorhandenen Tags jedoch nicht geeignet sind.

Tags im Zusammenhang mit Seite

nav

Dieses Tag wird verwendet, um das Markup zu erstellen, das die Seitennavigation definiert. Dazu fügen wir normalerweise eine uloder olListe hinzu:

  1. Home
  2. Blog

aside

Das asideTag wird verwendet, um einen Inhalt hinzuzufügen, der sich auf den Hauptinhalt bezieht.

Ein Feld, in dem Sie beispielsweise ein Angebot hinzufügen können. Oder eine Seitenleiste.

Beispiel:

some text..

A quote..

other text...

Die Verwendung asideist ein Signal dafür, dass die darin enthaltenen Dinge nicht Teil des regulären Flusses des Abschnitts sind, in dem sie leben.

header

Das headerTag repräsentiert einen Teil der Seite, die die Einführung darstellt. Es kann beispielsweise ein oder mehrere Überschriften-Tags ( h1- h6), die Tagline für den Artikel oder ein Bild enthalten.

Article title

...

main

Das mainTag stellt den Hauptteil einer Seite dar:

 ....  

....

footer

Das footerTag wird verwendet, um die Fußzeile eines Artikels oder die Fußzeile der Seite zu bestimmen:

 ....  

Footer notes..

FORMEN

Mit Formularen können Sie mit einer Seite oder einer App interagieren, die mit Webtechnologien erstellt wurde.

Sie haben eine Reihe von Steuerelementen, und wenn Sie das Formular entweder mit einem Klick auf die Schaltfläche "Senden" oder programmgesteuert senden, sendet der Browser die Daten an den Server.

Standardmäßig bewirkt dieses Senden von Daten, dass die Seite nach dem Senden der Daten neu geladen wird. Mit JavaScript können Sie dieses Verhalten jedoch ändern (ohne zu erklären, wie in diesem Buch beschrieben wird).

Mit dem formTag wird ein Formular erstellt :

 ...  

Standardmäßig werden Formulare mit der GET HTTP-Methode gesendet. Welches hat seine Nachteile, und in der Regel möchten Sie POST verwenden.

Sie können das Formular so einstellen, dass beim Senden POST verwendet wird, indem Sie das folgende methodAttribut verwenden:

 ...  

Das Formular wird entweder mit GET oder POST an dieselbe URL gesendet, unter der es sich befindet.

Wenn sich das Formular auf der //flaviocopes.com/contactsSeite befindet, wird durch Drücken der Schaltfläche "Senden" eine Anfrage an dieselbe URL gesendet.

Was dazu führen kann, dass nichts passiert.

Sie benötigen etwas Server-seitiges, um die Anforderung zu bearbeiten, und normalerweise "warten" Sie auf diese Formularübermittlungsereignisse unter einer dedizierten URL.

Sie können die URL über den actionParameter angeben :

 ...  

Dadurch sendet der Browser die Formulardaten per POST an die /new-contactURL desselben Ursprungs.

Wenn der Ursprung (Protokoll + Domäne + Port) ist //flaviocopes.com(Port 80 ist die Standardeinstellung), bedeutet dies, dass die Formulardaten an gesendet werden //flaviocopes.com/new-contact.

Ich habe über Daten gesprochen. Welche Daten?

Die Daten werden von den Benutzern über die Steuerelemente bereitgestellt, die auf der Webplattform verfügbar sind:

  • Eingabefelder (einzeiliger Text)
  • Textbereiche (mehrzeiliger Text)
  • Auswahlfelder (wählen Sie eine Option aus einem Dropdown-Menü)
  • Optionsfelder (wählen Sie eine Option aus einer Liste, die immer sichtbar ist)
  • Kontrollkästchen (wählen Sie null, eine oder mehrere Optionen)
  • Datei-Uploads
  • und mehr!

Lassen Sie uns jeden einzelnen in der folgenden Übersicht über Formularfelder vorstellen.

Das inputTag

Das inputFeld ist eines der am häufigsten verwendeten Formelemente. Es ist auch ein sehr vielseitiges Element und kann das Verhalten basierend auf dem typeAttribut vollständig ändern .

Das Standardverhalten ist ein einzeiliges Texteingabesteuerelement:

Entspricht der Verwendung von:

Wie bei allen anderen folgenden Feldern müssen Sie dem Feld einen Namen geben, damit sein Inhalt beim Senden des Formulars an den Server gesendet wird:

Das placeholderAttribut wird verwendet, damit Text hellgrau angezeigt wird, wenn das Feld leer ist. Nützlich, um dem Benutzer einen Hinweis für die Eingabe hinzuzufügen:

Email

Durch type="email"die Verwendung wird clientseitig (im Browser) eine E-Mail auf Richtigkeit überprüft (semantische Korrektheit, ohne sicherzustellen, dass die E-Mail-Adresse vorhanden ist), bevor sie gesendet wird.

Passwort

Bei Verwendung type="password"wird jeder eingegebene Schlüssel als Sternchen (*) oder Punkt angezeigt. Dies ist nützlich für Felder, in denen sich ein Kennwort befindet.

Zahlen

Ein Eingabeelement kann nur Zahlen akzeptieren:

Sie können einen akzeptierten Mindest- und Höchstwert angeben:

Das stepAttribut hilft dabei, die Schritte zwischen verschiedenen Werten zu identifizieren. Dies akzeptiert beispielsweise einen Wert zwischen 10 und 50 in Schritten von 5:

Verstecktes Feld

Felder können für den Benutzer ausgeblendet werden. Sie werden nach dem Absenden des Formulars weiterhin an den Server gesendet:

Dies wird üblicherweise verwendet, um Werte wie ein CSRF-Token zu speichern, das zur Sicherheit und Benutzeridentifizierung verwendet wird, oder um Roboter, die Spam senden, mithilfe spezieller Techniken zu erkennen.

Es kann auch nur verwendet werden, um ein Formular und seine Aktion zu identifizieren.

Festlegen eines Standardwerts

Alle diese Felder akzeptieren einen vordefinierten Wert. Wenn der Benutzer dies nicht ändert, ist dies der an den Server gesendete Wert:

Wenn Sie einen Platzhalter festlegen, wird dieser Wert angezeigt, wenn der Benutzer den Eingabefeldwert löscht:

Formular senden

Das type="submit"Feld ist eine Schaltfläche, die nach dem Drücken durch den Benutzer das Formular sendet:

Das valueAttribut legt den Text auf der Schaltfläche fest, der bei Fehlen den Text "Senden" anzeigt:

Formularvalidierung

Browser bieten clientseitige Validierungsfunktionen für Formulare.

Sie können Felder nach Bedarf festlegen, um sicherzustellen, dass sie gefüllt sind, und ein bestimmtes Format für die Eingabe jedes Felds erzwingen.

Sehen wir uns beide Optionen an.

Stellen Sie die Felder nach Bedarf ein

Das requiredAttribut hilft Ihnen bei der Validierung. Wenn das Feld nicht festgelegt ist, schlägt die clientseitige Überprüfung fehl und der Browser sendet das Formular nicht:

Erzwingen Sie ein bestimmtes Format

Ich habe das type="email"Feld oben beschrieben. Die E-Mail-Adresse wird automatisch anhand eines in der Spezifikation festgelegten Formats überprüft.

In diesem type="number"Feld habe ich das Attribut minund erwähnt max, um die in ein Intervall eingegebenen Grenzwerte zu bestimmen.

Sie können mehr tun.

Sie können ein bestimmtes Format für jedes Feld erzwingen.

Mit dem patternAttribut können Sie einen regulären Ausdruck festlegen, anhand dessen der Wert überprüft werden soll.

Ich empfehle, meinen Leitfaden für reguläre Ausdrücke unter flaviocopes.com/javascript-regular-expressions/ zu lesen.

pattern = "//.*"

Andere Felder

Datei-Uploads

Sie können Dateien von Ihrem lokalen Computer laden und mithilfe eines type="file"Eingabeelements an den Server senden :

Sie können mehrere Dateien anhängen:

Mit dem acceptAttribut können Sie einen oder mehrere zulässige Dateitypen angeben . Dies akzeptiert Bilder:

Sie können einen bestimmten MIME-Typ verwenden application/jsonoder eine Dateierweiterung wie festlegen .pdf. Oder legen Sie mehrere Dateierweiterungen wie folgt fest:

Tasten

Die type="button"Eingabefelder können verwendet werden, um dem Formular zusätzliche Schaltflächen hinzuzufügen, die keine Übermittlungsschaltflächen sind:

Sie werden verwendet, um mithilfe von JavaScript programmgesteuert etwas zu tun.

Es gibt ein spezielles Feld, das als Schaltfläche gerendert wird und dessen spezielle Aktion darin besteht, das gesamte Formular zu löschen und den Status der Felder auf das ursprüngliche zurückzusetzen:

Radio Knöpfe

Optionsfelder werden verwendet, um eine Reihe von Auswahlmöglichkeiten zu erstellen, von denen eine gedrückt wird und alle anderen deaktiviert sind.

Der Name stammt von alten Autoradios, die diese Art von Schnittstelle hatten.

Sie definieren eine Reihe von type="radio"Eingaben, alle mit demselben nameAttribut und unterschiedlichen valueAttributen:

Sobald das Formular gesendet wurde, hat die colorDateneigenschaft einen einzigen Wert.

Es wird immer ein Element überprüft. Das erste Element ist das standardmäßig aktivierte.

Sie können den vorgewählten Wert mithilfe des checkedAttributs festlegen . Sie können es nur einmal pro Funkeingangsgruppe verwenden.

Kontrollkästchen

Ähnlich wie Optionsfelder, jedoch können mehrere oder gar keine Werte ausgewählt werden.

Sie definieren eine Reihe von type="checkbox"Eingaben, alle mit demselben nameAttribut und unterschiedlichen valueAttributen:

Alle diese Kontrollkästchen sind standardmäßig deaktiviert. Verwenden Sie das checkedAttribut, um sie beim Laden der Seite zu aktivieren.

Da dieses Eingabefeld mehrere Werte zulässt, werden beim Senden des Formulars die Werte als Array an den Server gesendet.

Datum (und Uhrzeit

Wir haben einige Eingabetypen, um Datumswerte zu akzeptieren.

Das type="date"Eingabefeld ermöglicht dem Benutzer die Eingabe eines Datums und zeigt bei Bedarf eine Datumsauswahl an:

Das type="time"Eingabefeld ermöglicht dem Benutzer die Eingabe einer Zeit und zeigt bei Bedarf eine Zeitauswahl an:

Über das type="month"Eingabefeld kann der Benutzer einen Monat und ein Jahr eingeben:

Über das type="week"Eingabefeld kann der Benutzer eine Woche und ein Jahr eingeben:

Alle diese Felder ermöglichen es, den Bereich und den Schritt zwischen den einzelnen Werten zu begrenzen. Ich empfehle, MDN auf kleine Details zu ihrer Verwendung zu überprüfen.

In diesem type="datetime-local"Feld können Sie ein Datum und eine Uhrzeit auswählen.

Hier ist eine Seite, auf der Sie alle testen können: //codepen.io/flaviocopes/pen/ZdWQPm

Farbwähler

Mit dem type="color"Element können Benutzer eine Farbe auswählen :

Sie legen einen Standardwert mit dem valueAttribut fest:

Der Browser sorgt dafür, dass dem Benutzer ein Farbwähler angezeigt wird.

Reichweite

Dieses Eingabeelement zeigt ein Schiebereglerelement. Menschen können damit von einem Startwert zu einem Endwert wechseln:

Sie können einen optionalen Schritt angeben:

Telefon

Über das type="tel"Eingabefeld wird eine Telefonnummer eingegeben:

Das Hauptverkaufsargument für die Verwendung von telOver textist das Handy, bei dem das Gerät eine numerische Tastatur anzeigen kann.

Geben Sie ein patternAttribut für die zusätzliche Validierung an:

URL

In das type="url"Feld wird eine URL eingegeben.

Sie können es mit dem patternAttribut validieren :

Das textareaTag

Mit dem textareaElement können Benutzer mehrzeiligen Text eingeben. Im Vergleich dazu inputerfordert es ein Ending-Tag:

Sie können die Dimensionen mithilfe von CSS festlegen, aber auch mithilfe der Attribute rowsund cols:

Wie bei den anderen Formular-Tags bestimmt das nameAttribut den Namen in den an den Server gesendeten Daten:

Das selectTag

Mit diesem Tag wird ein Dropdown-Menü erstellt.

Der Benutzer kann eine der verfügbaren Optionen auswählen.

Jede Option wird mithilfe des optionTags erstellt. Sie fügen der Auswahl einen Namen und jeder Option einen Wert hinzu:

 Red Yellow  

Sie können eine Option deaktivieren:

 Red Yellow  

Sie können eine leere Option haben:

 None Red Yellow  

Optionen können mithilfe des optgroupTags gruppiert werden . Jede Optionsgruppe hat ein labelAttribut:

  Red Yellow Blue   Green Pink   

TABELLEN

In den frühen Tagen der Web-Tabellen war ein sehr wichtiger Bestandteil der Erstellung von Layouts.

Später wurden sie durch CSS und seine Layoutfunktionen ersetzt. Heute verfügen wir über leistungsstarke Tools wie CSS Flexbox und CSS Grid zum Erstellen von Layouts. Tische werden jetzt nur zum Bauen von Tischen verwendet!

Das tableTag

Sie definieren eine Tabelle mit dem tableTag:

Innerhalb der Tabelle definieren wir die Daten. Wir argumentieren in Zeilen, was bedeutet, dass wir einer Tabelle Zeilen hinzufügen (keine Spalten). Wir definieren Spalten innerhalb einer Zeile.

Reihen

Mit dem trTag wird eine Zeile hinzugefügt , und das ist das einzige, was wir einem tableElement hinzufügen können :

Dies ist eine Tabelle mit 3 Zeilen.

Die erste Zeile kann die Rolle des Headers übernehmen.

Spaltenüberschriften

Der Tabellenkopf enthält den Namen einer Spalte, normalerweise in Fettdruck.

Denken Sie an ein Excel / Google Sheets-Dokument. Der obere A-B-C-D...Header.

Wir definieren den Header mit dem thTag:

Column 1Column 2Column 3

Der Tabelleninhalt

Der Inhalt der Tabelle wird mithilfe von tdTags in den anderen trElementen definiert:

Column 1Column 2Column 3
Row 1 Column 1Row 1 Column 2Row 1 Column 3
Row 2 Column 1Row 2 Column 2Row 2 Column 3

So rendern Browser es, wenn Sie kein CSS-Styling hinzufügen:

Hinzufügen dieses CSS:

th, td { padding: 10px; border: 1px solid #333; } 

lässt den Tisch eher wie einen richtigen Tisch aussehen:

Span Spalten und Zeilen

Eine Zeile kann mithilfe des colspanAttributs entscheiden, ob sie sich über zwei oder mehr Spalten erstreckt :

Column 1Column 2Column 3
Row 1 Columns 1-2Row 1 Column 3
Row 2 Columns 1-3

Oder es kann sich über 2 oder mehr Zeilen erstrecken, indem das rowspanAttribut verwendet wird:

Column 1Column 2Column 3
Rows 1-2 Columns 1-2Row 1 Column 3
Row 2 Column 3

Zeilenüberschriften

Bevor ich erklärte, wie Sie Spaltenüberschriften verwenden können, verwenden Sie das thTag im ersten trTag der Tabelle.

Sie können ein thTag als erstes Element in a hinzufügen tr, das nicht das erste trin der Tabelle ist, um Zeilenüberschriften zu erhalten:

Column 2Column 3
Row 1Col 2Col 3
Row 2Col 2Col 3

Weitere Tags zum Organisieren der Tabelle

Sie können einer Tabelle 3 weitere Tags hinzufügen, um sie besser zu organisieren.

Dies ist am besten bei großen Tischen. Und um auch eine Kopf- und Fußzeile richtig zu definieren.

Diese Tags sind

  • thead
  • tbody
  • tfoot

Sie umschließen die trTags, um die verschiedenen Abschnitte der Tabelle klar zu definieren. Hier ist ein Beispiel:

Column 2Column 3
Row 1Col 2Col 3
Row 2Col 2Col 3
Footer of Col 1Footer of Col 2

Tabellenüberschrift

Eine Tabelle sollte ein captionTag haben, das ihren Inhalt beschreibt. Dieses Tag sollte unmittelbar nach dem Eröffnungs- tableTag eingefügt werden:

 Dogs age 
DogAge
Roger7

MULTIMEDIA TAGS: AUDIOUNDVIDEO

In diesem Abschnitt möchte ich Ihnen die audiound videoTags zeigen.

Das audioTag

Mit diesem Tag können Sie Audioinhalte in Ihre HTML-Seiten einbetten.

Dieses Element kann Audio streamen, möglicherweise über ein Mikrofon getUserMedia(), oder es kann eine Audioquelle abspielen, auf die Sie mit dem folgenden srcAttribut verweisen :

Standardmäßig zeigt der Browser keine Steuerelemente für dieses Element an. Dies bedeutet, dass das Audio nur abgespielt wird, wenn es auf Autoplay eingestellt ist (dazu später mehr) und der Benutzer nicht sehen kann, wie er es stoppen oder die Lautstärke regeln oder sich durch die Spur bewegen kann.

Um die integrierten Steuerelemente anzuzeigen, können Sie das folgende controlsAttribut hinzufügen :

Steuerelemente können eine benutzerdefinierte Skin haben.

Sie können den MIME-Typ der Audiodatei mithilfe des typeAttributs angeben . Wenn nicht festgelegt, versucht der Browser, dies automatisch zu ermitteln:

Eine Audiodatei wird standardmäßig nicht automatisch abgespielt. Fügen Sie das autoplayAttribut hinzu, um das Audio automatisch abzuspielen:

Hinweis: Mobile Browser erlauben keine automatische Wiedergabe

Das loopAttribut startet die Audiowiedergabe um 0:00 neu, falls festgelegt. Andernfalls stoppt der Ton am Ende der Datei, wenn er nicht vorhanden ist:

Sie können auch eine Audiodatei abspielen, die mit dem mutedAttribut stummgeschaltet wurde (nicht wirklich sicher, welchen Nutzen dies hat):

Mit JavaScript können Sie auf verschiedene Ereignisse warten, die auf einem audioElement auftreten. Die grundlegendsten davon sind:

  • play wenn die Datei abgespielt wird
  • pause wenn die Audiowiedergabe unterbrochen wurde
  • playing wenn der Ton nach einer Pause wieder aufgenommen wird
  • ended wenn das Ende der Audiodatei erreicht wurde

Das videoTag

Mit diesem Tag können Sie Videoinhalte in Ihre HTML-Seiten einbetten.

Dieses Element kann Videos mit einer Webcam über getUserMedia()oder WebRTC streamen oder eine Videoquelle abspielen, auf die Sie mit dem folgenden srcAttribut verweisen :

Standardmäßig zeigt der Browser keine Steuerelemente für dieses Element an, nur das Video.

Dies bedeutet, dass das Video nur abgespielt wird, wenn es auf Autoplay eingestellt ist (dazu später mehr) und der Benutzer nicht sehen kann, wie er es stoppen, anhalten, die Lautstärke regeln oder zu einer bestimmten Position im Video springen kann.

Um die integrierten Steuerelemente anzuzeigen, können Sie das folgende controlsAttribut hinzufügen :

Steuerelemente können eine benutzerdefinierte Skin haben.

Sie können den MIME-Typ der Videodatei mithilfe des typeAttributs angeben . Wenn nicht festgelegt, versucht der Browser, dies automatisch zu ermitteln:

Eine Videodatei wird standardmäßig nicht automatisch abgespielt. Fügen Sie das autoplayAttribut hinzu, um das Video automatisch abzuspielen:

Einige Browser benötigen das mutedAttribut auch für die automatische Wiedergabe. Das Video wird nur automatisch abgespielt, wenn es stummgeschaltet ist:

Das loopAttribut startet die Videowiedergabe um 0:00 neu, falls festgelegt. Andernfalls stoppt das Video am Ende der Datei, wenn es nicht vorhanden ist:

Sie können ein Bild als Posterbild festlegen:

Wenn nicht vorhanden, zeigt der Browser das erste Bild des Videos an, sobald es verfügbar ist.

Sie können das Set widthund heightAttribute den Raum zu setzen , dass das Element so nehmen , dass der Browser für sie erklären kann und es nicht das Layout ändern , wenn es endlich geladen ist. Es wird ein numerischer Wert in Pixel angegeben.

Mit JavaScript können Sie auf verschiedene Ereignisse warten, die auf einem videoElement auftreten. Die grundlegendsten davon sind:

  • play wenn die Datei abgespielt wird
  • pause als das Video angehalten wurde
  • playing wenn das Video nach einer Pause fortgesetzt wird
  • ended wenn das Ende der Videodatei erreicht wurde

IFRAMES

Mit dem iframeTag können wir Inhalte anderer Herkunft (anderer Websites) in unsere Webseite einbetten.

Technisch gesehen erstellt ein Iframe einen neuen verschachtelten Browserkontext. Dies bedeutet, dass alles im Iframe die übergeordnete Seite nicht beeinträchtigt und umgekehrt. JavaScript und CSS "lecken" nicht zu / von Iframes.

Viele Websites verwenden Iframes, um verschiedene Aufgaben auszuführen. Möglicherweise kennen Sie Codepen, Glitch oder andere Websites, mit denen Sie in einem Teil der Seite codieren können, und das Ergebnis wird in einem Feld angezeigt. Das ist ein Iframe.

Sie erstellen eine auf diese Weise:

Sie können auch eine absolute URL laden:

Sie können eine Reihe von Breiten- und Höhenparametern festlegen (oder diese mithilfe von CSS festlegen), andernfalls verwendet der Iframe die Standardeinstellungen, ein Feld mit 300 x 150 Pixel:

Srcdoc

Mit dem srcdocAttribut können Sie Inline-HTML angeben, das angezeigt werden soll. Es ist eine Alternative zu src, aber neu und wird in Edge 18 und niedriger sowie im IE nicht unterstützt:

Sandkasten

Mit dem sandboxAttribut können wir die in den Iframes zulässigen Operationen einschränken.

Wenn wir es weglassen, ist alles erlaubt:

Wenn wir es auf "" setzen, ist nichts erlaubt:

Wir können auswählen, was zugelassen werden soll, indem wir dem sandboxAttribut Optionen hinzufügen . Sie können mehrere zulassen, indem Sie ein Leerzeichen dazwischen hinzufügen. Hier ist eine unvollständige Liste der Optionen, die Sie verwenden können:

  • allow-forms: Formulare einreichen lassen
  • allow-modalsErmöglichen das Öffnen von Modalfenstern, einschließlich des Aufrufs alert()von JavaScript
  • allow-orientation-lock Lassen Sie die Bildschirmausrichtung sperren
  • allow-popupsPopups, Verwendung window.open()und target="_blank"Links zulassen
  • allow-same-origin Behandeln Sie die geladene Ressource als denselben Ursprung
  • allow-scripts Lässt den geladenen Iframe Skripte ausführen (aber keine Popups erstellen).
  • allow-top-navigation Ermöglicht den Zugriff auf den Iframe auf den Browserkontext der obersten Ebene

ermöglichen

Derzeit experimentell und nur von Chromium-basierten Browsern unterstützt, ist dies die Zukunft der gemeinsamen Nutzung von Ressourcen zwischen dem übergeordneten Fenster und dem Iframe.

Es ähnelt dem sandboxAttribut, lässt jedoch bestimmte Funktionen zu, darunter:

  • accelerometer Ermöglicht den Zugriff auf die Sensor-API-Beschleunigungsmesserschnittstelle
  • ambient-light-sensor Ermöglicht den Zugriff auf die Sensors API AmbientLightSensor-Schnittstelle
  • autoplay Ermöglicht die automatische Wiedergabe von Video- und Audiodateien
  • camera Ermöglicht den Zugriff auf die Kamera über die getUserMedia-API
  • display-capture Ermöglicht den Zugriff auf den Bildschirminhalt über die getDisplayMedia-API
  • fullscreen ermöglicht den Zugriff auf den Vollbildmodus
  • geolocation ermöglicht den Zugriff auf die Geolocation-API
  • gyroscope Ermöglicht den Zugriff auf die Sensor API Gyroscope-Schnittstelle
  • magnetometer Ermöglicht den Zugriff auf die Sensor API Magnetometer-Schnittstelle
  • microphone Ermöglicht den Zugriff auf das Gerätemikrofon über die getUserMedia-API
  • midi ermöglicht den Zugriff auf die Web-MIDI-API
  • payment Ermöglicht den Zugriff auf die Zahlungsanforderungs-API
  • speaker Ermöglicht den Zugriff auf die Audiowiedergabe über die Gerätelautsprecher
  • usb Ermöglicht den Zugriff auf die WebUSB-API.
  • vibrate Ermöglicht den Zugriff auf die Vibrations-API
  • vr Ermöglicht den Zugriff auf die WebVR-API

Referrer

Beim Laden eines Iframes sendet der Browser wichtige Informationen darüber, wer ihn in den RefererHeader lädt (beachten Sie die Single r, ein Tippfehler, mit dem wir leben müssen).

Die Rechtschreibfehler des Überweisers gingen auf den ursprünglichen Vorschlag des Informatikers Phillip Hallam-Baker zurück, das Feld in die HTTP-Spezifikation aufzunehmen. Die Rechtschreibfehler waren zum Zeitpunkt ihrer Aufnahme in das Standarddokument RFC 1945 für Anfragen nach Kommentaren in Stein gemeißelt

Mit dem referrerpolicyAttribut können wir festlegen, dass der Referrer beim Laden an den Iframe gesendet wird. Der Referrer ist ein HTTP-Header, der der Seite mitteilt, wer ihn lädt. Dies sind die zulässigen Werte:

  • no-referrer-when-downgrade Dies ist die Standardeinstellung und sendet den Referrer nicht, wenn die aktuelle Seite über HTTPS geladen wird und der Iframe in das HTTP-Protokoll geladen wird
  • no-referrer sendet den Referrer-Header nicht
  • origin Der Referrer wird gesendet und enthält nur den Ursprung (Port, Protokoll, Domäne), nicht den Ursprung + Pfad, der die Standardeinstellung ist
  • origin-when-cross-originBeim Laden von demselben Ursprung (Port, Protokoll, Domäne) in den Iframe wird der Referrer in seiner vollständigen Form (Ursprung + Pfad) gesendet. Andernfalls wird nur der Ursprung gesendet
  • same-origin Der Referrer wird nur gesendet, wenn er vom selben Ursprung (Port, Protokoll, Domäne) in den Iframe geladen wird
  • strict-originSendet den Ursprung als Referrer, wenn die aktuelle Seite über HTTPS geladen wird und der Iframe auch im HTTPS-Protokoll geladen wird. Sendet nichts, wenn der Iframe über HTTP geladen wird
  • strict-origin-when-cross-originsendet den Ursprung + Pfad als Referrer, wenn an demselben Ursprung gearbeitet wird. Sendet den Ursprung als Referrer, wenn die aktuelle Seite über HTTPS geladen wird und der Iframe auch im HTTPS-Protokoll geladen wird. Sendet nichts, wenn der Iframe über HTTP geladen wird
  • unsafe-url: Sendet den Ursprung + Pfad als Referrer, auch wenn Ressourcen von HTTP geladen werden und die aktuelle Seite über HTTPS geladen wird

BILDER

Bilder können mit dem imgTag angezeigt werden .

Dieses Tag akzeptiert ein srcAttribut, mit dem wir die Bildquelle festlegen:

Wir können eine Vielzahl von Bildern verwenden. Die häufigsten sind PNG, JPEG, GIF, SVG und in jüngerer Zeit WebP.

Der HTML-Standard erfordert, dass ein altAttribut vorhanden ist, um das Bild zu beschreiben. Dies wird von Screenreadern und auch von Suchmaschinen-Bots verwendet:

Sie können das Set widthund heightAttribute den Raum zu setzen , dass das Element nehmen, so dass der Browser für sie erklären kann und es nicht das Layout ändern , wenn es vollständig geladen ist. Es wird ein numerischer Wert in Pixel angegeben.

Das figureTag

Das figureTag wird häufig zusammen mit dem imgTag verwendet.

figureist ein semantisches Tag, das häufig verwendet wird, wenn Sie ein Bild mit einer Beschriftung anzeigen möchten. Sie verwenden es so:

 A nice dog  

Das figcaptionTag umschließt den Beschriftungstext.

Responsive Bilder mit srcset

Mit diesem srcsetAttribut können Sie reaktionsschnelle Bilder festlegen, die der Browser je nach Pixeldichte oder Fensterbreite nach Ihren Wünschen verwenden kann. Auf diese Weise können nur die Ressourcen heruntergeladen werden, die zum Rendern der Seite erforderlich sind, ohne dass ein größeres Bild heruntergeladen werden muss, wenn es sich beispielsweise auf einem mobilen Gerät befindet.

Hier ist ein Beispiel, in dem wir 4 zusätzliche Bilder für 4 verschiedene Bildschirmgrößen geben:

In der verwenden srcsetwir das wMaß, um die Fensterbreite anzugeben.

Da wir dies tun, müssen wir auch das sizesAttribut verwenden:

In diesem Beispiel beschreibt die (max-width: 500px) 100vw, (max-width: 900px) 50vw, 800pxZeichenfolge im sizesAttribut die Größe des Bilds in Bezug auf das Ansichtsfenster, wobei mehrere Bedingungen durch ein Semikolon getrennt sind.

Die Medienbedingung max-width: 500pxlegt die Größe des Bildes in Korrelation mit der Breite des Ansichtsfensters fest. Kurz gesagt, wenn die Fenstergröße <500px ist, wird das Bild mit 100% der Fenstergröße gerendert.

Wenn die Fenstergröße größer als <ist 900px, wird das Bild mit 50% der Fenstergröße gerendert.

Und wenn es noch größer ist, wird das Bild mit 800px gerendert.

Die vwMaßeinheit kann für Sie neu sein, und kurz gesagt können wir sagen, dass 1 vw1% der Fensterbreite ist, also 100vw100% der Fensterbreite.

Eine nützliche Website zum Generieren von srcsetund zunehmend kleineren Bildern ist //responsivebreakpoints.com/.

Das pictureTag

HTML gibt uns auch das pictureTag, das einen sehr ähnlichen Job macht srcset, und die Unterschiede sind sehr subtil.

Sie verwenden diese Option, picturewenn Sie nicht nur eine kleinere Version einer Datei bereitstellen, sondern diese vollständig ändern möchten. Oder dienen Sie einem anderen Bildformat.

Der beste Anwendungsfall, den ich gefunden habe, ist das Bereitstellen eines WebP-Images, das noch nicht allgemein unterstützt wird. In dem pictureTag geben Sie eine Liste von Bildern an, die in der angegebenen Reihenfolge verwendet werden. Im nächsten Beispiel verwenden Browser, die WebP unterstützen, das erste Bild und greifen auf JPG zurück, wenn nicht:

Das sourceTag definiert ein (oder mehrere) Formate für die Bilder. Das imgTag ist der Fallback für den Fall, dass der Browser sehr alt ist und das pictureTag nicht unterstützt .

Im darin enthaltenen sourceTag picturekönnen Sie ein mediaAttribut hinzufügen , um Medienabfragen festzulegen.

Das folgende Beispiel funktioniert wie im obigen Beispiel mit srcset:

Aber das ist nicht der Anwendungsfall, denn wie Sie sehen, ist es viel ausführlicher.

Das pictureTag ist neu, wird aber jetzt von allen gängigen Browsern außer Opera Mini und IE (alle Versionen) unterstützt.

BARRIEREFREIHEIT

Es ist wichtig, dass wir unser HTML unter Berücksichtigung der Barrierefreiheit gestalten.

Zugängliches HTML bedeutet, dass Menschen mit Behinderungen das Web nutzen können. Es gibt völlig blinde oder sehbehinderte Benutzer, Menschen mit Hörverlustproblemen und eine Vielzahl anderer Behinderungen.

Leider hat dieses Thema nicht die Bedeutung, die es braucht, und es scheint nicht so cool wie andere.

Was ist, wenn eine Person Ihre Seite nicht sehen kann, aber dennoch ihren Inhalt konsumieren möchte? Erstens, wie machen sie das? Sie können die Maus nicht benutzen, sie benutzen einen sogenannten Bildschirmleser . Das muss man sich nicht vorstellen. Sie können es jetzt ausprobieren: Google bietet die kostenlose ChromeVox Chrome-Erweiterung an. Bei der Barrierefreiheit muss auch darauf geachtet werden, dass Tools Elemente einfach auswählen oder durch die Seiten navigieren können.

Webseiten und Web-Apps werden nicht immer mit Barrierefreiheit als einem ihrer ersten Ziele erstellt. Möglicherweise wird Version 1 veröffentlicht, auf die nicht zugegriffen werden kann. Es ist jedoch möglich, eine Webseite nachträglich zugänglich zu machen. Früher ist besser, aber es ist nie zu spät.

Es ist wichtig und in meinem Land müssen Websites zugänglich sein, die von der Regierung oder anderen öffentlichen Organisationen erstellt wurden.

Was bedeutet es, einen HTML-Code zugänglich zu machen? Lassen Sie mich die wichtigsten Dinge veranschaulichen, über die Sie nachdenken müssen.

Hinweis: Es gibt noch einige andere Dinge, die im CSS-Thema behandelt werden müssen, z. B. Farben, Kontrast und Schriftarten. Oder wie man SVG-Bilder zugänglich macht. Ich rede hier nicht über sie.

Verwenden Sie semantisches HTML

Semantisches HTML ist sehr wichtig und eines der wichtigsten Dinge, um die Sie sich kümmern müssen. Lassen Sie mich einige gängige Szenarien veranschaulichen.

Es ist wichtig, die richtige Struktur für Überschriften-Tags zu verwenden. Das Wichtigste ist h1, und Sie verwenden höhere Zahlen für weniger wichtige, aber alle Überschriften auf derselben Ebene sollten dieselbe Bedeutung haben (denken Sie daran wie an eine Baumstruktur).

h1 h2 h3 h2 h2 h3 h4 

Verwenden Sie strongund emanstelle von bund i. Optisch sehen sie gleich aus, aber die ersten beiden haben mehr Bedeutung. bund isind mehr visuelle Elemente.

Listen sind wichtig. Ein Bildschirmleser kann eine Liste erkennen und eine Übersicht bereitstellen. Anschließend kann der Benutzer entscheiden, ob er in die Liste aufgenommen werden möchte oder nicht.

Eine Tabelle sollte ein captionTag haben, das ihren Inhalt beschreibt:

 Dogs age 
DogAge
Roger7

Verwenden Sie altAttribute für Bilder

Alle Bilder müssen mit einem altTag versehen sein, das den Bildinhalt beschreibt. Es ist nicht nur eine gute Praxis, es wird vom HTML-Standard verlangt und Ihr HTML ohne es wird nicht validiert.

Es ist auch gut für Suchmaschinen, wenn dies ein Anreiz für Sie ist, es hinzuzufügen.

Verwenden Sie das roleAttribut

Mit dem roleAttribut können Sie den verschiedenen Elementen auf Ihrer Seite bestimmte Rollen zuweisen.

Sie können viele verschiedene Rollen zuweisen: Komplementär, Liste, Listenelement, Haupt, Navigation, Region, Registerkarte, Warnung, Anwendung, Artikel, Banner, Schaltfläche, Zelle, Kontrollkästchen, Inhaltsinfo, Dialog, Dokument, Feed, Abbildung, Formular, Raster, Gitterzelle, Überschrift, Bild, Listenfeld, Zeile, Zeilengruppe, Suche, Schalter, Tabelle, Tabpanel, Textfeld, Timer.

Es ist viel und für die vollständige Referenz von jedem von ihnen gebe ich Ihnen diesen MDN-Link. Sie müssen jedoch nicht jedem Element auf der Seite eine Rolle zuweisen. Screenreader können in den meisten Fällen aus dem HTML-Tag schließen. Zum Beispiel brauchen Sie keine Rolle Tag semantische Tags wie hinzufügen nav, button, form.

Nehmen wir das navTag-Beispiel. Sie können es verwenden, um die Seitennavigation wie folgt zu definieren:

  • Home
  • Blog

Wenn Sie gezwungendiv wären, stattdessen ein Tag zu verwenden nav, würden Sie die folgende navigationRolle verwenden:

  • Home
  • Blog

Hier haben Sie also ein praktisches Beispiel: roleWird verwendet, um einen aussagekräftigen Wert zuzuweisen, wenn das Tag die Bedeutung noch nicht vermittelt.

Verwenden Sie das tabindexAttribut

Mit dem tabindexAttribut können Sie die Reihenfolge ändern, in der durch Drücken der Tabulatortaste "auswählbare" Elemente ausgewählt werden. Standardmäßig können nur Links und Formularelemente durch Navigation mit der Tabulatortaste "ausgewählt" werden (und Sie müssen sie nicht festlegen tabindex).

Durch Hinzufügen tabindex="0"kann ein Element ausgewählt werden:

 ... 

Wenn Sie tabindex="-1"stattdessen verwenden, wird ein Element aus dieser tabulatorbasierten Navigation entfernt. Dies kann sehr nützlich sein.

Verwenden Sie die ariaAttribute

ARIA ist eine Abkürzung für Accessible Rich Internet Applications und definiert Semantik, die auf Elemente angewendet werden kann.

aria-label

Dieses Attribut wird verwendet, um eine Zeichenfolge zur Beschreibung eines Elements hinzuzufügen.

Beispiel:

...

Ich verwende dieses Attribut in meiner Blog-Seitenleiste, wo ich ein Eingabefeld für die Suche ohne explizite Bezeichnung habe, da es ein Platzhalterattribut hat.

aria-labelledby

Dieses Attribut legt eine Korrelation zwischen dem aktuellen Element und dem Element fest, das es kennzeichnet.

Wenn Sie wissen, wie ein inputElement einem Element zugeordnet werden kann label, ist dies ähnlich.

Wir übergeben die Artikel-ID, die das aktuelle Element beschreibt.

Beispiel:

The description of the product

...

aria-describedby

Mit diesem Attribut können wir ein Element einem anderen Element zuordnen, das als Beschreibung dient.

Beispiel:

Pay now Clicking the button will send you to our Stripe form! 

Verwenden Sie aria-hidden, um Inhalte auszublenden

Ich mag ein minimalistisches Design auf meinen Websites. Mein Blog zum Beispiel ist meistens nur Inhalt, mit einigen Links in der Seitenleiste. Einige Dinge in der Seitenleiste sind jedoch nur visuelle Elemente, die nicht zur Erfahrung einer Person führen, die die Seite nicht sehen kann. Wie mein Logo-Bild oder die dunkle / helle Themenauswahl.

Durch Hinzufügen des "Attributs werden Bildschirmleser angewiesen, dieses Element zu ignorieren.

Wo kann man mehr erfahren?

Dies ist nur eine Einführung in das Thema. Um mehr zu erfahren, empfehle ich folgende Ressourcen:

  • //www.w3.org/TR/WCAG20/
  • //webaim.org
  • //developers.google.com/web/fundamentals/accessibility/

Sie haben das Ende des HTML-Handbuchs erreicht.

Klicken Sie hier, um eine PDF / ePub / Mobi-Version dieses Buches zum Offline-Lesen zu erhalten !