Marcar sopa

No desenvolvimento web , " sopa de tags " é um pejorativo para HTML escrito para uma página web que é sintaticamente ou estruturalmente incorreta. Os navegadores da Web têm historicamente tratado erros estruturais ou de sintaxe em HTML com tolerância, portanto, tem havido pouca pressão para que os desenvolvedores da Web sigam os padrões publicados. Portanto, é necessário que todas as implementações de navegador forneçam mecanismos para lidar com o aparecimento de "sopa de tags", aceitando e corrigindo sintaxe e estrutura inválidas sempre que possível.

Um analisador HTML (parte de um navegador da web) que é capaz de interpretar marcação semelhante a HTML, mesmo que contenha sintaxe ou estrutura inválida, pode ser chamado de analisador de sopa de tags . Todos os principais navegadores da Web atualmente possuem um analisador de tags para interpretar HTML malformado, com a maioria dos elementos de tratamento de erros padronizados.

A "sopa de tags" abrange muitos erros comuns de criação, como tags HTML malformadas , elementos HTML aninhados incorretamente e entidades de caracteres sem escape (especialmente e comercial (&) e sinais de menor que (<)).

Há anos que uso esse termo em minhas instruções para caracterizar a confusão de colchetes angulares que atuam como tags em HTML em páginas aceitas pelos navegadores. Minimização inadequada, construções sobrepostas... coisas que se parecem com marcação SGML, mas o criador não conhecia ou respeitava as regras SGML para o vocabulário HTML. Na verdade, uma coleção de texto e marcação. [...] nunca vi o termo definido em lugar nenhum.

-  G. Ken Holman, Re: [xml-dev] O que é Tag Soup? , lista de discussão de desenvolvimento XML, 11 de outubro de 2002.

O serviço de validação de marcação é um recurso para autores de páginas da web evitarem a criação de sopa de tags.

Visão geral

"Sopa de tags" é um termo usado para denegrir várias práticas de criação na web. Alguns deles (ordenados aproximadamente do mais grave para o menos grave) incluem:

  1. Marcação malformada onde as tags estão aninhadas ou fechadas incorretamente. Por exemplo, o seguinte:
    < p > Este é um fragmento malformado de < em > HTML. </ p </ em >
    
  2. Estrutura inválida onde os elementos estão aninhados incorretamente de acordo com o DTD do documento. Exemplos disso incluem aninhar um elemento "ul" diretamente dentro de outro elemento "ul" para qualquer um dos DTDs HTML 4.01 ou XHTML. Dan Connolly cita o uso do elemento title fora da seção head . [1]
  3. Uso de elementos e atributos proprietários ou indefinidos em vez daqueles definidos nas recomendações do W3C. Por exemplo, o uso do elemento Blink ou do elemento Marquee , que eram elementos não padrão originalmente suportados apenas pelos navegadores Netscape e Internet Explorer , respectivamente.

Causas e implicações

Marcação malformada

A marcação malformada é sem dúvida o problema mais grave na criação na web. No entanto, graças a uma melhor educação e informação e talvez com alguma ajuda do XHTML, o problema da marcação malformada está a tornar-se menos comum. Os navegadores, quando confrontados com marcações malformadas, devem adivinhar o significado pretendido pelo autor. Eles devem inferir as tags de fechamento onde as esperam e então inferir as tags de abertura para corresponderem a outras tags de fechamento. A interpretação pode variar significativamente de um navegador para outro. [2]

Embora muitos editores gráficos da Web produzam marcações bem formadas, um autor que escreve o código manualmente com um editor de texto e depois testa apenas em um navegador pode facilmente ignorar esses erros. A apresentação pode, portanto, variar drasticamente de um navegador para outro, pois cada um tenta "corrigir" a intenção do autor de maneiras diferentes e depois aplica estilos a essas "correções".

Estrutura de documento inválida

Estrutura de documento inválida aqui significa apenas o uso de atributos e elementos aos quais eles não pertencem. Por exemplo, colocar um atributo "cite" em um elemento "cite" é inválido, pois os DTDs HTML e XHTML não atribuem nenhum significado a esse atributo naquele elemento. Da mesma forma, incluir um elemento “p” no conteúdo de um elemento “em” também é inválido. Com o movimento no sentido de separar marcações malformadas de marcações inválidas, os problemas com marcações inválidas têm sido cada vez mais vistos como menos graves. Alguns começaram a defender modelos de conteúdo mais flexíveis que permitem maior flexibilidade na criação de documentos HTML (seja em HTML ou XHTML). No entanto, o uso de marcação inválida pode confundir o significado pretendido pelo autor, embora não tão severamente quanto a marcação malformada.

