Чи потрібно писати теги HEAD, BODY та HTML?

194

Чи потрібно писати <html>, <head>і <body>теги?

Наприклад, я можу зробити таку сторінку:

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

І Firebug правильно розділяє голову і тіло: введіть тут опис зображення

W3C Validation говорить, що це дійсно.

Але я дуже рідко бачу цю практику в Інтернеті.

Чи є підстави писати ці теги?

html tags

— Ларрі Кіннабар
джерело

5

Для перевірки HTML5 на html5.validator.nu потрібен titleтег. Це найменший документ, який він вважає дійсним:<!DOCTYPE html> <title>A</title>

— 1515

142

Опускаючи html, headі body теги , безумовно , допускається в HTML специфікації. Основна причина полягає в тому, що браузери завжди прагнули відповідати існуючим веб-сторінкам, і дуже ранні версії HTML не визначали цих елементів. Коли HTML~~2.0~~ По-перше, це було зроблено таким чином, щоб теги могли зробити висновок про відсутність.

Мені часто буває зручно опускати теги під час прототипування, особливо при написанні тестових випадків, оскільки це допомагає тримати націлювання на зосередженому тесті. Процес виводу повинен створювати елементи точно так, як ви бачите в Firebug, і браузери досить послідовно роблять це.

Але ...

IE має принаймні одну відому помилку в цій області. Навіть IE9 демонструє це. Припустимо, розмітка така:

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

Вам слід (і в інших браузерах) отримати DOM, який виглядає приблизно так:

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

Але в IE ви отримуєте це:

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

Побачте самі.

Здається, ця помилка обмежена formпочатковим тегом, який передує будь-якому текстовому вмісту та будь-якому bodyпочатковому тегу.

— Alohci
джерело

5

HTML 1.0 визначено HTML, HEAD та BODY: w3.org/MarkUp/draft-ietf-iiir-html-01.txt

— Ліза Далі,

6

@Liza - Ну, можна сперечатися, чи визначає цей документ HTML 1.0, але я виправлений, що елементи датують HTML 2.0. Дякую. Однак див. W3.org/History/19921103-hypertext/hypertext/WWW/MarkUp/… від 1992 р. Елементи тоді не існували.

— Alohci

1

Схоже, ця помилка не впливає на Internet Explorer 11 (я також перевіряв IE8, на який я підтверджую, що це впливає)

— jornane

2

@Justin - Ці обмеження значною мірою є технічними і зазвичай не вплинуть на тебе. Так що, якщо для вашої сторінки важливо, чи з’являється вузол коментаря або пробіл безпосередньо перед елементом заголовка або безпосередньо всередині нього (JS сторінки може залежати від нього), тоді ви повинні чітко визначити тег заголовка, щоб зробити це відношення правильним . Але якщо цього немає, (а я ще ніколи не писав HTML-сторінку, де це робиться), тег заголовка буде зроблений десь розумним, і ви можете сміливо його опустити. Так само і для інших тегів html, head та body.

— Alohci

3

@Justin Ця відповідь, мабуть, має достатньо підказки, оскільки питання "Чи потрібно писати теги HEAD, BODY та HTML?" чи не є це хорошою практикою чи ні. Конвенції, як правило, змінюються ... просто погляньте на гугл-стиль-посібник ... це конвенція, в якій говориться, що ви повинні пропустити ці теги ... :-)

— Potherca,

77

Посібник зі стилів Google для HTML рекомендує опустити всі необов’язкові теги.
Це включає в себе <html>, <head>, <body>, <p>і <li>.

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

Для оптимізації розміру файлів та сканування можна розглянути можливість пропуску додаткових тегів. Специфікація HTML5 визначає, які теги можна опустити.

(Цей підхід може вимагати встановлення пільгового періоду як більш широкого керівного принципу, оскільки він суттєво відрізняється від того, що зазвичай навчають веб-розробники. Для послідовності та простоти його найкраще подавати, опускаючи всі необов’язкові теги, а не лише вибір.)

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


<!DOCTYPE html>
<title>Saving money, saving bytes</title>
<p>Qed.

— Рима
джерело

2

Приклад несумісності: інструмент перезавантаження в реальному часі, який я використовую для веб-розробки (пуер), автоматично вставляє сценарій в голову. Нарешті, без тега <head>, він не працює.

— Offirmo

@Offirmo Що на Землі це?

— Кен Шарп

@KenSharp LiveReload веб Dev інструменти , як правило , працюють, вставивши код в сторінках служив, як це: <script src="http://localhost:35729/livereload.js"></script>. Що стосується екзотичних шаблонів, вони не розуміють, куди слід вставити свій код.

