É necessário escrever tags HEAD, BODY e HTML?

194

É necessário escrever <html>, <head>e <body>tags?

Por exemplo, eu posso criar uma página assim:

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

E o Firebug separa corretamente a cabeça e o corpo: insira a descrição da imagem aqui

A validação do W3C diz que é válido.

Mas raramente vejo essa prática na web.

Existe algum motivo para escrever essas tags?

html tags

— Larry Cinnabar
fonte

5

O validador HTML5 em html5.validator.nu requer a titletag. Este é o menor documento que considera válido:<!DOCTYPE html> <title>A</title>

— bonh 18/10/2015

142

Omitindo os html, heade body marcas é certamente permitido pelas especificações HTML. A razão subjacente é que os navegadores sempre procuraram ser consistentes com as páginas da Web existentes, e as versões iniciais do HTML não definiram esses elementos. Quando HTML~~2.0~~ primeiro, foi feito de uma maneira que as tags seriam inferidas quando ausentes.

Costumo achar conveniente omitir as tags ao prototipar e, especialmente, ao escrever casos de teste, pois ajuda a manter a marcação focada no teste em questão. O processo de inferência deve criar os elementos exatamente da maneira que você vê no Firebug, e os navegadores são bastante consistentes ao fazer isso.

Mas...

O IE possui pelo menos um bug conhecido nessa área. Até o IE9 exibe isso. Suponha que a marcação seja esta:

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

Você deve (e faz em outros navegadores) obter um DOM parecido com este:

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

Mas no IE você obtém isso:

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

Veja você mesmo.

Esse bug parece limitado à formtag inicial que precede qualquer conteúdo de texto e qualquer bodytag inicial.

— Alohci
fonte

5

HTML 1.0 definiu HTML, cabeça e do corpo: w3.org/MarkUp/draft-ietf-iiir-html-01.txt

— Liza Daly

6

@ Liza - Bem, é discutível se esse documento define HTML 1.0, mas estou corrigido, que os elementos anteriores ao HTML 2.0. Obrigado. No entanto, consulte w3.org/History/19921103-hypertext/hypertext/WWW/MarkUp/… de 1992. Os elementos não existem então.

— Alohci

1

Este bug não parece afetar o Internet Explorer 11 (eu também fiz teste IE8 que confirmam que é afetado)

— jornane

2

@ Justin - Essas restrições são amplamente técnicas e geralmente não afetam você. Portanto, sim, se importa para a sua página se um nó de comentário ou um espaço em branco aparece logo antes do elemento head ou apenas dentro dele (o JS da página pode depender dele), você deve identificar explicitamente a tag do início para tornar esse relacionamento correto . Mas se não, (e eu nunca escrevi uma página HTML onde está), a tag head será inferida em algum lugar sensato e você poderá omiti-la com segurança. Da mesma forma para as outras tags html, head e body.

— Alohci

3

@ Justin Esta resposta parece ter uma pista, já que a pergunta é "É necessário escrever tags HEAD, BODY e HTML?" não se é uma boa prática ou não. Convenções tendem a mudar ... basta dar uma olhada no google Styleguide ... que é uma convenção que afirma que você deve omitir essas marcas ... :-)

— Potherca

77

O Guia de Estilo do Google para HTML recomenda a omissão de todas as tags opcionais.
Isso inclui <html>, <head>, <body>, <p>e <li>.

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

Para fins de otimização do tamanho do arquivo e capacidade de verificação, considere omitir tags opcionais. A especificação HTML5 define quais tags podem ser omitidas.

(Essa abordagem pode exigir que um período de carência seja estabelecido como uma diretriz mais ampla, pois é significativamente diferente do que os desenvolvedores da Web normalmente ensinam. Por motivos de consistência e simplicidade, é melhor servir omitindo todas as tags opcionais, não apenas uma seleção.)

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

— Rima
fonte

2

Exemplo de incompatibilidade: a ferramenta de recarga ao vivo que eu uso para desenvolvimento da Web (puer) insere automaticamente um script na cabeça. Sem finalmente a tag <head>, ela não funciona.

— Offirmo 23/01/16

@ Offirmo O que diabos é isso?

— Ken Sharp

@KenSharp livereload ferramentas de desenvolvimento web geralmente trabalham através da inserção de algum código em páginas servidas, assim: <script src="http://localhost:35729/livereload.js"></script>. Para modelos exóticos, eles não entendem onde devem inserir seu código.