Muitos editores gráficos da web ainda produzem marcações inválidas. Além disso, muitos web designers e autores profissionais prestam pouca atenção às questões de validade. É comum ver marcações inválidas em muitos sites da World Wide Web.

Uso de elementos proprietários/descontinuados

Nos primórdios da web (grande parte da década de 1990), o design da especificação HTML oficial tornou-se cada vez mais tenso, em comparação com o desejo dos designers de flexibilidade na criação de designs visualmente vibrantes. Em resposta a esta pressão, os fabricantes de navegadores adicionaram unilateralmente novos recursos proprietários ao HTML que estavam fora dos padrões da época. Isso significava que havia elementos proprietários em HTML que funcionavam em alguns navegadores, mas não em outros.

Até certo ponto, este problema foi abrandado pela introdução de novos padrões pelo W3C, como o CSS, introduzido em 1998, que ajudou a proporcionar maior flexibilidade na apresentação e layout de páginas web sem a necessidade de um grande número de elementos HTML adicionais. e atributos.

Além disso, em HTML 4 e XHTML 1, muitos elementos foram substituídos por uma única construção semântica (como elementos de objeto substituindo miniaplicativos proprietários e elementos incorporados ) ou obsoletos por serem de apresentação (como "s", "strike" e " você" elementos).

No entanto, os desenvolvedores de navegadores continuaram a introduzir novos elementos no HTML quando perceberam a necessidade. Alguns navegadores incluíam atributos tabindex em qualquer elemento. Os desenvolvedores do WebKit da Apple introduziram o elemento canvas , cuja versão foi posteriormente adotada pela Mozilla .

Em 2004, Apple, Mozilla e Opera fundaram o WHATWG , com a intenção de criar uma nova versão da especificação HTML que correspondesse a todo o comportamento do navegador. Isso incluiu alterar a especificação, se necessário, para corresponder a um consenso existente entre diferentes navegadores. [3]

Os elementos canvas [4] e embed [5] foram posteriormente padronizados pelo WHATWG. Certos elementos (incluindo b , i e small ) que anteriormente eram considerados de apresentação e obsoletos foram incluídos, mas definidos de maneira independente da mídia e não visual. [6]

Versões da especificação WHATWG foram publicadas pelo W3C como HTML5 . [3]

Evolução das especificações para resolver a sopa de tags

Embora alguns dos problemas da sopa de tags se devam a deficiências dos navegadores e, às vezes, à falta de informações para os autores da web, parte da proliferação da sopa de tags se deveu à falta de links nos próprios padrões da web. O W3C liderou vários esforços para resolver as deficiências dos padrões da web. À medida que mais navegadores suportam revisões mais recentes de padrões, diminui a pressão sobre os desenvolvedores da Web para usar código não padrão para resolver problemas.

Folhas de estilo em cascata (CSS)

Cascading Style Sheets (CSS) fornecem um mecanismo para especificar a apresentação de elementos em um documento sem alterar a estrutura de marcação do documento. Antes do CSS se tornar comum, os desenvolvedores web podem ter recorrido a alguma marcação estruturalmente inválida para atingir certos objetivos de apresentação - por exemplo, incluindo elementos de nível de bloco dentro de elementos inline para obter um efeito específico, ou usando, às vezes, um grande número de <font>tags HTML específicas de exibição. . CSS usa regras de estilo para realizar essas tarefas, deixando a marcação mais limpa e simples.

XML e XHTML

XHTML é uma reformulação da linguagem HTML baseada em XML . O XHTML foi desenvolvido para resolver muitos dos problemas associados à sopa de tags.

XML permite que os analisadores separem o processo de interpretação da sintaxe do documento e sua estrutura. Em HTML e SGML , um analisador precisava conhecer certas regras sobre os elementos durante a análise, como quais elementos poderiam estar contidos dentro de outros elementos e quais elementos fecham implicitamente o elemento anterior. Isso ocorre porque em HTML e SGML, tags de fechamento e até tags de abertura eram opcionais em alguns elementos. Ao exigir que todos os elementos tenham tags explícitas de abertura e fechamento, os analisadores XML podem analisar o documento e produzir uma árvore de documentos sem qualquer conhecimento do tipo de documento. Isso permite que os analisadores sejam universais e muito leves, além de serem separados do processo de validação ou interpretação do documento.

