Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

<div> no lugar de <span>

Modificando o <h4> da Seção dos planos decidi colocar uma <div> no lugar do <span>, depois que li a definição da W3s de span:

"The <span> tag is much like the <div> element, but <div> is a block-level element and <span> is an inline element."

Traduzindo:

"A tag <span> é muito parecida com o elemento <div>, mas <di> é um elemento de nível bloco, e <span> é um elemento inline"

É uma boa prática, ou existe alguma questão sobre colocar a <div> ali?

Imagem com o código citado no texto

2 respostas
solução!

Olá Guilherme, tudo bem?

Neste caso, o mais indicado seria o<span> mesmo e a explicação do porquê disso é justamente a definição que você encontrou no W3Schools.

A <div> e a<span> se assemelham pois são dois elementos que não são semânticos. Entretanto, a <div> é utilizada para blocos e o <span> para linhas.

No código da foto, é possível perceber que a <div class="secaoPlanos-plano">, contém elementos dentro dela, isso é uma característica de um bloco, compreender um ou mais elementos.

Sendo assim, a <span> se comporta da mesma forma que o elemento <a>, por exemplo, que é um elemento inline, composto apenas dele mesmo.

Espero ter ajudado, qualquer dúvida fique a vontade para perguntar. Bons estudos!

Apenas um adendo Guilherme ao texto da Beatriz. li, h3 (bem como outros headings) não são elementos inline. As li são atualmentedisplay: list-item;, mas pode considerar de nível bloco também para não se confundir.

Elementos block podem conter divs, elementos inline é melhor que contenham span se preciso.

Como a Beatriz disse ambos div e block são elementos que não tem valor semântico, ou seja não tem significado, mas por padrão tem esses displays: block quando div e inline para span.

Block e inline tem características importantes que se não souber podem te dar mais trabalho na hora do desenvolvimento, fazendo vc escrever mais. Em alguns casos, quando não são divs e spans terá problemas semâniticos (significado de cada coisa, em outra palavras será penalisado com uma má colocação no Google).

Entendo que ela adicionou os cabeçalhos (headings) como inline, pois também faz muito sentido utilizar span dentro deles por envolverem textos, bem como parágrafos. Mas se inspecionar eles sem nenhum css, ou mesmo checar o CSS nativo (user agent) verá que são de nível bloco.

Para aprender mais sobre Box Model: http://pt-br.learnlayout.com/

Caso queira saber quais são os elementos inline: https://developer.mozilla.org/pt-BR/docs/Web/HTML/Inline_elements

E para elementos de nível bloco: https://developer.mozilla.org/pt-BR/docs/Web/HTML/Block-level_elements