— Offirmo

1

@Offirmo A documentação do livereload afirma que você deve adicionar esse script às páginas do seu cliente. Talvez você esteja usando uma biblioteca mágica que faz isso por você. Essa deve ser a fonte da dificuldade que você está tendo.

— 585 keqc

7

Omitir todas as tags possíveis é tolo e insensato. A economia de largura de banda é de uma pequena porcentagem (especialmente porque a maioria das conexões é compactada automaticamente), enquanto as chances de erro humano nos casos extremos são altas (considere autores, editores e até escritores analisadores de HTML). Também é mais difícil encontrar erros (devido à mudança na entropia).

— TextGeek

48

Ao contrário da observação de @Liza Daly sobre HTML5, essa especificação é realmente bastante específica sobre quais tags podem ser omitidas e quando (e as regras são um pouco diferentes do HTML 4.01, principalmente para esclarecer onde elementos ambíguos como comentários e espaço em branco pertencem)

A referência relevante é http://www.w3.org/TR/2011/WD-html5-20110525/syntax.html#optional-tags e diz:

A tag inicial de um elemento html pode ser omitida se a primeira coisa dentro do elemento html não for um comentário.
A tag final de um elemento html pode ser omitida se o elemento html não for seguido imediatamente por um comentário.
A tag inicial de um elemento principal pode ser omitida se o elemento estiver vazio ou se a primeira coisa dentro do elemento principal for um elemento.
A tag final de um elemento principal pode ser omitida se o elemento principal não for seguido imediatamente por um caractere de espaço ou um comentário.
A tag inicial de um elemento do corpo pode ser omitida se o elemento estiver vazio ou se a primeira coisa dentro do elemento do corpo não for um caractere de espaço ou um comentário, exceto se a primeira coisa dentro do elemento do corpo for um script ou um elemento de estilo.
A tag final de um elemento do corpo pode ser omitida se o elemento do corpo não for seguido imediatamente por um comentário.

Portanto, seu exemplo é HTML5 válido e seria analisado dessa maneira, com as tags html, head e body em suas posições implícitas:

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

Observe que o comentário "este script estará na cabeça" é realmente analisado como parte do corpo, embora o próprio script faça parte da cabeça. De acordo com a especificação, se você quiser que isso seja diferente, as tags </HEAD>e <BODY>não podem ser omitidas. (Embora as tags correspondentes <HEAD>e </BODY>ainda possam ser)

— Ian Clelland
fonte

15

É válido omiti-los no 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

No HTML5, não existem elementos "obrigatórios" ou "opcionais" exatamente, pois a sintaxe do HTML5 é mais vagamente definida. Por exemplo title:

O elemento title é um filho obrigatório na maioria das situações, mas quando um protocolo de nível superior fornece informações sobre o título, por exemplo, na linha Assunto de um email quando o HTML é usado como um formato de autoria de email, o elemento title pode ser omitido .

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

Não é válido omiti-los no XHTML5 verdadeiro, embora isso quase nunca seja usado (versus o XHTML que age como o HTML5).

No entanto, do ponto de vista prático, você geralmente deseja que os navegadores sejam executados no "modo de padrões", para previsibilidade na renderização de HTML e CSS. Fornecer um DOCTYPE e uma árvore HTML mais estruturada garantirá resultados mais previsíveis entre navegadores.

— Liza Daly
fonte

13

Não confunda elementos com tags. Veja os comentários de cHao em outras partes desta página. Para html, heade body, os elementos são obrigatórios, mas as tags são opcionais.

— Alohci

Na verdade, você está errado no último bit. A omissão de tag é um recurso SGML DTD, todos os navegadores que suportam a análise SGML (ou seja, todos os navegadores) também suportam a omissão de tag. A razão pela qual você não pode fazer isso no XHTML5 é porque é XML, não SGML. XML é burro demais para inferir elementos.

— usar o seguinte código

@OdraEncoded Você pode fornecer a verificação do seu extrato, por favor? Não acho que seja esse o caso (consulte o HTML Standard ).

— Escova de dentes

@OdraEncoded - próximo, mas não é bem verdade. A omissão de tag é um recurso opcional para os analisadores SGML (embora a maioria deles suporte), conforme definido na ISO 8879. Quase todos os analisadores HTML suportam, embora o 'html.parse' do Python pareça não ser o mesmo (consulte stackoverflow.com/questions/29954170/… )

— TextGeek

