Por que temos que usar divs?

13

Hoje de manhã, enquanto escrevia alguns html e haml, ocorreu-me que a maneira como os divs são usados ​​é ridícula. Por que divs não está implícito? Imagine se isso:

<div class="hero-img">
   <img src="http://whatever.com/this.jpg">
</div>

foi isto:

<hero-img>
   <img src="http://whatever.com/this.jpg">
</hero-img>

Se a parte "div class" do elemento fosse assumida, o HTML seria mais semântico e infinitamente mais legível com as tags de fechamento correspondentes!

Isso é semelhante ao HAML, onde temos:

.content Hello, World!

O que se torna:

<div class='content'>Hello, World!</div>

Parece-me que a única coisa que teria que acontecer para que isso funcionasse nos navegadores é que os navegadores poderiam começar a interpretar todos os elementos sem uma definição de elemento html existente implicando <div class="<element name>">.

Isso pode ser completamente compatível com versões anteriores; para seletores CSS e jQuery etc., "div.hero-img" ainda pode funcionar e ser a sintaxe necessária para selecionar os elementos.

Conheço a nova especificação de componentes da Web, mas isso é significativamente mais complicado do que o sugerido aqui. Você pode imaginar como seria agradável olhar para a fonte de um site e ver um html assim?

Então, por que precisamos usar divs?

Se você olhar para a lista de elementos html5 da Mozilla , cada elemento tem um significado semântico, e então chegamos a <div>ele e diz:

"Representa um contêiner genérico sem significado especial."

..e então eles listam os elementos arbitrários que estão adicionando ao html5 <details>.

Obviamente, se esse conceito de divs implícitas fosse adicionado à especificação html, levaria dez anos para se tornar padrão, o que representa um milhão de anos no tempo da web.

Então, acho que deve haver uma boa razão para isso ainda não ter acontecido. Por favor, explique para mim!

Jordan Davis
fonte
Na verdade, existem dois não semântica recipiente: div e span
Lie Ryan

Respostas:

7

Problema 1: Espaços em Branco

Acredito que isso não tenha surgido em geral. Embora, uma boa razão para que isso não ocorra e provavelmente não deva acontecer é porque white-spacesno CSS classesdefinem várias classes para o elemento, enquanto no HTML elas definem attributes.

Explique (ou peça a um navegador para analisar) o seguinte código:

<pet family style=" ... ">
  <img src="my-pets-family.jpg"/>
</pet family>

A familydefinição de uma segunda classe ou de um atributo para o elemento HTML? Como você provavelmente vê no analisador deste site, ele acha que é um atributo.

Portanto, se eu quiser <div class="pet family">, não há como realmente definir duas classes, que é uma das duas principais razões pelas quais eu usaria uma classe em vez de um id.

Problema 2: Compatibilidade direta!

Usando <div> s no momento nos obriga (pelo menos alguns de nós) a recuar e comentar adequadamente o código, o que é uma boa prática para todas as linguagens de programação.

Em vez disso, transformar blocos HTML em variáveis ​​causaria grande confusão aos novos programadores quanto ao que está e o que não está fazendo algo específico em HTML .

Além disso, causará o engraçado efeito colateral de você começar a comparar seu código antigo com as novas tags HTML5, apenas para garantir que elas não tenham o mesmo nome que você fez para as classes de sua div ...

O mesmo problema se aplica ao variablesuso reserved wordsem alguns idiomas. O PHP resolveu com um cifrão, portanto, uma abordagem semelhante em HTML resultaria em algo não muito melhor do que o uso atual de <div class="something">.

mavrosxristoforos
fonte
<z:name1 attr1=foo attr2=bar> ... <z/name2 attr3=boz ... </z>Haveria algum problema com o cara que inventou a "classe" especificando que seria semanticamente equivalente a, <div class="name1" attr1="foo" attr2="bar">...</div><div class="name2" attr1="boz"> ... </div>mas levaria muito menos tempo para enviar por um modem de 14,4 K?
Supercat
Eu acho que não. Mas isso seria apenas uma sintaxe diferente para escrever exatamente a mesma coisa, sem melhorar o conceito de forma <div class="">alguma. Então, novamente, por que definir isso z:name1ou z/name2é a tag HTML classe não a sua id? E o problema do espaço em branco aparece novamente aqui. Portanto, teria que ser z:"name1 name2"declarar duas classes, que praticamente se tornam a mesma coisa novamente.
mavrosxristoforos
Existem muitas possibilidades de sintaxe. Meu argumento foi que, em uma época em que muitas pessoas usavam modems 14,4K ou mais lentos, deveria haver um formulário que levasse pelo menos alguma consideração aos problemas de largura de banda.
Supercat
Eu definitivamente entendo isso. Como desenvolvedor web, ainda tento minimizar qualquer coisa para produzir sites mais rápidos e muito mais. Eu acredito que é uma boa abordagem em muitos aspectos, no entanto.
mavrosxristoforos
5

Utilizamos em <div>vez do que lhe agrada, porque facilita o processamento e a renderização pelo navegador.

Como um contra-exemplo, o XML permite a criação de qualquer tag-name que você deseja. A capacidade de criar nomes de tags arbitrários tem um custo de processamento. Os analisadores XML precisam criar um dicionário das tags usadas em um documento como parte de / enquanto ele está analisando o documento.

Ao usar <div>navegadores, você sabe que existe um contêiner e pode ignorá-lo ou transmiti-lo a alguma outra ferramenta da cadeia que possa fazer algo com o contêiner.


