Ist es notwendig, HEAD-, BODY- und HTML-Tags zu schreiben?

194

Ist es notwendig zu schreiben <html>, <head>und<body> Tags?

Zum Beispiel kann ich eine solche Seite erstellen:

<!DOCTYPE html>     
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <title>Page Title</title>
    <link rel="stylesheet" type="text/css" href="css/reset.css">
    <script src="js/head_script.js"></script><!-- this script will be in head //-->


<div>Some html</div> <!-- here body starts //-->

    <script src="js/body_script.js"></script>

Und Firebug trennt Kopf und Körper richtig: Geben Sie hier die Bildbeschreibung ein

Die W3C-Validierung gibt an, dass sie gültig ist.

Aber ich sehe diese Praxis selten im Internet.

Gibt es einen Grund, diese Tags zu schreiben?

html tags Larry Cinnabar
quelle
5
Der HTML5-Validator unter html5.validator.nu benötigt das titleTag. Dies ist das kleinste Dokument, das es für gültig hält:<!DOCTYPE html> <title>A</title>
Bonh

Antworten:

142

Weglassen der html, headund body Tags wird sicherlich von den HTML - Spezifikationen erlaubt. Der Grund dafür ist, dass Browser immer versucht haben, mit vorhandenen Webseiten konsistent zu sein, und die sehr frühen Versionen von HTML haben diese Elemente nicht definiert. Beim HTML2.0 Zuerst wurde es so gemacht, dass die Tags abgeleitet werden, wenn sie fehlen.

Ich finde es oft bequem, die Tags beim Prototyping und insbesondere beim Schreiben von Testfällen wegzulassen, da dies dazu beiträgt, das Markup auf den betreffenden Test zu konzentrieren. Der Inferenzprozess sollte die Elemente genau erstellen, wie Sie es in Firebug sehen, und Browser sind dabei ziemlich konsistent.

Aber...

IE hat mindestens einen bekannten Fehler in diesem Bereich. Sogar IE9 zeigt dies. Angenommen, das Markup lautet wie folgt:

<!DOCTYPE html>
<title>Test case</title>
<form action='#'>
   <input name="var1">
</form>

Sie sollten (und in anderen Browsern) ein DOM erhalten, das so aussieht:

HTML
    HEAD
        TITLE
    BODY
        FORM action="#"
            INPUT name="var1"

Aber im IE bekommen Sie Folgendes:

HTML
    HEAD
       TITLE
       FORM action="#"
           BODY
               INPUT name="var1"
    BODY

Überzeugen Sie sich selbst.

Dieser Fehler scheint auf das formStart-Tag vor jedem Textinhalt und jedem bodyStart-Tag beschränkt zu sein.

Alohci
quelle
5
HTML 1.0 definiert HTML, HEAD und BODY: w3.org/MarkUp/draft-ietf-iiir-html-01.txt
Liza Daly
6
@Liza - Nun, es ist fraglich, ob dieses Dokument HTML 1.0 definiert, aber ich stehe korrigiert da, dass die Elemente vor HTML 2.0 datieren. Vielen Dank. Siehe jedoch w3.org/History/19921103-hypertext/hypertext/WWW/MarkUp/… von 1992. Die Elemente existieren dann nicht.
Alohci
1
Dieser Fehler scheint Internet Explorer 11 nicht zu beeinträchtigen (ich habe auch IE8 getestet, von dem ich bestätige, dass er betroffen ist)
jornane
2
@Justin - Diese Einschränkungen sind größtenteils technischer Natur und betreffen Sie normalerweise nicht. Also ja, wenn es für Ihre Seite wichtig ist, ob ein Kommentarknoten oder ein Leerzeichen direkt vor dem head-Element oder direkt darin angezeigt wird (das JS der Seite könnte davon abhängen), müssen Sie das Head-Start-Tag explizit identifizieren, um diese Beziehung zu korrigieren . Wenn dies nicht der Fall ist (und ich habe noch nie eine HTML-Seite geschrieben, auf der dies der Fall ist), wird das Head-Tag an einer sinnvollen Stelle abgeleitet, und Sie können es sicher weglassen. Ebenso für die anderen HTML-, Kopf- und Body-Tags.
Alohci
3
@Justin Diese Antwort scheint eine ziemliche Ahnung zu haben, da die Frage lautet: "Ist es notwendig, HEAD-, BODY- und HTML-Tags zu schreiben?" nicht, ob es eine gute Praxis ist oder nicht. Konventionen ändern sich in der Regel ... werfen Sie einen Blick auf den Google Styleguide ... das ist eine Konvention, die besagt, dass Sie diese Tags weglassen sollten ... :-)
Potherca
77