14

É verdade que as especificações HTML permitem que certas tags sejam omitidas em certos casos, mas geralmente isso é imprudente.

Ele tem dois efeitos - torna as especificações mais complexas, o que torna mais difícil para os autores do navegador escrever implementações corretas (como demonstrado pelo IE errando).

Isso aumenta a probabilidade de erros do navegador nessas partes da especificação. Como autor de um site, você pode evitar o problema incluindo essas tags - portanto, embora as especificações não digam que você precisa, isso reduz a chance de dar errado, o que é uma boa prática de engenharia.

Além do mais, a especificação mais recente do HTML 5.1 WG diz atualmente (lembre-se de que é um trabalho em andamento e que ainda pode mudar).

A tag inicial de um elemento do corpo pode ser omitida se o elemento estiver vazio ou se a primeira coisa dentro do elemento do corpo não for um caractere de espaço ou um comentário, exceto se a primeira coisa dentro do elemento do corpo for um meta, link, script, estilo ou elemento do modelo.

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

Isso é um pouco sutil. Você pode omitir corpo e cabeça, e o navegador inferirá onde esses elementos devem ser inseridos. Isso implica o risco de não ser explícito, o que pode causar confusão.

Então, é isso

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

resulta no elemento script ser filho do elemento body, mas isso

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

resultaria na tag de script um filho do elemento head.

Você pode ser explícito fazendo isso

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

e, o que você tiver primeiro, o script ou o h1, os dois aparecerão previsivelmente no elemento body. São coisas fáceis de ignorar ao refatorar e depurar o código. (digamos, por exemplo, você tem JS que está procurando o primeiro elemento de script no corpo - no segundo trecho, ele para de funcionar).

Como regra geral, ser explícito sobre as coisas é sempre melhor do que deixar as coisas abertas à interpretação. Nesse aspecto, o XHTML é melhor porque obriga a ser completamente explícito sobre a estrutura do elemento em seu código, o que o torna mais simples e, portanto, menos propenso a erros de interpretação.

Portanto, sim, você pode omiti-los e ser tecnicamente válido, mas geralmente não é aconselhável fazê-lo.

— Peter Bagnall
fonte

1

O IE erra as coisas porque os autores não se importam com os padrões. A culpa é deles se não funcionar corretamente. Os padrões são definidos para garantir que o IE funcione com eles.

— Ken afiada

3

@KenSharp Não discordo, mas até que você possa forçar todos os seus clientes a não usá-lo, estamos meio que presos a ele. Portanto, é melhor escrever um código completamente inequívoco, em vez de confiar em tudo que está funcionando como deveria.

— Peter Bagnall

1

Os usuários foram forçados a despejar o IE por anos por não serem compatíveis. Ninguém espera que os usuários continuem usando o IE6, mesmo que as pessoas ainda estejam instalando o Windows XP. Também não podemos esperar o suporte ao Windows 3.1 para sempre. Erro de nível 8 do OSI.

— Ken afiada

1

Exatamente quais tags podem ser omitidas e exatamente onde também variam de acordo com a versão HTML. Esse também parece ser um bom motivo para evitá-los (exceto nos casos mais óbvios, comuns e consistentes).

— TextGeek

@TextGeek <!DOCTYPE html>.

— Det

-2

O Firebug mostra isso corretamente porque o seu navegador corrige automaticamente a marcação incorreta para você. Esse comportamento não é especificado em nenhum lugar e pode (irá) variar de navegador para navegador. Essas tags são necessárias pelo DOCTYPE que você está usando e não devem ser omitidas.

O elemento html é o elemento raiz de todas as páginas html. Se você olhar para a descrição de todos os outros elementos, ele diz onde um elemento pode ser usado (e quase todos os elementos requerem cabeça ou corpo).

— halfdan
fonte

Então, pode ser não cross-browser?

— Larry Cinnabar

5

em outras palavras - más práticas produzindo resultados indefinidos.

— Randy

3

@Innuendo Só porque algo grande não significa que está bem organizado.

— Demian Brecht

2

Como um apelo à autoridade, acho isso pouco convincente. google.com também é HTML inválido. Não significa que o seu deva ser.

— precisa saber é o seguinte

17

Os elementos devem existir. Nada diz que as tags fazem. HTML sem tags html / head / body é, de fato, válido desde que nenhum elemento apareça onde não deveria. ( <title>após a <p></p>, por exemplo.)

— cHao 12/04