Czy konieczne jest pisanie znaczników HEAD, BODY i HTML?

194

Jest to konieczne, aby napisać <html>, <head>i <body>znaczniki?

Na przykład mogę zrobić taką stronę:

<!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>

A Firebug poprawnie oddziela głowę i ciało: wprowadź opis zdjęcia tutaj

Walidacja W3C mówi, że jest ważna.

Ale rzadko widzę tę praktykę w Internecie.

Czy jest jakiś powód, aby pisać te tagi?

html tags Larry Cinnabar
źródło
5
Walidator HTML5 w html5.validator.nu wymaga titleznacznika. Jest to najmniejszy dokument, który uważa za ważny:<!DOCTYPE html> <title>A</title>
bonh 18.10.15

Odpowiedzi:

142

Pomijając html, headoraz body znaczniki pewnością jest dozwolone przez specyfikację HTML. Głównym powodem jest to, że przeglądarki zawsze starały się być spójne z istniejącymi stronami internetowymi, a bardzo wczesne wersje HTML nie definiowały tych elementów. Kiedy HTML2.0 po pierwsze, zrobiono to w taki sposób, aby tagi były wywnioskowane, gdy brakowało.

Często uważam, że wygodne jest pomijanie tagów podczas prototypowania, a zwłaszcza podczas pisania przypadków testowych, ponieważ pomaga to skupić się na analizie. Proces wnioskowania powinien tworzyć elementy dokładnie w taki sposób, jak w Firebug, a przeglądarki są w tym dość konsekwentne.

Ale...

IE ma co najmniej jeden znany błąd w tym obszarze. Nawet IE9 to pokazuje. Załóżmy, że znacznik jest następujący:

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

Powinieneś (i zrobić to w innych przeglądarkach) DOM, który wygląda następująco:

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

Ale w IE dostajesz to:

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

Przekonaj się sam.

Ten błąd wydaje się ograniczony do formznacznika początkowego poprzedzającego dowolną treść tekstową i dowolny bodyznacznik początkowy.

Alohci
źródło
5
HTML 1.0 zdefiniował HTML, HEAD i BODY: w3.org/MarkUp/draft-ietf-iiir-html-01.txt
Liza Daly
6
@Liza - Można się spierać, czy ten dokument definiuje HTML 1.0, ale poprawiam się, że elementy starszą wersję HTML 2.0. Dzięki. Jednak patrz w3.org/History/19921103-hypertext/hypertext/WWW/MarkUp/... z 1992 roku. Wówczas elementy nie istnieją.
Alohci,
1
Ten błąd wydaje się nie wpływać na Internet Explorera 11 (przetestowałem również IE8, który, jak potwierdzam, ma wpływ)
jornane 30.04.2014
2
@Justin - Ograniczenia te są w dużej mierze techniczne i zwykle nie będą miały na Ciebie wpływu. Tak więc, jeśli dla twojej strony ma znaczenie to, czy węzeł komentarza lub biały znak pojawia się tuż przed elementem head, czy bezpośrednio w nim (JS strony może od niego zależeć), musisz jawnie zidentyfikować tag head start, aby ten związek był poprawny . Ale jeśli tak się nie stanie (a jeszcze nigdy nie napisałem strony HTML, w której to działa), tag head zostanie wyprowadzony w rozsądnym miejscu i można go bezpiecznie pominąć. Podobnie w przypadku innych tagów HTML, head i body.
Alohci,
3
@Justin Ta odpowiedź wydaje się być dość wskazówką, ponieważ pytanie brzmi: „Czy konieczne jest pisanie znaczników HEAD, BODY i HTML?” nie, czy jest to dobra praktyka. Konwencje mają tendencję do zmiany ... wystarczy spojrzeć na przewodnik po stylach Google ... to konwencja, która stwierdza, że należy pominąć te tagi ... :-)
Potherca
77

Przewodnik po stylach Google dla HTML zaleca pominięcie wszystkich opcjonalnych tagów.
Która obejmuje <html>, <head>, <body>, <p>i <li>.

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

Aby zoptymalizować rozmiar pliku i zeskanować, rozważ pominięcie opcjonalnych tagów. Specyfikacja HTML5 określa, które tagi można pominąć.

(Takie podejście może wymagać ustanowienia okresu karencji jako szerszej wskazówki, ponieważ znacznie różni się od tego, czego zwykle uczą się twórcy stron internetowych. Ze względów spójności i prostoty najlepiej jest pominąć wszystkie opcjonalne tagi, a nie tylko wybrane).