A especificação XML define claramente que um agente de usuário em conformidade (como um navegador da web) não deve aceitar um documento e não continuar analisando-o, se algum erro sintático for encontrado. Assim, um navegador que interpreta uma página web como XHTML se recusará a exibir a página se encontrar um erro de formação. Isto pode ajudar a garantir que quando os autores testarem o código XHTML em um navegador compatível, eles serão imediatamente informados sobre problemas de malformação: talvez o problema mais grave enfrentado pelos navegadores da web. Quando o código está malformado, a intenção do autor é ambígua. Sem as diretivas do XML, os navegadores HTML devem usar algoritmos complexos para inferir o significado pretendido pelo autor em uma ampla variedade de casos em que é encontrada sintaxe inválida.

XML e XHTML introduzem o conceito de namespaces. Com namespaces, autores ou comunidades de autores podem definir novos elementos e atributos com nova semântica e misturá-los em seus documentos XHTML. Os namespaces garantem que os nomes dos elementos dos vários namespaces não serão confundidos. Por exemplo, um elemento “tabela” poderia ser definido em um novo namespace com nova semântica diferente do elemento “tabela” HTML e o navegador será capaz de diferenciar entre os dois. Ao fornecer namespaces, o XHTML combinado com o CSS permite que as comunidades de autoria estendam facilmente o vocabulário semântico dos documentos. Isso acomoda o uso de elementos proprietários, desde que esses elementos possam ser apresentados ao público-alvo por meio de definições completas de folhas de estilo (incluindo estilos auditivos/de fala e táteis).

Documentos XHTML podem ser servidos na web usando o tipo de mídia da Internet application/xhtml+xml ou text/html[7] As versões do Microsoft Internet Explorer anteriores a 9 não exibem documentos XHTML servidos como arquivos application/xhtml+xml. IE9 e versões posteriores são compatíveis. Veja também a discussão deste assunto no artigo XHTML .

HTML5

O HTML5 pretende ser a solução mais completa para o problema da sopa de tags até agora, permanecendo o mais compatível possível com versões anteriores e futuras. Em contraste com o XHTML, que se afasta da compatibilidade com versões anteriores e adota a abordagem de que os analisadores devem se tornar menos tolerantes com marcações mal formadas, o HTML5 reconhece que o código HTML mal formado já existe em grandes quantidades e provavelmente continuará a ser usado, e considera que a especificação deve ser expandida para garantir a máxima compatibilidade com esse código.

Assim, a especificação HTML 5 alterou sua definição de sintaxe HTML tanto para acomodar a sintaxe comum em uso hoje, quanto para descrever explicitamente exatamente como o "código mal formado" deve ser tratado pelo analisador. O tratamento de código mal formado agora tem um lugar na própria especificação, reduzindo esperançosamente a necessidade de futuros analisadores de HTML implementarem medidas adicionais, fora da especificação, para lidar com código que ele não reconhece.

Ferramentas

Existem muitas ferramentas de software que podem analisar e tentar corrigir marcações malformadas, entre outras funções.

  • HTML Tidy é uma ferramenta de software disponível para muitas plataformas que pode corrigir sintaxe inválida e a maioria das estruturas de documentos inválidas, convertendo código semelhante a HTML em HTML ou XHTML.
  • Aggiorno é um suplemento do Visual Studio que se concentra em tornar os sites compatíveis com os padrões
  • TagSoup é uma biblioteca Java que analisa HTML, limpa-o e entrega um fluxo de eventos SAX representando XML bem formado (não necessariamente XHTML válido). Esta ferramenta é usada para processar arquivos JNLP na implementação de código aberto do protocolo JNLP disponível no IcedTea-Web , um subprojeto do IcedTea , o projeto de construção e integração do OpenJDK .
  • Beautiful Soup é um analisador semelhante ao DOM do Python para HTML/XML que pode lidar com marcações malformadas. [8]
  • tagsoup: uma biblioteca para a linguagem Haskell .

Desvios válidos do XHTML