Im Google Style Guide für HTML wird empfohlen, alle optionalen Tags wegzulassen.
Dazu gehört <html>, <head>, <body>, <p>und <li>.

https://google.github.io/styleguide/htmlcssguide.html#Optional_Tags

Wenn Sie die Dateigröße optimieren und scannen möchten, sollten Sie optionale Tags weglassen. Die HTML5-Spezifikation definiert, welche Tags weggelassen werden können.

(Für diesen Ansatz muss möglicherweise eine Nachfrist als umfassendere Richtlinie festgelegt werden, da sie sich erheblich von den üblichen Anweisungen für Webentwickler unterscheidet. Aus Gründen der Konsistenz und Einfachheit wird am besten empfohlen, alle optionalen Tags wegzulassen, nicht nur eine Auswahl.)

<!-- Not recommended -->
<!DOCTYPE html>
<html>
  <head>
    <title>Spending money, spending bytes</title>
  </head>
  <body>
    <p>Sic.</p>
  </body>
</html>

<!-- Recommended -->
<!DOCTYPE html>
<title>Saving money, saving bytes</title>
<p>Qed.
Rima
quelle
2
Beispiel für Inkompatibilität: Das Live-Reload-Tool, das ich für die Webentwicklung (Puer) verwende, fügt automatisch ein Skript in head ein. Ohne das <head> -Tag funktioniert es nicht.
Offirmo
@Offirmo Was um alles in der Welt ist das?
Ken Sharp
@ KenSharp Livereload Web-Entwicklungstools funktionieren normalerweise, indem Code in die bereitgestellten Seiten eingefügt wird : <script src="http://localhost:35729/livereload.js"></script>. Bei exotischen Vorlagen verstehen sie nicht, wo sie ihren Code einfügen sollen.
Offirmo
1
@Offirmo In der Dokumentation zu Livereload heißt es, dass Sie dieses Skript selbst zu Ihren Client-Seiten hinzufügen sollten. Vielleicht verwenden Sie eine magische Bibliothek, die dies für Sie erledigt. Das sollte die Ursache für die Schwierigkeiten sein, die Sie haben.
Kequc
7
Das Weglassen aller möglichen Tags ist penny-weise und Pfund-dumm. Die Bandbreitenersparnis beträgt winzige% (insbesondere, da die meisten Verbindungen automatisch komprimiert werden), während die Wahrscheinlichkeit menschlicher Fehler in den Randfällen hoch ist (berücksichtigen Sie Autoren, Redakteure und sogar HTML-Parser-Autoren). Es ist auch schwieriger, Fehler zu finden (aufgrund der Änderung der Entropie).
TextGeek
48

Im Gegensatz zu @Liza Daly's Hinweis zu HTML5 ist diese Spezifikation tatsächlich ziemlich spezifisch darüber, welche Tags wann weggelassen werden können (und die Regeln unterscheiden sich ein wenig von HTML 4.01, hauptsächlich um zu verdeutlichen, wo mehrdeutige Elemente wie Kommentare und Leerzeichen hingehören).

Die relevante Referenz lautet http://www.w3.org/TR/2011/WD-html5-20110525/syntax.html#optional-tags und lautet:

  • Das Start-Tag eines HTML-Elements kann weggelassen werden, wenn das erste Element im HTML-Element kein Kommentar ist.

  • Das End-Tag eines HTML-Elements kann weggelassen werden, wenn auf das HTML-Element nicht sofort ein Kommentar folgt.

  • Das Start-Tag eines Kopfelements kann weggelassen werden, wenn das Element leer ist oder wenn das erste Element im Kopfelement ein Element ist.

  • Das End-Tag eines Kopfelements kann weggelassen werden, wenn dem Kopfelement nicht unmittelbar ein Leerzeichen oder ein Kommentar folgt.

  • Das Start-Tag eines Body-Elements kann weggelassen werden, wenn das Element leer ist oder wenn das erste Element im body-Element kein Leerzeichen oder Kommentar ist, es sei denn, das erste Element im body-Element ist ein Skript oder ein Stilelement.

  • Das End-Tag eines Body-Elements kann weggelassen werden, wenn auf das Body-Element nicht sofort ein Kommentar folgt.

Ihr Beispiel ist also gültiges HTML5 und wird wie folgt analysiert, wobei sich die HTML-, Kopf- und Body-Tags an ihren implizierten Positionen befinden:

<!DOCTYPE html><HTML><HEAD>     
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <title>Page Title</title>
    <link rel="stylesheet" type="text/css" href="css/reset.css">
    <script src="js/head_script.js"></script></HEAD><BODY><!-- this script will be in head //-->


