Por que temos que usar divs?

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!

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

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.

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.

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

É 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://..."

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

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.

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.