— Offirmo

1

@Offirmo Документація завантажених записів, яку ви повинні самостійно додавати цей сценарій на свої клієнтські сторінки. Можливо, ви використовуєте чарівну бібліотеку, яка робить це за вас. Це повинно бути джерелом труднощів, що виникають у вас.

— kequc

7

Пропускати всі можливі теги - безглуздо і безглуздо. Економія пропускної здатності становить незначні відсотки (тим більше, що більшість з'єднань автоматично стискається), тоді як шанси на помилки людей у кращих випадках високі (врахуйте авторів, редакторів і навіть письменників HTML-парсера). Також складніше знайти помилки (через зміну ентропії).

— TextGeek

48

Всупереч примітці @Liza Daly про HTML5, ця специфіка є насправді досить специфічною щодо того, які теги можна опустити, і коли (і правила трохи відрізняються від HTML 4.01, здебільшого для уточнення, куди належать неоднозначні елементи, такі як коментарі та пробіли)

Відповідна посилання: http://www.w3.org/TR/2011/WD-html5-20110525/syntax.html#optional-tags , і в ній написано:

Початковий тег html-елемента може бути пропущений, якщо перше, що знаходиться всередині html-елемента, не є коментарем.
Кінцевий тег html-елемента може бути опущений, якщо елемент html не одразу супроводжується коментарем.
Початковий тег головного елемента може бути пропущений, якщо елемент порожній, або якщо перше, що знаходиться всередині головного елемента, - це елемент.
Кінцевий тег головного елемента може бути пропущений, якщо за заголовком елемента не одразу слідує пробіл або коментар.
Початковий тег елемента body може бути опущений, якщо елемент порожній або якщо перше, що знаходиться всередині елемента body, не є символом пробілу чи коментарем, за винятком випадків, якщо перше, що знаходиться всередині елемента body, це елемент сценарію чи стилю.
Кінцевий тег елемента тіла може бути опущений, якщо елемент тіла не одразу супроводжується коментарем.

Таким чином, ваш приклад є дійсним HTML5, і він би був проаналізований так, з тегами html, head та body у своїх припущених положеннях:

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

Зауважте, що коментар "цей сценарій буде в голові" насправді розбирається як частина тіла, хоча сам сценарій є частиною голови. Згідно з специфікацією, якщо ви хочете, щоб це було зовсім іншим, тоді </HEAD>і <BODY>теги можуть не бути опущені. (Хоча відповідні <HEAD>та </BODY>теги все ще можуть бути)

— Ян Клленд
джерело

15

Дійсно опустити їх у 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

У HTML5 немає "обов'язкових" або "необов'язкових" елементів точно, оскільки синтаксис HTML5 більш вільно визначений. Наприклад title:

Елемент заголовка є необхідним дочірнім пристроєм у більшості ситуацій, але коли протокол вищого рівня надає назву інформації, наприклад, у рядку "Тема" електронної пошти, коли HTML використовується у форматі створення електронної пошти, заголовок елемент може бути пропущений .

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

Неправильно опускати їх у справжньому XHTML5, хоча це майже ніколи не використовується (порівняно з XHTML, що діє, як-HTML5).

Однак з практичної точки зору ви часто хочете, щоб браузери запускалися в "стандартному режимі" для передбачуваності в рендерингу HTML і CSS. Надання DOCTYPE та більш структуроване дерево HTML гарантуватиме більш передбачувані результати крос-браузера.

— Ліза Далі
джерело

13

Не плутайте елементи з тегами. Дивіться коментарі cHao в інших місцях на цій сторінці. Для html, headі body, елементи є обов'язковими, але теги необов’язкові.

— Alohci

Насправді ви помиляєтеся в останній біт. Пропуск тегів - це функція SGML DTD, усі браузери, які підтримують аналіз SGML (тобто всі браузери), також підтримують упущення тегів. Причина, чому ви не можете це зробити в XHTML5, полягає в тому, що це XML, а не SGML. XML занадто німий, щоб виводити елементи.

— OdraEncoded

@OdraEncoded Чи можете ви надати підтвердження для своєї заяви? Я не вважаю, що це так (див . Стандарт HTML ).

— Зубна щітка

@OdraEncoded - близько, але не зовсім вірно. Опущення тегів є необов'язковою функцією для парсерів SGML (хоча більшість підтримує його), як визначено в ISO 8879. Практично всі HTML-парсери підтримують його, хоча "html.parse" Python, як видається, не працює (див. Stackoverflow.com/questions/29954170/… ).

— TextGeek

14

Це правда, що специфікації HTML дозволяють пропускати певні теги в певних випадках, але в цілому це нерозумно.

Він має два ефекти - це робить специфікацію більш складною, а це, у свою чергу, ускладнює авторам браузерів написання правильних реалізацій (як це демонструє IE, неправильне).

Це збільшує ймовірність помилок браузера в цих частинах специфікації. Як автор веб-сайту, ви можете уникнути проблеми, включивши ці теги - тому, якщо специфікація не каже, що вам потрібно, це знижує ймовірність того, що щось піде не так, що є хорошою інженерною практикою.

Більше того, остання специфікація HTML 5.1 WG на даний момент говорить (майте на увазі, що це робота триває і може ще змінитися).

Стартовий тег елемента body може бути опущений, якщо елемент порожній або якщо перше, що знаходиться всередині елемента body, не є символом пробілу чи коментарем, за винятком випадків, якщо перше, що знаходиться всередині елемента body, це мета, посилання, сценарій, стиль або елемент шаблону.

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

Це трохи тонко. Ви можете опустити тіло і голову, і браузер потім зробить висновок про те, куди потрібно вставити ці елементи. Це несе в собі ризик не бути явним, що може спричинити плутанину.

Так це

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

призводить до того, що елемент сценарію є дочірнім елементом body, але це

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

в результаті тег сценарію буде дочірнім елементом заголовка.

Ви можете бути явним, зробивши це

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

і тоді, що б у вас був перший, скрипт або h1, вони обидва, передбачувано, з'являться в елементі body. Це речі, які легко не помітити під час рефакторингу та налагодження коду. (скажімо, наприклад, у вас є JS, який шукає 1-й елемент сценарію в тілі - у другому фрагменті він перестане працювати).

Як правило, бути явним щодо речей завжди краще, ніж залишати речі відкритими для тлумачення. У цьому плані XHTML є кращим, оскільки він змушує вас бути повністю чіткими щодо вашої структури елементів у своєму коді, що робить його простішим і, отже, менш схильним до неправильного тлумачення.

Так, так, ви можете їх опустити і бути технічно дійсними, але це взагалі нерозумно.

— Пітер Бенгалл
джерело

1

IE стає не так, оскільки автори не могли піклуватися про стандарти. Це їхня вина, якщо вона не працює належним чином. Стандарти визначені, тому вони повинні переконатися, що IE працює з ними.

— Кен Шарп

3

@KenSharp Я не погоджуюся, але поки ви не зможете змусити всіх ваших клієнтів не користуватися ним, ми начебто зациклювалися на цьому. Тож краще написати код, який є абсолютно однозначним, ніж покладатися на все, що працює, як слід.

— Пітер Баньялл

1

Користувачі змушені роками скидати IE за невідповідність. Ніхто не очікує, що користувачі продовжують використовувати IE6, навіть якщо люди все ще встановлюють Windows XP. Ми також не можемо сподіватися, що завжди буде підтримувати Windows 3.1. Помилка OSI рівня 8.

— Кен Шарп

1

Точно теги, які можна опустити, і де саме, також залежить від версії HTML. Це також видається вагомою причиною уникати їх (за винятком найбільш очевидних та поширених та послідовних випадків).

— TextGeek

@TextGeek <!DOCTYPE html>.

— Дет

-3

Firebug показує це правильно, оскільки Ваш браузер автоматично виправляє погану розмітку для вас. Така поведінка ніде не вказана і може (буде) змінюватися від браузера до браузера. Ці теги потрібні DOCTYPE, який ви використовуєте, і їх не слід опускати.

Елемент html - це кореневий елемент кожної html-сторінки. Якщо ви подивитесь на опис усіх інших елементів, він говорить про те, де можна використовувати елемент (і майже всі елементи потребують або голови, або тіла).

— півдан
джерело

Отже, це може бути некрос-браузер?

— Ларрі Кіннабар

5

Іншими словами - погана практика дає неозначені результати.

— Ренді

3

@ Innuendo Тільки тому, що щось велике не означає, що це добре складено разом.

— Дем'ян Брехт

2

Як звернення до влади, я вважаю це непереконливим. google.com також недійсний HTML. Це не означає, що має бути вашим.

— Рейн Генріхс

17

Елементи повинні існувати. Ніщо не говорить про теги . Фактично HTML без тегів html / head / body дійсний , якщо жоден елемент не з’являється там, де він не повинен. ( <title>після a <p></p>, наприклад.)

— cHao