<div>Some html</div> <!-- here body starts //-->

    <script src="js/body_script.js"></script></BODY></HTML>

Beachten Sie, dass der Kommentar "Dieses Skript wird im Kopf sein" tatsächlich als Teil des Körpers analysiert wird, obwohl das Skript selbst Teil des Kopfes ist. Laut der Spezifikation dürfen die Tags </HEAD>und <BODY>nicht weggelassen werden , wenn Sie möchten, dass dies überhaupt anders ist . (Obwohl die entsprechenden <HEAD>und </BODY>Tags noch sein können)

Ian Clelland
quelle
15

Es ist gültig, sie in HTML4 wegzulassen:

7.3 The HTML element
start tag: optional, End tag: optional

7.4.1 The HEAD element
start tag: optional, End tag: optional

http://www.w3.org/TR/html401/struct/global.html

In HTML5 gibt es keine "erforderlichen" oder "optionalen" Elemente, da die HTML5-Syntax lockerer definiert ist. Zum Beispiel title:

Das Titelelement ist in den meisten Situationen ein erforderliches untergeordnetes Element. Wenn jedoch ein übergeordnetes Protokoll Titelinformationen bereitstellt, z. B. in der Betreffzeile einer E-Mail, wenn HTML als E-Mail-Authoring-Format verwendet wird, kann das Titelelement weggelassen werden .

http://www.w3.org/TR/html5/semantics.html#the-title-element-0

Es ist nicht gültig, sie in echtem XHTML5 wegzulassen, obwohl dies fast nie verwendet wird (im Vergleich zu XHTML, das sich wie HTML5 verhält).

Aus praktischer Sicht möchten Sie jedoch häufig, dass Browser im "Standardmodus" ausgeführt werden, um die Vorhersagbarkeit beim Rendern von HTML und CSS zu gewährleisten. Durch die Bereitstellung eines DOCTYPE und eines strukturierteren HTML-Baums werden vorhersehbarere browserübergreifende Ergebnisse garantiert.

Liza Daly
quelle
13
Verwechseln Sie Elemente nicht mit Tags. Siehe die Kommentare von cHao an anderer Stelle auf dieser Seite. Für html, headund bodysind die Elemente obligatorisch, aber die Tags sind optional.
Alohci
Eigentlich liegst du im letzten Bit falsch. Das Auslassen von Tags ist eine SGML-DTD-Funktion. Alle Browser, die das SGML-Parsing unterstützen (dh alle Browser), unterstützen auch das Auslassen von Tags. Der Grund, warum Sie dies in XHTML5 nicht tun können, ist, dass es sich um XML und nicht um SGML handelt. XML ist zu dumm, um auf Elemente schließen zu können.
OdraEncoded
@OdraEncoded Können Sie bitte Ihre Aussage bestätigen? Ich finde das nicht der Fall (siehe HTML-Standard ).
Zahnbürste
@OdraEncoded - nah, aber nicht ganz wahr. Das Auslassen von Tags ist eine optionale Funktion für SGML-Parser (obwohl die meisten dies unterstützen), wie in ISO 8879 definiert. Fast alle HTML-Parser unterstützen dies, obwohl Pythons 'html.parse' dies nicht zu tun scheint (siehe stackoverflow.com/questions/29954170/… ).
TextGeek
14

Es ist wahr, dass die HTML-Spezifikationen in bestimmten Fällen das Weglassen bestimmter Tags zulassen, dies ist jedoch im Allgemeinen unklug.

Es hat zwei Effekte - es macht die Spezifikation komplexer, was es wiederum für Browser-Autoren schwieriger macht, korrekte Implementierungen zu schreiben (wie der IE zeigt, wenn er falsch liegt).

Dies erhöht die Wahrscheinlichkeit von Browserfehlern in diesen Teilen der Spezifikation. Als Website-Autor können Sie das Problem vermeiden, indem Sie diese Tags einfügen. Obwohl die Spezifikation dies nicht vorschreibt, verringert dies die Wahrscheinlichkeit, dass etwas schief geht, was eine gute technische Praxis ist.

Darüber hinaus heißt es derzeit in der neuesten HTML 5.1 WG-Spezifikation (bedenken Sie, dass es sich um eine laufende Arbeit handelt, die sich möglicherweise noch ändert).

Das Start-Tag eines Body-Elements kann weggelassen werden, wenn das Element leer ist oder wenn das erste Element im body-Element kein Leerzeichen oder Kommentar ist, es sei denn, das erste Element im body-Element ist ein Meta, ein Link, ein Skript oder ein Stil oder Vorlagenelement.