fonte
Tenho certeza de que, se os navegadores usassem o método div implícito mencionado, o custo de processamento seria muito pequeno. E os benefícios da leitura e da escrita seriam enormes.
Jordan Davis
3
<div>significa menos complexidade, o que é sempre uma coisa boa. O HTML é construído em dois tipos de construções: nível de bloco e marcação embutida. Ter mais maneiras de expressar a mesma coisa só contribui para a bagunça que é HTML.
" facilita o processamento e a renderização pelo navegador. " Isso não é realmente verdade. É necessário que o navegador analise tags não reconhecidas e todos os métodos DOM e seletores de CSS ainda precisam trabalhar neles conforme o esperado, e os navegadores ainda aplicarão CSS a elementos não reconhecidos. A única coisa que o navegador não faz com tags não reconhecidas é aplicar os estilos padrão (estilos de agente de usuário) e comportamentos.
Lie Ryan
3

Você está sugerindo que os autores da Web adicionem nomes de elementos arbitrários ao HTML para fins privados (não padronizados). Isso tem um grande problema: tornar perigoso adicionar novos elementos ao padrão HTML, porque vários autores já podem estar usando o mesmo nome de elemento para fins particulares - alterando retroativamente a semântica da página. As pessoas não ficam satisfeitas quando novas versões de navegadores quebram as páginas da web existentes, então isso é proibido.

O mesmo problema é com o uso de nomes de atributos arbitrários para fins particulares. É por isso que o HTML5 exige o prefixo "data-" para atributos de uso privado, para que eles não colidam com novos atributos no padrão.

Div e span são definidos como elementos semanticamente neutros, o que significa que você pode usá-los para fins particulares sem medo de que a semântica seja alterada em navegadores futuros. Certamente, são necessários mais alguns caracteres para adicionar um nome de classe, mas a compatibilidade direta faz valer a pena.

JacquesB
fonte
2

Seu próprio exemplo exibe uma propriedade por que os divs não são tão ridículos.

<div class="hero-img">
  <img src="http://whatever.com/this.jpg">
</div>

Você não fechou a imgtag corretamente . Algumas tags, tais como img, br, hr, e outros não têm qualquer conteúdo, e são, portanto, não deve ser fechada. O analisador sabe disso.

A divtag, por outro lado, deve estar fechada, pois contém conteúdo. Se você acabou de criar sua própria tag, o analisador não tem idéia se deve esperar que a tag seja fechada ou não.

A razão pela qual alguns elementos devem ser fechados e outros não é proveniente da herança SGML, descrita nesta publicação no blog: http://www.colorglare.com/2014/02/03/to-close-or-not- to-close.html

Pete
fonte
2

É uma questão de definição. Se você estiver usando XHTML, que é XML puro, portanto totalmente definido, poderá usar seu próprio espaço para nome, aqui, por exemplo, através de um prefixo q::

<q:hero-img>
    <img src="http://whatever.com/this.jpg">
</q:hero-img>

Se você usasse XML para converter para (X) HTML, seria totalmente livre para gerar a partir de seu HTML real "HTML" de tag livre <div class="hero-img">.


Em algumas tags, um atributo de espaço para nome com seu próprio URL (fictício):

xmlns:q="http://..."
Joop Eggen
fonte
1
+1 para a solução simples. Ele nem precisa incluir um prefixo de namespace e pode apenas declarar um NS padrão para o documento geral e fornecer um XSLT para transformá-lo em (X) HTML.
DougM
1
O espaço para nome XML não é definido pelo prefixo, mas pelo valor da declaração xmlns desse prefixo. qAqui está um prefixo totalmente sem sentido (e é XML inválido), a menos que você tenha declarado os xmlns em algum lugar do documento. Você também pode redefinir o mesmo espaço para nome com prefixos diferentes ou definir o espaço para nome padrão para uma determinada seção do documento e, desde que os valores xmlns sejam iguais, esses prefixos diferentes serão tratados da mesma forma ao aplicar CSS ou no DOM.
Lie Ryan
@LieRyan um bom ponto. Eu deveria ter mencionado isso. Assumiu que o fato era conhecido. Adicionado
Joop Eggen
0

Um dos principais elementos do HTML é o fato de ter elementos de tag predefinidos. É por isso.

A classe div = é uma maneira de contornar essa "limitação".

E é por isso que você não vê essas construções "implícitas".

Pieter B
fonte
Diga a todos os engenheiros do Google que definem as novas especificações dos componentes da Web ... Entendo o que você quer dizer, mas no final dos próximos anos haverá uma explosão de elementos gerados pelo desenvolvedor, independentemente. Minha ideia é apenas mais amigável. Ponto tomado embora.
Jordan Davis.
0

O objetivo de um elemento div é a estrutura sozinha. Permite agrupar elementos sob um elemento comum. Não tem nada a ver com espaço em branco, velocidade, renderização, semântica ou qualquer outra coisa. Ele ajuda você com CSS em termos de estilo e javascript em termos de seletores. Se você o alterar para qualquer outro elemento, alterará o objetivo.

Criar seu próprio elemento nomeado, como você mostra, tem um problema, pois os mecanismos de pesquisa e outras ferramentas não saberiam qual era o significado dos seus elementos. O que é um "herói-img" e como ele é diferente da minha "imagem-herói" e como minha API deve lidar com isso quando visito sua página? Como um navegador deve lidar com esse elemento? É nível de bloco ou em linha? Muitas perguntas.

Roubar
fonte
0

Geralmente, as tags div são úteis para aplicar divisão ou seção em uma página da web. Você pode usar uma tag div como um contêiner no qual outros elementos podem ser aplicados. Também ajudará na aplicação de CSS e de alguns scripts em um elemento específico.

Ishan Shah
fonte