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!
Respostas:
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-spaces
no CSSclasses
definem várias classes para o elemento, enquanto no HTML elas definemattributes
.Explique (ou peça a um navegador para analisar) o seguinte código:
A
family
definiçã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
variables
usoreserved words
em 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">
.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?<div class="">
alguma. Então, novamente, por que definir issoz:name1
ouz/name2
é a tag HTMLclass
e não a suaid
? E o problema do espaço em branco aparece novamente aqui. Portanto, teria que serz:"name1 name2"
declarar duas classes, que praticamente se tornam a mesma coisa novamente.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
<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.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.
fonte
Seu próprio exemplo exibe uma propriedade por que os divs não são tão ridículos.
Você não fechou a
img
tag corretamente . Algumas tags, tais comoimg
,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
div
tag, 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
fonte
É 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:
: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):
fonte
q
Aqui 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.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".
fonte
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.
fonte
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.
fonte