|
|
| Zeile 15: |
Zeile 15: |
| ===== Weblinks ===== | | ===== Weblinks ===== |
| # https://de.wikipedia.org/wiki/Hypertext_Markup_Language | | # https://de.wikipedia.org/wiki/Hypertext_Markup_Language |
|
| |
| = TMP =
| |
| {{Infobox Dateiformat
| |
| | Name = HTML (Hypertext Markup Language)
| |
| | Icon = [[Datei:HTML.svg|200px|Screenshot]]
| |
| | Logo =
| |
| | Screenshot =
| |
| | Beschreibung =
| |
| | Dateiendung = .html, .htm
| |
| | MIME = text/html
| |
| | MagischeZahl =
| |
| | MagischeZahlNotation =
| |
| | MagischeZahlHex =
| |
| | Entwickler = [[World Wide Web Consortium]] (W3C)
| |
| | Veröffentlicht = 1992
| |
| | LetzteVersion = 5.2
| |
| | LetzteVersionDatum = 14. Dezember 2017
| |
| | Art = [[Auszeichnungssprache]]
| |
| | Container für =
| |
| | Enthalten in =
| |
| | Erweitert von =
| |
| | Erweitert zu = [[Extensible Hypertext Markup Language|XHTML]], [[HTML5]]
| |
| | Standard = [[Internationale Organisation für Normung|ISO]]/[[International Electrotechnical Commission|IEC]] 15445
| |
| W3C HTML 5<ref>[https://www.w3.org/TR/html5/ W3C HTML 5] w3.org</ref>
| |
| W3C HTML 4.01<ref>[https://www.w3.org/TR/html401/ W3C HTML 4.01] w3.org</ref>
| |
| W3C HTML 3.2<ref>[https://www.w3.org/TR/REC-html32-19970114 W3C HTML 3.2] w3.org</ref>
| |
| | Website = [https://www.w3.org/html/ www.w3.org/html]
| |
| }}
| |
|
| |
| Die '''Hypertext Markup Language''' ('''HTML''', {{enS}} für ''[[Hypertext]]-Auszeichnungssprache'') ist eine textbasierte [[Auszeichnungssprache]] zur Strukturierung [[Elektronisches Dokument|elektronischer Dokumente]] wie [[Textdatei|Texte]] mit [[Hyperlink]]s, [[Bilddatei|Bildern]] und anderen Inhalten. [[Webseite|HTML-Dokumente]] sind die Grundlage des [[World Wide Web]] und werden von [[Webbrowser]]n dargestellt. Neben den vom Browser angezeigten Inhalten können HTML-Dateien zusätzliche Angaben in Form von [[Metadaten|Metainformationen]] enthalten, z. B. über die im Text verwendeten [[Einzelsprache|Sprachen]], den [[Autor]] oder den zusammengefassten Inhalt des Textes.
| |
|
| |
| HTML wird vom [[World Wide Web Consortium]] (W3C) und der [[Web Hypertext Application Technology Working Group]] (WHATWG) weiterentwickelt. Die aktuelle Version ist seit dem 14. Dezember 2017 ''HTML 5.2'',<ref name="html5.1">{{Internetquelle |url=https://www.w3.org/TR/html5/ |titel=HTML 5.2 |titelerg=Recommendation (Empfehlung) |hrsg=W3C |datum=2017-12-14 |sprache=en |abruf=2018-01-01}}</ref> die bereits von vielen aktuellen [[Webbrowser]]n und anderen [[Layout-Engine]]s unterstützt wird. Auch die ''[[Extensible Hypertext Markup Language]]'' (XHTML) wird durch HTML5 ersetzt.<ref name="Quelle0">{{Internetquelle |autor=Simon Pieters |url=https://www.w3.org/TR/html5-diff/ |titel=HTML 5 differences from HTML 4 |hrsg=w3.org |datum=2014-09-18 |sprache=en |abruf=2014-10-01 |zitat=HTML 5 replaces these documents. [DOM2HTML] [HTML4] [XHTML1]}}</ref>
| |
|
| |
| HTML dient als Auszeichnungssprache dazu, einen Text [[Semantik|semantisch]] zu strukturieren, nicht aber zu formatieren.<ref>{{Webarchiv|url=https://wiki.selfhtml.org/wiki/HTML/Regeln/Textauszeichnung |wayback=20190417073730 |text=HTML/Regeln/Textauszeichnung }} im [[SELFHTML]]-Wiki</ref> Die visuelle Darstellung ist nicht Teil der HTML-Spezifikationen und wird durch den Webbrowser und Gestaltungsvorlagen wie [[Cascading Style Sheets|CSS]] bestimmt. Ausnahme sind die als veraltet ({{enS}} ''[[deprecated]]'') markierten präsentationsbezogenen Elemente.
| |
|
| |
| == Entstehung ==
| |
| Vor der Entwicklung des [[World Wide Web]] und dessen Bestandteilen, zu denen auch HTML gehört, war es nicht möglich, Dokumente auf elektronischem Weg einfach, schnell und strukturiert zwischen mehreren Personen auszutauschen und miteinander effizient zu verknüpfen. Man benötigte neben Übertragungsprotokollen auch eine einfach zu verstehende Textauszeichnungssprache. Genau hier lag der Ansatzpunkt von HTML. Um Forschungsergebnisse mit anderen Mitarbeitern der [[CERN|Europäischen Organisation für Kernforschung]] (CERN) zu teilen und von den beiden Standorten in Frankreich und in der Schweiz aus zugänglich zu machen, entstand 1989 am CERN ein Projekt, welches sich mit der Lösung dieser Aufgabe beschäftigte. Am 3. November 1992 erschien die erste Version der HTML-Spezifikation.
| |
|
| |
| == Syntax ==
| |
| Dem Text wird durch Auszeichnungen (englisch ''markup'') von Textteilen eine Struktur gegeben.
| |
|
| |
| Die Auszeichnung erfolgt durch [[Standard Generalized Markup Language|genormte (SGML)]] Elemente. Die meisten dieser HTML-Elemente werden durch ein [[Tag (Informatik)|Tag]]-Paar markiert, das heißt durch einen Starttag und einen Endtag. Ein Starttag beginnt immer mit dem Zeichen <code><</code>. Es folgt der Elementname (z. B. <code>p</code> für einen [[Absatz (Text)|Absatz]] oder <code>h1</code> für eine [[Überschrift]] erster Ordnung) und optional eine Liste seiner Attribute (z. B. <code>class="warning"</code> oder <code>id="warning"</code>). Mit einem <code>></code> wird der Starttag geschlossen. Ein Endtag besteht aus den Zeichen <code></</code>, dem Elementnamen und dem abschließenden <code>></code>. Die zusammengehörenden Start- und Endtags bilden zusammen mit dem dazwischenliegenden Inhalt ein [[SGML-Element|Element allgemeiner SGML-Spezifikation]]. Diese Elemente lassen sich nach Regeln, die in einer [[Dokumenttypdefinition]] (DTD) angegeben sind, verschachteln:
| |
|
| |
| <syntaxhighlight lang="html">
| |
| <p>Ein Textabsatz, der ein <em>betontes</em> Wort enthält.</p>
| |
| </syntaxhighlight>
| |
|
| |
| Bestimmte Elemente müssen nicht explizit notiert werden. Bei einigen Elementen darf gemäß der SGML-Regel „OMITTAG“ der Endtag fehlen (z. B. <code></p></code> oder <code></li></code>). Zudem spielt bei Element- und Attributnamen Groß- und Kleinschreibung keine Rolle (z. B. <code><ul></code>, <code><UL></code>, <code><uL></code>). Zum Vergleich: In [[XHTML]] sind diese Regeln strenger verfasst.
| |
|
| |
| Neben Elementen mit Start- und Endtag gibt es in HTML auch inhaltsleere Elemente, wie etwa Zeilenumbrüche (<code>br</code>) oder Bilder (<code>img</code>).
| |
|
| |
| <syntaxhighlight lang="html">
| |
| Eine Textzeile,<br>die hier fortgesetzt wird.
| |
| <img src="E-Mail-Button.jpg" alt="E-Mail">
| |
| </syntaxhighlight>
| |
|
| |
| Es geht in HTML um beschreibende (englisch ''descriptive''), nicht um verfahrens- (englisch ''procedural'') und darstellungsorientierte (englisch ''presentational'') [[Auszeichnungssprache|Textauszeichnung]], auch wenn sich HTML in früheren Versionen dafür verwenden ließ. HTML-Elemente sind keine Angaben zur Präsentation, die dem Webbrowser mitteilen, wie er den Text [[visuell]] zu formatieren hat. Vielmehr sind Elemente eine strukturierende Auszeichnung, mit der sich Textbereichen eine Bedeutung zuordnen lässt, z. B.
| |
| <syntaxhighlight lang="html" inline><h1>…</h1></syntaxhighlight> für eine Überschrift, <syntaxhighlight lang="html" inline><p>…</p></syntaxhighlight> für einen Textabsatz und <syntaxhighlight lang="html" inline><em>…</em></syntaxhighlight> für betonten Text. Wie diese Bedeutung letztlich dem [[Benutzer]] vermittelt wird (im Falle einer Überschrift z. B. durch vergrößerte, [[Schriftschnitt|fette]] Schrift), ist zunächst dem Webbrowser überlassen und hängt von der Ausgabe-Umgebung ab. Denn obwohl HTML-Dokumente in der Regel auf [[Bildschirm|Computerbildschirmen]] dargestellt werden, können sie auch auf anderen Medien ausgegeben werden, etwa auf [[Papier]] oder mittels [[Sprachausgabe]]. [[Cascading Style Sheets|CSS]]-Formatvorlagen eignen sich dazu, um auf die Präsentation eines HTML-Dokuments in verschiedenen Medien Einfluss zu nehmen.
| |
|
| |
| Daher gelten Elemente und Attribute zur Präsentation wie <syntaxhighlight lang="html" inline><font>…</font></syntaxhighlight>, <syntaxhighlight lang="html" inline><u>…</u></syntaxhighlight> und <code>noshade</code> als [[Deprecated|veraltet]] (englisch ''deprecated'') und sollen nach allgemeiner Auffassung vermieden werden; sie sollten in neu entwickelter Software nicht mehr verwendet und bei der Überarbeitung der dokumentengenerienden Software ersetzt werden.
| |
|
| |
| Das Einlesen des [[Quelltext]]es sowie das Verarbeiten der vorhandenen Informationen wird in der Fachsprache auch als ''[[Parser|Parsen]]'' bezeichnet, und die Aufbereitung für das Ausgabemedium als ''[[HTML-Rendering|Rendern]]''. Die Sprache ''HTML'' beschreibt, wie der Browser (oder ein anderes Programm, wie z. B. ein [[Texteditor]]) die Auszeichnungen des Textes zu „verstehen“ hat, nicht, wie er sie dann in der Darstellung umsetzt. So besagt <syntaxhighlight lang="html" inline><h1></syntaxhighlight> zwar, dass eine Überschrift folgt, nicht aber, in welcher [[Schriftgröße]] oder [[Schriftschnitt]] diese darzustellen ist – hier haben sich nur gewisse übliche Standardeinstellungen eingebürgert, die aber nicht Teil der HTML-Spezifikation sind.
| |
|
| |
| == Zeichenvorrat <!--bei Titeländerungen: mehrfaches Linkziel!-->{{Anker|Zeichenvorrat}} ==
| |
| Der ursprünglich auf 7-Bit-[[ASCII]] angelegte Standard-Zeichensatz wurde schon in den Frühzeiten des [[World Wide Web|WWW]] um zahlreiche Sonderzeichen erweitert und als HTML-Entität kodiert. Die Unterstützung universeller Zeichensätze für alle gängigen Sprachen weltweit setzte die Unterstützung von [[Unicode Transformation Format|UTF]] (Unicode) voraus, die heute in allen gängigen Browsern implementiert ist. HTML ist damit auf plattformunabhängige Portierbarkeit angelegt, sofern diese vom verwendeten [[HTML-Renderer]] unterstützt werden. Die Wahl des zugrunde liegenden Zeichenvorrats für ein Webdokument erfolgt in den [[Meta-Element]]en im Dateikopf, der Browser stellt sich dann darauf ein.
| |
|
| |
| Ersteller von Webseiten, deren Tastatur eventuell nicht alle Zeichen direkt zur Verfügung stellt, etwa deutsche [[Umlaut]]e, können auf mehrere Arten [[Sonderzeichen#HTML|Sonderzeichen]] codieren;<ref>{{Internetquelle |url=http://unicode.e-workers.de/entities.php |titel=HTML-Entities |abruf=2023-07-10}}</ref> so kann ein A-Umlaut („ä“) entweder als HTML-Entität (<code><nowiki>&auml;</nowiki></code>), als Unicode [[Dezimalsystem|dezimal]] (<code><nowiki>&#228;</nowiki></code>) oder als Unicode [[Hexadezimalsystem|hexadezimal]] (<code><nowiki>&#x00E4;</nowiki></code>) kodiert werden, vgl. [[Unicode #Codepunkt-Angaben in Dokumenten]]. Viele komplex arbeitende Website-Editoren lösen Sonderzeichen automatisch bei der Kodierung des Quelltextes auf.
| |
|
| |
| Bei der Auflösung in Adresszeilen ([[Uniform Resource Locator|URLs]]) wird wiederum anders verfahren, hier werden die nicht direkt unterstützten Zeichen nach dem [[Multipurpose Internet Mail Extensions|MIME]]-Verfahren in ASCII-Zeichen kodiert, so z. B. <code><nowiki>%20</nowiki></code> für ein Leerzeichen, wenn es beispielsweise in einem Dateinamen vorkommt und sich vom regulären Leerzeichen am Ende des [[Hyperlink|Links]] unterscheiden muss.
| |
|
| |
| == Sprachtyp ==
| |
| HTML ist eine [[Auszeichnungssprache]] und wird als solche meist von [[Programmiersprache]]n abgegrenzt (siehe dazu Abschnitt [[Auszeichnungssprache#Äußere Systematik: Einordnung als Programmiersprache oder Datenformat|Äußere Systematik: Einordnung als Programmiersprache oder Datenformat]] im Artikel über Auszeichnungssprachen). Eine Gemeinsamkeit mit den meisten Programmiersprachen ist, dass für die Bearbeitung der Quelldokumente keine spezielle Software (siehe auch [[Liste von HTML-Editoren]]) nötig ist, sondern ein beliebiger [[Texteditor]] ausreicht.
| |
|
| |
| Ein ähnliches Konzept (logische Beschreibung) wie hinter HTML steht hinter dem Satzsystem [[TeX]]/[[LaTeX]], das im Unterschied zu HTML jedoch auf die Ausgabe per Drucker auf Papier zielt.
| |
|
| |
| == Versionen ==
| |
| HTML wurde erstmals am 13. März 1989 von [[Tim Berners-Lee]] am [[CERN]] in Genf vorgeschlagen.<ref>{{Internetquelle |autor=[[Tim Berners-Lee]] |url=https://www.w3.org/History/1989/proposal.html |titel=Information Management: A Proposal |datum=1989-03 |abruf=2014-11-25}}</ref>
| |
|
| |
| * '''HTML''' (ohne Versionsnummer, 3. November 1992): Urversion, die sich nur an Text orientierte.<ref>{{Internetquelle |url=https://www.w3.org/History/19921103-hypertext/hypertext/WWW/MarkUp/MarkUp.html |titel=HyperText Mark-up Language |abruf=2023-07-10}}</ref>
| |
| * '''HTML''' (ohne Versionsnummer, 30. April 1993): Zu Text kam neben Attributen wie fette oder kursive Darstellung die Bildintegration dazu.
| |
| * '''HTML+''' (November 1993) Geplante Erweiterungen, die in spätere Versionen einflossen, aber nie als HTML+ verabschiedet wurden.<ref>{{Internetquelle |url=https://www.w3.org/MarkUp/htmlplus_paper/htmlplus.html |titel=A Review of the HTML+ Document Format |abruf=2023-07-10}}</ref>
| |
| * '''HTML 2.0''' (November 1995): Die mit RFC 1866 definierte Version führte u. a. Formulartechnik ein. Der Status dieses Standards ist „HISTORIC“. Auch die Vorgänger sind veraltet.
| |
| * '''HTML 3.0''': Nicht erschienen, weil sie mit der Einführung des [[Netscape Navigator|Netscape-Browsers]] in der Version 3 bereits vor der geplanten Veröffentlichung veraltet war.
| |
| * '''HTML 3.2''' (14. Januar 1997): Neu waren zahlreiche Features wie Tabellen, Textfluss um Bilder, Einbindung von [[Java-Applet|Applets]].
| |
| * '''HTML 4.0''' (18. Dezember 1997): Einführung von [[Stylesheet]]s, Skripten und Frames. Auch eine Trennung in ''Strict'', ''Frameset'' und ''Transitional'' erfolgte. Am 24. April 1998 erschien eine leicht korrigierte Version.
| |
| * '''HTML 4.01''' (24. Dezember 1999): Ersetzte HTML 4.0 mit vielen kleineren Korrekturen. War lange Zeit Standard bis 2014.
| |
| * '''[[Extensible Hypertext Markup Language|XHTML]] 1.0''' (26. Januar 2000): Neuformulierung von HTML 4.01 mit Hilfe von [[Extensible Markup Language|XML]]. Am 1. August 2002 erschien eine überarbeitete Version.
| |
| * '''XHTML 1.1''' (31. Mai 2001): Nachdem XHTML in Module aufgeteilt wurde, wurde mit XHTML 1.1 eine strikte Version definiert, bei der die mit HTML 4 eingeführten Varianten Frameset und Transitional entfielen.
| |
| * '''XHTML 2.0''' (closed,<ref>{{Internetquelle |url=https://www.w3.org/TR/xhtml2/Overview.html |titel=XHTML™ 2.0 |abruf=2023-07-10}}</ref> 26. Juli 2006): Diese Version sollte nicht mehr auf HTML 4.01 basieren und einige neue Elemente einführen, so z. B. <code><nowiki><nl></nowiki></code> für Navigationslisten. Die Trennung von Auszeichnung und Stil sollte in dieser Version vollendet werden. – Das [[W3C]] beendete die Arbeiten an XHTML 2.0 im Sommer 2009, weil XHTML durch HTML5 ersetzt werden sollte.<ref>{{Internetquelle |autor=heise online |url=https://www.heise.de/news/XHTML-2-wird-eingestellt-189090.html |titel=XHTML 2 wird eingestellt |datum=2009-07-03 |sprache=de |abruf=2023-07-10}}</ref><ref>{{Internetquelle |url=https://www.w3.org/News/2009.html |titel=2009 - W3C |abruf=2023-07-10}}</ref><ref name="Quelle0" />
| |
| * '''[[HTML5]]''' (Recommendation, 28. Oktober 2014): Schuf auf Basis von HTML 4.01 und XHTML 1.0 ein neues Vokabular. Die zu HTML gehörende DOM-Spezifikation wurde ebenfalls überarbeitet und erweitert.<ref name="html5">{{Internetquelle |url=https://www.w3.org/TR/2014/REC-html5-20141028/ |titel=HTML5, A vocabulary and associated APIs for HTML and XHTML |titelerg=Recommendation (Empfehlung) |hrsg=W3C |datum=2014-10-28 |sprache=en |abruf=2014-11-27}}</ref>
| |
| * '''HTML 5.1''' (Recommendation, 1. November 2016)
| |
| * '''HTML 5.2''' (Recommendation, 14. Dezember 2017): Aktuelle Version.<ref name="html5.1" />
| |
|
| |
| == HTML-Struktur ==
| |
| [[Datei:HTML element content categories.png|mini|HTML element content categories]]
| |
| === Allgemeine Struktur ===
| |
| Ein HTML-Dokument besteht aus drei Bereichen:
| |
| # der [[Dokumenttypdeklaration]] (Doctype) ganz am Anfang der Datei, die die verwendete [[Dokumenttypdefinition]] (DTD) angibt, z. B. HTML 5,
| |
| # dem HTML-Kopf (<code><nowiki>HEAD</nowiki></code>), der hauptsächlich technische oder dokumentarische Informationen enthält, die üblicherweise nicht im Anzeigebereich des Browsers dargestellt werden
| |
| # dem HTML-Körper (<code><nowiki>BODY</nowiki></code>), der jene Informationen enthält, die gewöhnlich im Anzeigebereich des Browsers zu sehen sind.
| |
|
| |
| Somit sieht die Grundstruktur einer Webseite wie folgt aus:
| |
|
| |
| <syntaxhighlight lang="html">
| |
| <!DOCTYPE html>
| |
| <html>
| |
| <head>
| |
| <title>Titel der Webseite</title>
| |
| <meta http-equiv="content-type" content="text/html; charset=utf-8" />
| |
| <!-- weitere Kopfinformationen -->
| |
| <!-- Kommentare werden im Browser nicht angezeigt. -->
| |
| </head>
| |
| <body>
| |
| <p>Inhalt der Webseite</p>
| |
| </body>
| |
| </html>
| |
| </syntaxhighlight>
| |
|
| |
| === HTML-Kopf ===
| |
| Im Kopf (englisch ''head'') können sieben verschiedene Elemente verwendet werden:
| |
| ; <code>title</code>
| |
| : bezeichnet den Titel der Seite, der von den meisten Browsern in der Titelleiste angezeigt wird.
| |
| ; <code>meta</code>
| |
| : kann vielfältige [[Metadaten]] enthalten. Siehe [[Meta-Element]].
| |
| ; <code>base</code>
| |
| : gibt entweder eine Basis-[[Uniform Resource Identifier|URI]] oder einen Basis[[Frame (HTML)|frame]] an.
| |
| ; <code>link</code>
| |
| : dient zur Angabe von logischen Beziehungen zu anderen Ressourcen. Wird am häufigsten zur Einbindung von [[Stylesheet]]s benutzt.
| |
| ; <code>script</code>
| |
| : bindet Code in einer bestimmten [[Skriptsprache]] ein, hauptsächlich [[JavaScript]].
| |
| ; <code>style</code>
| |
| : enthält Stilinformationen, hauptsächlich [[Cascading Style Sheets|CSS]]-Deklarationen.
| |
| ; <code>object</code>
| |
| : bindet eine externe Datei ein. Browser dürfen solche Objekte im Dokumentkopf nicht darstellen. Ab HTML5 ist das object-Tag nicht mehr im HTML-Kopf erlaubt.<ref>{{Internetquelle |url=https://www.w3schools.com/tags/tag_object.asp |titel=HTML object tag |sprache=en-US |abruf=2017-07-26}}</ref>
| |
|
| |
| === HTML-Körper ===
| |
| Der HTML-Körper (englisch ''body'') enthält die eigentlichen Seiteninformationen. HTML unterscheidet zwischen Block- und Inline-Elementen. Der wesentliche Unterschied ist, dass erstere in der Ausgabe einen eigenen Block erzeugen, in dem der Inhalt untergebracht wird, während die Inline-Elemente den Textfluss nicht unterbrechen. Vereinfacht gesprochen haben Block-Elemente immer ihren eigenen Absatz. Mithilfe von [[Cascading Style Sheets|CSS]] ist es jedoch möglich, Block-Elemente wie ein Inline-Element darzustellen und umgekehrt. Zudem lassen sich alle Elemente via CSS auch als ''inline-block'' auszeichnen, mit dem Ergebnis, dass ein solches Element sowohl Eigenschaften eines Block-Elementes als auch eines Inline-Elementes besitzt.
| |
|
| |
| Eine Überschrift erster Ordnung wird so ausgezeichnet:
| |
| <syntaxhighlight lang="html">
| |
| <h1>Überschrift</h1>
| |
| </syntaxhighlight>
| |
|
| |
| <code>h1</code> steht für ''Heading 1'', zeichnet also eine Überschrift der ersten (und in HTML höchsten) Gliederungsstufe aus. Weiter möglich sind <code>h2</code> bis <code>h6</code>, Überschriften zweiter bis sechster Gliederungsstufe.
| |
|
| |
| Ein [[Hyperlink]]:
| |
| <syntaxhighlight lang="html">
| |
| <a href="http://example.com/">Dies ist ein Verweis auf example.com</a>
| |
| </syntaxhighlight>
| |
|
| |
| Hyperlinks sind Verweise auf andere Ressourcen, meistens ebenfalls HTML-Dokumente, die üblicherweise im Browser durch Klick verfolgt werden können. Dieser Link könnte so [[HTML-Rendering|gerendert]] werden: [http://example.com/ Dies ist ein Verweis auf example.com] Ebenso ist an diesem Beispiel zu sehen, dass das Link-Element ein Inline-Element ist und keine neue Zeile beginnt.
| |
|
| |
| Normaler Text wird standardmäßig mit <code>p</code> (für ''Paragraph'') angegeben, obwohl ein Text ohne <code>p</code> problemlos möglich wäre, allerdings ist es sehr zu empfehlen, da dadurch zum einen eine Abtrennung zwischen Quelltext und Ausgabe möglich ist, und zum anderen spätestens bei CSS-Programmierung der Befehl zwingend notwendig ist.
| |
|
| |
| So wird ein Text in HTML ausgegeben:
| |
| <syntaxhighlight lang="html">
| |
| <p>Ich bin ein Beispieltext</p>
| |
| </syntaxhighlight>
| |
| Zur Logik stehen zum Beispiel die Elemente <code>strong</code> oder <code>em</code> bereit, mit denen sich stark hervorgehobener oder betonter Text auszeichnen lässt. Per Voreinstellung (lt. W3C-Empfehlung) werden <code>strong</code>- und <code>em</code>-Elemente durch '''Fettschrift''' beziehungsweise ''kursive Schrift'' gerendert.
| |
|
| |
| Die Strukturbeschreibung des Textes vereinfacht es, das Rendern dem Betrachter anzupassen, um etwa den Text einem Sehbehinderten vorzulesen oder als [[Brailleschrift|Braille]] auszugeben.
| |
|
| |
| == HTML-Varianten ==
| |
| Beim Entwurf der letzten HTML-Version 4 sollte der Tatsache, dass in vielen HTML-Dokumenten noch Elemente und Attribute zur Präsentation eingesetzt werden, Rechnung getragen werden. Das Ergebnis waren schließlich drei Varianten:
| |
|
| |
| === Strict ===
| |
| Diese [[Dokumenttypdefinition]]<!--erneut gem. [[WP:V#Häufigkeit der Verweise]] für fachfremde Leser!--> (DTD) umfasst den Kernbestand an Elementen und Attributen. Es fehlen die meisten Elemente und Attribute zur Beeinflussung der Präsentation, unter anderem die Elemente <code>font</code>, <code>center</code> und <code>u</code> sowie Attribute wie <code>bgcolor</code>, <code>align</code> und <code>target</code>. Deren Rolle sollen in ''Strict''-Dokumenten Stylesheets übernehmen. Text und nicht-blockbildende Elemente innerhalb der Elemente <code>body</code>, <code>form</code>, <code>blockquote</code> und <code>noscript</code> müssen sich grundsätzlich innerhalb eines Container-Elements befinden, zum Beispiel in einem <code>p</code>-Element.
| |
|
| |
| === Transitional ===
| |
| Die Transitional-Variante enthält noch ältere Elemente und Attribute, die auch ''physische'' Textauszeichnung ermöglichen. Durch diese DTD soll Webautoren, die noch nicht logische Strukturierung und Präsentation voneinander trennen, die Möglichkeit gegeben werden, standardkonformes HTML zu schreiben. Gleichzeitig soll sie sicherstellen, dass bestehende Webseiten weiterhin durch aktuelle Webbrowser angezeigt werden können.
| |
|
| |
| === Frameset ===
| |
| Diese Variante enthält zusätzlich zu allen Elementen der Transitional-Variante noch die Elemente für die Erzeugung von [[Frame (HTML)|Framesets]].
| |
|
| |
| == Zusatztechniken und Weiterentwicklungen ==
| |
| === Cascading Style Sheets ===
| |
| Im Laufe der Jahre ist HTML um Elemente erweitert worden, die der visuellen Gestaltung der Dokumente dienen. Das lief der ursprünglichen Idee einer Systemunabhängigkeit entgegen. Eine Rückbesinnung auf die Trennung von Struktur und [[Layout]] (besser: Präsentation) wurde durch die Definition von [[Cascading Style Sheets]] (CSS) vorgenommen. So soll das Aussehen bzw. die Darstellung des Dokuments in einer separaten Datei, dem sogenannten Stylesheet, festgelegt werden. Dies verbessert die Anpassungsfähigkeit des Layouts an das jeweilige Ausgabegerät und an spezielle Bedürfnisse der Benutzer, beispielsweise eine spezielle Darstellung für Sehbehinderte. Heutzutage ist die CSS-Unterstützung der Browser ausreichend, um damit eine anspruchsvolle Gestaltung zu realisieren.
| |
|
| |
| In den Anfangsjahren von HTML bis in die 2000er Jahre hinein wurde noch nicht streng zwischen Layout und Seitenphysik unterschieden. So wurde Design mit Hilfe von Layout-Attributen wie <code>color="Farbe"</code> oder Layout-Tags wie <code><font></code> umgesetzt oder das Aussehen von Tabellen direkt im <code>table</code>-Bereich grob vorgegeben. Dies gilt heute als veraltet und unprofessionell. Außerdem lässt sich der CSS-Code auch in einer Seite ohne ausgelagerte Datei einbinden.
| |
|
| |
| Eine CSS-Datei kann im HTML-Kopf über das link-Element eingebunden werden:
| |
|
| |
| <syntaxhighlight lang="html">
| |
| <link rel="stylesheet" type="text/css" href="stylesheet.css">
| |
| </syntaxhighlight>
| |
|
| |
| === Dynamisches HTML ===
| |
| Schon sehr früh in der Geschichte von HTML wurden Zusatztechniken erfunden, die es ermöglichen, HTML-Dokumente während der Anzeige im Browser dynamisch zu verändern. Die gebräuchlichste ist [[JavaScript]]. Man spricht bei solchen interaktiven Dokumenten von [[Dynamisches HTML|dynamischem HTML]]. Diese Techniken wurden von verschiedenen Browser-Herstellern, allen voran [[Microsoft]] und [[Netscape Communications|Netscape]], unabhängig voneinander entwickelt. Daher gab es erhebliche Probleme bei der Umsetzung der Techniken zwischen den verschiedenen Browsern. Mittlerweile interpretieren alle verbreiteten JavaScript-fähigen Browser das [[Document Object Model]] (DOM). Dadurch ist es möglich, in allen Browsern lauffähige Skripte zu schreiben. Es gibt jedoch noch immer Differenzen bei der Unterstützung des DOM-Standards.
| |
|
| |
| === XHTML ===
| |
| {{Hauptartikel|XHTML}}
| |
| Auf Grundlage von HTML 4.01 (SGML) wurde [[Extensible Hypertext Markup Language|XHTML 1.0]] entwickelt. XHTML genügt den im Vergleich zu SGML strengeren [[Syntax|syntaktischen]] Regeln von XML, ist aber in seinen drei [[Dokumenttypdefinition|DTD]]<!--erneut gem. [[WP:V#Häufigkeit der Verweise]] für fachfremde Leser!-->-Varianten [[Semantik|semantisch]] mit der jeweils entsprechenden DTD-Variante von HTML 4.01 identisch.
| |
|
| |
| === HTML5 ===
| |
| {{Hauptartikel|HTML5}}
| |
| Die jeweiligen Vorteile von [[SGML]] und [[Extensible Markup Language|XML]] der bisherigen HTML-Versionen wurden vereint in HTML5. Abweichend von den bisherigen HTML-Versionen gibt es in HTML5 keine DTD mehr.
| |
|
| |
| === Ajax ===
| |
| Mit der [[Ajax (Programmierung)|Ajax]]-Technologie ist es mittels [[JavaScript]] möglich, einzelne bereits geladene Webbrowser-Inhalte gezielt zu ändern und nachzuladen, ohne dass die Webseite komplett neu geladen werden muss. Wegen des geringeren Datenaufkommens wird zum einen eine schnellere Webserver-Antwort ermöglicht, und zum anderen lassen sich Reaktionsweisen von Desktop-Anwendungen simulieren.
| |
|
| |
| == Siehe auch ==
| |
| * [[Entitäten in Auszeichnungssprachen|Entitäten]]
| |
| * [[MIME Encapsulation of Aggregate HTML Documents]] (MHTML)
| |
|
| |
| == Literatur ==
| |
| '''Standardwerke''' (mit mindestens 2. Auflage):
| |
| * Björn Seibert, Manuela Hoffmann: ''Professionelles Webdesign mit (X)HTML und CSS'', 2. Aufl., Galileo Computing, Bonn 2008, ISBN 978-3-8362-1104-8.
| |
| * Robert R. Agular, Thomas Kobert: ''HTML für Kids'', 5. Aufl., mitp, Frechen 2012, ISBN 978-3-82668681-8.
| |
| * Elisabeth Robson, Eric Freeman: ''HTML und CSS von Kopf bis Fuß'', 2. Aufl., O’Reilly, Köln 2012, ISBN 978-3-86899-934-1.
| |
| * [[Stefan Münz]], [[Clemens Gull]]: ''HTML5 Handbuch'', 10. Aufl., Franzis-Verlag, Haar 2014, ISBN 978-3-645-20345-6.
| |
| * Jennifer Niederst Robbins: ''HTML5 – kurz & gut'', 5. Aufl. O'Reilly, 2014, ISBN 978-3-95561-656-4.
| |
| * Kai Günster: ''Schrödinger lernt HTML5, CSS und JavaScript. Das etwas andere Fachbuch'', 3. Aufl., Rheinwerk, Bonn 2018, ISBN 978-3-8362-6825-7.
| |
| * Thomas Kobert: ''HTML und CSS für Kids'', 2. Aufl., mitp, Frechen 2020, ISBN 978-3-74750117-7.
| |
| * Jürgen Wolf: ''HTML und CSS. Das umfassende Handbuch'', 4. Aufl., Rheinwerk, Bonn 2021, ISBN 978-3-8362-8117-1.
| |
| * Peter Müller: ''Einstieg in HTML und CSS'', 2. Aufl., Rheinwerk, Bonn 2022, ISBN 978-3-8362-9089-0.
| |
| * Florence Maurice: ''HTML & CSS für Dummies'', 2. Aufl., Wiley-VCH, Weinheim 2022, ISBN 978-3-527-72014-9.
| |
| * Christian Wenz, Christoph Prevezanos: ''Jetzt lerne ich HTML5 und CSS3'', 2. Aufl., Markt+Technik Verlag, Burgthann 2022, ISBN 978-3-95982549-8.
| |
|
| |
| == Weblinks ==
| |
| * {{Internetquelle
| |
| |url=https://www.w3.org/TR/html5/
| |
| |titel=HTML5, A vocabulary and associated APIs for HTML and XHTML
| |
| |titelerg=W3C Recommendation 28 Oktober 2014
| |
| |hrsg=W3C
| |
| |datum=2014-10-28
| |
| |sprache=en
| |
| |abruf=2014-10-28
| |
| |kommentar=aktueller HTML-Standard}}
| |
| * {{Internetquelle
| |
| |url=https://www.w3.org/TR/2014/WD-html5-diff-20140918/
| |
| |titel=HTML5 Differences from HTML4
| |
| |titelerg=W3C Working Draft 18 September 2014
| |
| |hrsg=W3C
| |
| |datum=2014-09-18
| |
| |sprache=en
| |
| |abruf=2014-09-25}}
| |
| * {{Internetquelle
| |
| |url=https://www.w3.org/html/wg/
| |
| |titel=HTML working group
| |
| |hrsg=W3C
| |
| |datum=2014-06-12
| |
| |sprache=en
| |
| |abruf=2014-09-26}}
| |
| * {{Internetquelle
| |
| |url=https://wiki.selfhtml.org/wiki/HTML
| |
| |titel=HTML
| |
| |hrsg=[[SELFHTML]]-Wiki
| |
| |datum=2014-09-06
| |
| |abruf=2014-09-25
| |
| |kommentar=Ausführliche Darstellung zusammen mit CSS}}
| |
| * {{Internetquelle
| |
| |url=https://www.w3.org/MarkUp/historical
| |
| |titel=Some early ideas for HTML
| |
| |hrsg=W3C
| |
| |datum=2003-01-09
| |
| |sprache=en
| |
| |abruf=2014-11-25
| |
| |kommentar=zum Ursprung von HTML}}
| |
| {{Commonscat|HTML|audio=1|video=1}}
| |
|
| |
| === Tutorials ===
| |
| {{Wikibooks|Websiteentwicklung}}
| |
| {{Wikibooks|Handbuch Webdesign}}
| |
|
| |
| === Validierung ===
| |
| * [http://www.lingo4u.de/article/checklist Checkliste für Webstandards]
| |
| * [https://validator.w3.org/ W3C-Validator] zur Überprüfung der syntaktischen Richtigkeit eines HTML-Dokuments (englisch)
| |
| * [http://uitest.com/de/analysis/ Verschiedene nützliche Testwerkzeuge], [http://uitest.com/en/check/ Site Check] (englisch)
| |
| * [https://www.htmlhelp.com/tools/validator/ WDG Validator] zur Überprüfung einer kompletten Webseite, Link defekt am 10. Juli 2023
| |
|
| |
| === Ältere Standards ===
| |
| * {{Internetquelle
| |
| |url=https://www.w3.org/TR/WD-html2/
| |
| |titel=Hypertext Markup Language 2.0
| |
| |hrsg=W3C
| |
| |datum=1995-09-22
| |
| |sprache=en
| |
| |abruf=2014-09-25}}
| |
| * {{Internetquelle
| |
| |url=https://www.w3.org/TR/REC-html32
| |
| |titel=HTML 3.2 Reference Specification
| |
| |titelerg=W3C Recommendation 14-Jan-1997
| |
| |hrsg=W3C
| |
| |datum=1997-01-14
| |
| |sprache=en
| |
| |abruf=2014-09-25}}
| |
| * {{Internetquelle
| |
| |url=https://www.w3.org/TR/1998/REC-html40-19980424/
| |
| |titel=HTML 4.0 Specification
| |
| |titelerg=W3C Recommendation, revised on 24-Apr-1998
| |
| |hrsg=W3C
| |
| |datum=1998-04-24
| |
| |sprache=en
| |
| |abruf=2014-09-25}}
| |
| * {{Internetquelle
| |
| |url=https://www.w3.org/TR/html401/
| |
| |titel=HTML 4.01 Specification
| |
| |titelerg=W3C Recommendation 24 December 1999
| |
| |hrsg=W3C
| |
| |datum=1999-12-24
| |
| |sprache=en
| |
| |abruf=2014-09-25}}
| |
| * {{Internetquelle
| |
| |url=https://www.edition-w3.de/TR/1999/REC-html401-19991224/
| |
| |titel=HTML 4.01-Spezifikation
| |
| |titelerg=Deutsche Übersetzung
| |
| |hrsg=edition W3.de
| |
| |datum=1999-12-24
| |
| |abruf=2014-09-25}}
| |
|
| |
|
| [[Kategorie:Offenes Format]] | | [[Kategorie:Offenes Format]] |