<!-- 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
źródło
2
Przykład niezgodności: narzędzie przeładowania na żywo, którego używam do tworzenia stron internetowych (puer) automatycznie wstawia skrypt do głowy. Bez tagu <head> w końcu to nie działa.
Offirmo
@Offirmo Co to jest na ziemi?
Ken Sharp
@KenSharp livereload narzędzia web dev zwykle działają poprzez wstawienie kodu na stronach podawane, tak: <script src="http://localhost:35729/livereload.js"></script>. W przypadku szablonów egzotycznych nie rozumieją, gdzie powinny wstawić kod.
Offirmo
1
@Offirmo Dokumentacja stanów Livereload informuje, że powinieneś sam dodać ten skrypt do stron klienta. Być może korzystasz z magicznej biblioteki, która robi to za Ciebie. To powinno być źródłem trudności, którą masz.
kequc
7
Pominięcie wszystkich możliwych tagów jest głupie i głupie. Oszczędności na przepustowości stanowią niewielki procent (zwłaszcza, że ​​większość połączeń automatycznie kompresuje się), podczas gdy prawdopodobieństwo błędu ludzkiego w przypadkach brzegowych jest wysokie (rozważ autorów, redaktorów, a nawet autorów parsera HTML). Trudniej jest również znaleźć błędy (z powodu zmiany entropii).
TextGeek
48

W przeciwieństwie do uwagi @Liza Daly na temat HTML5, ta specyfikacja jest w rzeczywistości dość konkretna w kwestii tego, które tagi można pominąć i kiedy (a reguły są nieco inne niż HTML 4.01, głównie w celu wyjaśnienia, gdzie należą niejednoznaczne elementy, takie jak komentarze i białe znaki)

Odpowiedni odnośnik to http://www.w3.org/TR/2011/WD-html5-20110525/syntax.html#optional-tags i mówi:

  • Znacznik początkowy elementu html można pominąć, jeśli pierwszą rzeczą wewnątrz elementu html nie jest komentarz.

  • Znacznik końcowy elementu html można pominąć, jeśli po elemencie html nie następuje od razu komentarz.

  • Znacznik początkowy elementu head może zostać pominięty, jeśli element jest pusty lub jeśli pierwszą rzeczą wewnątrz elementu head jest element.

  • Znacznik końcowy elementu head można pominąć, jeśli po elemencie head nie następuje natychmiast znak spacji lub komentarz.

  • Znacznik początkowy elementu body można pominąć, jeśli element jest pusty lub pierwsza rzecz wewnątrz elementu body nie jest znakiem spacji lub komentarzem, z wyjątkiem sytuacji, gdy pierwszą rzeczą wewnątrz elementu body jest skrypt lub element stylu.

  • Znacznik końcowy elementu body można pominąć, jeśli po elemencie body nie następuje natychmiast komentarz

Tak więc twój przykład jest prawidłowym HTML5 i zostałby przeanalizowany w ten sposób, z tagami html, head i body w domyślnych pozycjach:

<!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>

Zauważ, że komentarz „ten skrypt będzie w głowie” jest tak naprawdę analizowany jako część ciała, chociaż sam skrypt jest częścią głowy. Zgodnie ze specyfikacją, jeśli chcesz, aby w ogóle było inaczej, tagi </HEAD>i <BODY>mogą nie zostać pominięte. (Mimo że odpowiednie <HEAD>i </BODY>tagi nadal mogą być)

Ian Clelland
źródło
15

Można je pominąć w HTML4:

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

W HTML5 nie ma dokładnie „wymaganych” lub „opcjonalnych” elementów, ponieważ składnia HTML5 jest bardziej luźno zdefiniowana. Na przykład title:

Element tytułowy jest wymaganym dzieckiem w większości sytuacji, ale gdy protokół wyższego poziomu zapewnia informacje o tytule, np. W wierszu Temat wiadomości e-mail, gdy HTML jest formatem tworzenia wiadomości e-mail, element tytułowy można pominąć .

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

Pomijanie ich w prawdziwym XHTML5 jest nieprawidłowe, chociaż prawie nigdy nie jest używane (w porównaniu z XHTML-podobnym do HTML5).

Jednak z praktycznego punktu widzenia często chcesz, aby przeglądarki działały w „trybie standardów”, aby zapewnić przewidywalność renderowania HTML i CSS. Zapewnienie DOCTYPE i bardziej uporządkowanego drzewa HTML zagwarantuje bardziej przewidywalne wyniki w różnych przeglądarkach.

Liza Daly
źródło
13
Nie myl elementów z tagami. Zobacz komentarze cHao w innym miejscu na tej stronie. Za html, heada bodyelementy są obowiązkowe, ale tagi są opcjonalne.
Alohci
Właściwie w ostatniej chwili się mylisz. Pominięcie znaczników jest funkcją DTD SGML, wszystkie przeglądarki obsługujące parsowanie SGML (czyli wszystkie przeglądarki) również obsługują pomijanie znaczników. Powodem, dla którego nie możesz tego zrobić w XHTML5, jest to, że jest to XML, a nie SGML. XML jest zbyt głupi, by wnioskować o elementach.
OdraEncoded
@OdraEncoded Czy możesz podać weryfikację swojego wyciągu? Nie uważam, żeby tak było (patrz standard HTML ).
Szczoteczka do zębów
@OdraEncoded - blisko, ale nie do końca prawda. Pominięcie tagów jest opcjonalną funkcją dla parserów SGML (choć większość go obsługuje), zgodnie z definicją w ISO 8879. Prawie wszystkie parsery HTML obsługują to, chociaż „html.parse” Pythona wydaje się tego nie robić (patrz stackoverflow.com/questions/29954170/... ).
TextGeek
14