http://www.w3.org/html/wg/drafts/html/master/sections.html#the-body-element

Das ist etwas subtil. Sie können Körper und Kopf weglassen, und der Browser leitet dann ab, wo diese Elemente eingefügt werden sollen. Dies birgt das Risiko, nicht explizit zu sein, was zu Verwirrung führen kann.

Also das

<html>
  <h1>hello</h1>
  <script ... >
  ...

führt dazu, dass das Skriptelement ein untergeordnetes Element des body-Elements ist, dies jedoch

<html>
  <script ... >
  <h1>hello</h1>

würde dazu führen, dass das Skript-Tag ein untergeordnetes Element des head-Elements ist.

Sie könnten dies explizit tun

<html>
    <body>
      <script ... >
      <h1>hello</h1>

und je nachdem, was Sie zuerst haben, das Skript oder das h1, werden beide vorhersehbar im body-Element erscheinen. Dies sind Dinge, die beim Refactoring und Debuggen von Code leicht zu übersehen sind. (Nehmen wir zum Beispiel an, Sie haben JS, das nach dem ersten Skriptelement im Hauptteil sucht - im zweiten Snippet würde es nicht mehr funktionieren).

In der Regel ist es immer besser, explizit über Dinge zu sprechen, als sie der Interpretation zu überlassen. In dieser Hinsicht ist XHTML besser, weil es Sie dazu zwingt, Ihre Elementstruktur in Ihrem Code vollständig zu beschreiben, was es einfacher und daher weniger anfällig für Fehlinterpretationen macht.

Ja, Sie können sie weglassen und technisch gültig sein, aber es ist im Allgemeinen unklug, dies zu tun.

Peter Bagnall
quelle
1
IE macht etwas falsch, weil die Autoren sich nicht weniger für Standards interessieren könnten. Es ist ihre Schuld, wenn es nicht richtig funktioniert. Die Standards sind so definiert, dass sie sicherstellen sollten, dass der IE mit ihnen funktioniert.
Ken Sharp
3
@ KenSharp Ich bin nicht anderer Meinung, aber bis Sie alle Ihre Kunden dazu zwingen können, es nicht zu verwenden, bleiben wir irgendwie dabei. Schreiben Sie also besser Code, der völlig eindeutig ist, als sich darauf zu verlassen, dass alles so funktioniert, wie es sollte.
Peter Bagnall
1
Benutzer sind seit Jahren gezwungen, den IE zu sichern, weil sie nicht konform sind. Niemand erwartet, dass Benutzer IE6 weiterhin verwenden, selbst wenn Windows XP noch installiert wird. Wir können auch nicht erwarten, Windows 3.1 für immer zu unterstützen. OSI Level 8 Fehler.
Ken Sharp
1
Welche Tags weggelassen werden können und wo genau, hängt auch von der HTML-Version ab. Dies scheint auch ein guter Grund zu sein, sie zu vermeiden (mit Ausnahme der offensichtlichsten und häufigsten und beständigsten Fälle).
TextGeek
@TextGeek <!DOCTYPE html>.
Det
-2

Firebug zeigt dies korrekt an, da Ihr Browser das fehlerhafte Markup automatisch für Sie behebt. Dieses Verhalten ist nirgendwo angegeben und kann (wird) von Browser zu Browser variieren. Diese Tags werden von dem von Ihnen verwendeten DOCTYPE benötigt und sollten nicht weggelassen werden.

Das HTML-Element ist das Stammelement jeder HTML-Seite. Wenn Sie sich die Beschreibung aller anderen Elemente ansehen, wird angegeben, wo ein Element verwendet werden kann (und fast alle Elemente erfordern entweder Kopf oder Körper).

Halfdan
quelle
Es kann also kein Cross-Browser sein?
Larry Cinnabar
5
mit anderen Worten - schlechte Praxis, die zu undefinierten Ergebnissen führt.
Randy
3
@Innuendo Nur weil etwas groß ist, heißt das nicht, dass es gut zusammengestellt ist.
Demian Brecht
2
Als Appell an die Autorität finde ich das nicht überzeugend. google.com ist ebenfalls ungültiges HTML. Das heißt nicht, dass deins sein sollte.
Rein Henrichs
17
Die Elemente müssen existieren. Nichts sagt, dass die Tags tun. HTML ohne HTML / Kopf / Körper-Tags ist in der Tat gültig , solange kein Element dort angezeigt wird, wo es nicht angezeigt werden sollte. ( <title>nach a <p></p>zum Beispiel.)
CHao