Ao contrário do XHTML estrito, o HTML e seu antecessor SGML são projetados para serem escritos por humanos e já possuem um grau significativo de flexibilidade na sintaxe para reduzir clichês. Essas diferenças não tornam o documento inválido e, portanto, não são uma sopa de tags. O seguinte se aplica tanto ao HTML 4 quanto ao HTML5, [9] e os exemplos datam dos primeiros dias do HTML. [10]

  • Tags como <head>...</head>muitas vezes podem ser completamente omitidas.
  • O fechamento de tags muitas vezes pode ser omitido porque a especificação rejeita alguns elementos aninhados nela mesma. Por exemplo, vários <li>...</li>elementos podem ser escritos sem fechar.

Apesar de sua validade, essas omissões ainda requerem um analisador especial com conhecimento de HTML (em oposição ao XML mais rígido) para serem analisadas. Além disso, é comum que ferramentas também “consertem” essas estruturas. Por exemplo, HTML Tidy permite omitir tags opcionais, mas o padrão é não fazê-lo. [11]

Veja também

Notas

  • G. Ken Holman. Re: [xml-dev] O que é sopa de tags? , lista de discussão de desenvolvimento XML, 11 de outubro de 2002. Mensagem arquivada disponível online.
  • "sopa de etiqueta." Definições.net. STANDS4 LLC, 2013. Rede. 19 de novembro de 2013. sopa.

Referências

  1. ^ Winer, Dave (12 de outubro de 2002). "O que é sopa de tags?" Notícias de script . David Winer . Arquivado do original em 26 de fevereiro de 2004 . Recuperado em 23 de novembro de 2017 . O exemplo que ele citou é o elemento <title>. Realmente só faz sentido no <head> de um documento, mas aparentemente um ou mais navegadores permitiriam definir o título de uma página no corpo da página! Não é que isso faça a terra desabar ou o céu cair, tudo pode prosseguir normalmente, mas é errado fazer isso aí e o mundo seria um lugar (um pouco) melhor se os navegadores não permitissem.
  2. ^ Hickson, Ian (21 de novembro de 2002). "Tag Soup: Como os UAs lidam com <x> <y> </x> </y>" . Recuperado em 11 de setembro de 2020 .
  3. ^ ab O QUEWG. “1.6 História”. Padrão HTML .
  4. ^ O QUE. "4.12.5 O elemento tela". Padrão HTML .
  5. ^ O QUE. "4.8.6 O elemento incorporado". Padrão HTML .
  6. ^ O QUE. "PERGUNTAS FREQUENTES". WHATWG.org .
  7. ^ "XHTML 1.0 The Extensible HyperText Markup Language (segunda edição) Uma reformulação do HTML 4 em XML 1.0, Apêndice C. Diretrizes de compatibilidade HTML" . Recomendação W3C. 1 de agosto de 2002 [26 de janeiro de 2000] . Recuperado em 13/09/2008 . Documentos XHTML que seguem as diretrizes estabelecidas no Apêndice C, "Diretrizes de compatibilidade HTML" podem ser rotulados com o tipo de mídia da Internet "text/html" [RFC2854], pois são compatíveis com a maioria dos navegadores HTML. Esses documentos, e qualquer outro documento em conformidade com esta especificação, também podem ser rotulados com o Internet Media Type "application/xhtml+xml", conforme definido em [RFC3236]. Para mais informações sobre o uso de tipos de mídia com XHTML, consulte a nota informativa [XHTMLMIME].
  8. ^ Tagliaferri, Lisa (20 de julho de 2017). "Como raspar páginas da Web com Beautiful Soup e Python 3" . Tutoriais sobre o oceano digital . Oceano Digital . Arquivado do original em 2 de setembro de 2017 . Recuperado em 23 de novembro de 2017 . Atualmente disponível como Beautiful Soup 4 e compatível com Python 2.7 e Python 3, Beautiful Soup cria uma árvore de análise a partir de documentos HTML e XML analisados ​​(incluindo documentos com tags não fechadas ou sopa de tags e outras marcações malformadas).
  9. ^ "§3 Em SGML e HTML" . Especificação HTML 4.01 . W3C . 24 de dezembro de 1999. §3.2.1 Elementos.; HTML 5.1 2ª Edição § 8.1.2.4. Tags opcionais
  10. ^ Consulte a fonte das especificações HTML 2 § Estrutura do documento para omissão do fechamento de li, e o documento HTML Tags original para omissão do fechamento p e head.
  11. ^ "Referência rápida das opções do HTML Tidy 5.7.0" . api.html-tidy.org .
Obtido em "https://en.wikipedia.org/w/index.php?title=Tag_soup&oldid=1210660343"