To prawda, że ​​specyfikacje HTML pozwalają na pominięcie niektórych tagów w niektórych przypadkach, ale generalnie jest to nierozsądne.

Ma dwa efekty - sprawia, że ​​specyfikacja jest bardziej złożona, co z kolei utrudnia autorom przeglądarki pisanie poprawnych implementacji (jak pokazuje błąd IE).

To zwiększa prawdopodobieństwo błędów przeglądarki w tych częściach specyfikacji. Jako autor strony internetowej możesz uniknąć tego problemu, dołączając te tagi - więc chociaż specyfikacja nie mówi, że musisz, to zmniejsza to ryzyko błędu, co jest dobrą praktyką inżynierską.

Co więcej, najnowsza specyfikacja HTML 5.1 WG mówi obecnie (pamiętaj, że jest to praca w toku i może się jeszcze zmienić).

Znacznik początkowy elementu body może zostać pominięty, jeśli element jest pusty lub pierwsza rzecz wewnątrz elementu body nie jest znakiem spacji lub komentarzem, z wyjątkiem sytuacji, gdy pierwszą rzeczą wewnątrz elementu body jest meta, link, skrypt, styl lub element szablonu.

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

To jest trochę subtelne. Możesz pominąć ciało i głowę, a przeglądarka określi, gdzie należy wstawić te elementy. Niesie to za sobą ryzyko braku jawności, co może powodować zamieszanie.

Więc to

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

powoduje, że element script jest dzieckiem elementu body, ale to

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

spowoduje, że tag skryptu będzie potomkiem elementu head.

Możesz to zrobić wyraźnie

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

a następnie cokolwiek masz najpierw, skrypt lub h1, oba będą, jak można się spodziewać, pojawią się w elemencie ciała. Są to rzeczy, które łatwo przeoczyć podczas refaktoryzacji i debugowania kodu. (powiedzmy na przykład, że masz JS, który szuka pierwszego elementu skryptu w ciele - w drugim fragmencie przestałby działać).

Zasadą jest, że wyrażanie się na różne tematy jest zawsze lepsze niż pozostawianie rzeczy otwartych na interpretację. Pod tym względem XHTML jest lepszy, ponieważ zmusza cię do całkowitego wyrażenia swojej struktury elementu w kodzie, co czyni go prostszym, a zatem mniej podatnym na błędną interpretację.

Więc tak, możesz je pominąć i być technicznie poprawnym, ale generalnie jest to nierozsądne.

Peter Bagnall
źródło
1
IE źle się dzieje, ponieważ autorzy nie dbają o standardy. To ich wina, jeśli nie działa poprawnie. Standardy są zdefiniowane, więc powinny upewnić się, że IE z nimi współpracuje.
Ken Sharp
3
@KenSharp Nie zgadzam się, ale dopóki nie zmusisz wszystkich swoich klientów do nieużywania go, to trochę go utknęliśmy. Lepiej więc pisać kod, który jest całkowicie jednoznaczny, niż polegać na wszystkim, co działa tak, jak powinno.
Peter Bagnall,
1
Użytkownicy byli zmuszeni zrzucać IE przez lata za nieprzestrzeganie zasad. Nikt nie oczekuje, że użytkownicy będą nadal korzystać z IE6, nawet jeśli ludzie nadal instalują system Windows XP. Nie możemy też oczekiwać, że będziemy wspierać system Windows 3.1 na zawsze. Błąd OSI poziomu 8.
Ken Sharp
1
Dokładnie, które tagi można pominąć i gdzie dokładnie, zależy również od wersji HTML. Wydaje się to również dobrym powodem do ich uniknięcia (z wyjątkiem najbardziej oczywistych, powszechnych i spójnych przypadków).
TextGeek
@TextGeek <!DOCTYPE html>.
Det
-3

Firebug pokazuje to poprawnie, ponieważ Twoja przeglądarka automatycznie naprawia dla ciebie złe znaczniki. To zachowanie nie jest nigdzie określone i może (będzie) różnić się w zależności od przeglądarki. Te tagi są wymagane przez używany DOCTYPE i nie należy ich pomijać.

Element HTML jest elementem głównym każdej strony HTML. Jeśli spojrzysz na opis wszystkich innych elementów, zobaczysz, gdzie można użyć elementu (i prawie wszystkie elementy wymagają głowy lub ciała).

halfdan
źródło
Więc może to nie być przeglądarka internetowa?
Larry Cinnabar
5
innymi słowy - zła praktyka dająca nieokreślone wyniki.
Randy,
3
@Innuendo To, że coś jest duże, nie oznacza, że ​​jest dobrze połączone.
Demian Brecht
2
Jako apel do władzy uważam to za nieprzekonujące. google.com jest również nieprawidłowym kodem HTML. To nie znaczy, że twoje powinno być.
Rein Henrichs,
17
Elementy muszą istnieć. Nic nie mówi o tagach . HTML bez tagów html / head / body jest w rzeczywistości ważny, dopóki nie pojawi się żaden element, w którym nie powinien. ( <title>po <p></p>na przykład.)
cHao