Minicursos - HTML

Div e Span


Vamos falar agora sobre duas tags bastante importantes e, ao mesmo tempo, confusas. Se você pesquisar em qualquer buscador sobre suas funções, encontrará informações muito divergentes ou vagas. E toda essa incerteza se dá pelo fato de que ambas, sozinhas, não têm impacto visual algum nas páginas, ou seja, elas não alteram em nada o layout! Mas, se elas não fazem nada que possa ser percebido na página, por qual motivo são tão importantes? Bem, elas não fazem nada sozinhas. Na verdade elas agrupam outros códigos HTML e, a partir desse agrupamento, linguagens de estilos podem atuar, então fica fácil notar mudanças no visual das páginas.

Se você era um iniciante em HTML e chegou até aqui acompanhando todas as páginas anteriores, já entende toda a estrutura básica dessa linguagem e já é capaz de criar suas páginas. No entanto também já deve ter notado que o HTML estrutura o documento, mas faz apenas isso. Em outras palavras, ele define o que é um parágrafo, uma tabela, uma lista, mas não aplica cores*, define fontes** e não permite posicionar com precisão essas informações na tela. Para isso é preciso uma linguagem que aplique estilos às páginas e é aí que entra a CSS. Você pode conhecer e aprender sobre CSS em seu minicurso, mas para que não tenha que interromper a sequência do HTML, vou resumir um pouco da sua utilidade.

HTML e CSS são parceiros inseparáveis em qualquer site atual. Suas funções se completam perfeitamente. Enquanto o HTML vai demarcando o que é um parágrafo, uma tabela, uma linha horizontal, uma lista e estruturas desse tipo, o CSS vem aplicando estilos a esses componentes, definindo suas cores, tamanho de fontes, posições precisas de textos, imagens e vídeos, ajustando as cores dos links, enfim, de uma forma muito simples, pense que o HTML cria enquanto o CSS dá os retoques finais, melhorando a aparência da página.

Mas, para que a CSS saiba onde atuar é preciso que o código HTML esteja sinalizado e aí entram essas duas importantes tags, que são a <div> e a <span> sempre seguidas de seus pares de encerramento.

Diferenças entre Div e Span

A tag <div> é usada para demarcar um bloco maior de código, contendo várias tags HTML ou mesmo uma única tag, mas de tamanho grande.

Já a tag <span> é para trechos mais pontuais, menores, dentro de um parágrafo ou uma linha.

Imagine que você tenha um menu composto por um logotipo e vários links, e queira prepará-lo para receber regras CSS posteriormente, como o exemplo abaixo:

<img src="logotipo.jpg" alt="Logotipo da Empresa"/>
<a href="link1.html"> Link 1 </a>
<a href="link2.html"> Link 2 </a>
<a href="link3.html"> Link 3 </a>
<a href="link4.html"> Link 4 </a>
<a href="link5.html"> Link 5 </a>

Neste caso a tag mais indicada é a <div> e seu par </div>, mantendo a estrutura da seguinte forma:

<div id=”menu_site”">
<img src="logotipo.jpg" alt="Logotipo da Empresa"/">
<a href="link1.html"> Link 1 </a>
<a href="link2.html"> Link 2 </a>
<a href="link3.html"> Link 3 </a>
<a href="link4.html"> Link 4 </a>
<a href="link5.html"> Link 5 </a>
</div">

Criamos um bloco de código entre as tags <div> e </div> e, a essa demarcação chamamos de “menu_site” através do atributo “id” dentro da tag de abertura. Agora, se quisermos criar uma regra utilizando CSS e a aplicarmos a esse menu, ficou fácil, pois ele está identificado e demarcado pela tag <div>.

Mas, e se quisermos aplicar alguma regra, como uma cor de texto diferente, por exemplo, mas apenas a uma palavra de uma frase, visando destaca-la? Bem, nesse caso a tag mais indicada é a <span>, pois estamos falando de um trecho menor de código. Outro motivo para a escolha dela é que seria uma aplicação linear (inline) e não envolvendo um código que se estende por várias linhas.

Tomemos uma frase de exemplo:

"A simplicidade é o máximo da sofisticação." John Sculley

Se quisermos destacar o autor com uma regra chamada “destaque”, a forma correta de fazê-lo seria:

<p> "A simplicidade é o máximo da sofisticação." <span id=”destaque”> John Sculley < /span></p>

Percebam que as tags <span> e </span> estão apenas em torno do nome do autor, que é o local onde desejamos aplicar a regra.
Outro ponto importante a se destacar como diferenças entre estas duas tags é que a div gera uma quebra de linha, enquanto a span não. Vou dar um exemplo prático criando uma página com um trecho do Soneto de Fidelidade, de Vinícius de Moraes. O código dela será:

<pre>
De tudo ao meu amor serei atento
Antes, e com tal zelo, e sempre, e tanto
Que mesmo em face do maior encanto
Dele se encante mais meu pensamento.
</pre>

Aqui está ela no navegador:

Tags HTML <div> <span>

Vamos imaginar que queiramos destacar a palavra zelo com uma classe CSS chamada “destaque”. A maneira correta de fazer isso é com a tag <span>, pois se trata de algo pontual, que vai começar e terminar na mesma linha, portanto nosso código ficará:

<pre>
De tudo ao meu amor serei atento
Antes, e com tal <span class=”destaque”> zelo, </span> e sempre, e tanto
Que mesmo em face do maior encanto
Dele se encante mais meu pensamento.
</pre>

Vejamos como ficou nossa página:

Tags HTML <div> <span>

Ficou perfeita. Claro que eu tive que criar uma regra CSS chamada destaque, cuja função é tornar o texto vermelho e em negrito, mas não se preocupe com isso agora. Apenas perceba a forma como a delimitação do trecho do poema foi feita através da tag <span> e como a página foi exibida. Agora vejamos como ela ficaria se no lugar de <span> tivéssemos usado a <div>, com o seguinte código:

<pre>
De tudo ao meu amor serei atento
Antes, e com tal <div class=”destaque”> zelo </div>, e sempre, e tanto
Que mesmo em face do maior encanto
Dele se encante mais meu pensamento.
</pre>

Agora vejamos como ficará no navegador:

Tags HTML <div> <span>

Vejam que horror! Nossa página ganhou uma quebra de linha no exato local da tag <div>, o que desestruturou por completo o poema. Então, como regra básica, lembrem sempre que o <div> é usado para grandes blocos de código, por isso a quebra de linha não é um problema, mas a <span> é usada para trechos dentro de uma mesma linha, portanto não pode e nem deve haver quebra. É simples!

* A tag <font color>, que é capaz de inserir cores aos textos a partir do código HTML, ainda é aceita pelos navegadores, mas já está em desuso. Conforme citado, atributos como cor são definidos em linguagens de estilo e não mais junto da estrutura da página.

** Há alguns anos as fontes podiam ser escolhidas através da tag <font face>, mas assim como a <font color>, já está em desuso e esse cargo agora é de responsabilidade da linguagem de estilo. Os navegadores também a aceitam, mas as boas práticas de construção de páginas determinam que o HTML deve apenas estruturar o documento. Aplicar características é papel de linguagens como a CSS.



Notícias - Games

Atari VCS é finalmente lançado e surpreende

O Atari VCS foi lançado recentemente e trouxe suporte a praticamente todos os serviços de streaming de jogos já disponíveis. A única exceção foi por conta do Playstation Now, cujo suporte nativo não é oferecido, mas ele pode ser acessado através do modo PC do VCS, já que o console possui Googl...

Ler Notícia Completa

The King of Fighters XV já tem data para chegar

A SNK finalmente definiu uma data para lançamento do tão esperando The King Of Fighters XV. Segundo comunicado recente, o game de luta deve chegar em 17 de fevereiro de 2022 para os consoles Playstation 4, Playstation 5, Xbox Series X e S, além de PCs. O título contará com 39 personagens e mante...

Ler Notícia Completa

Phil Spencer aprovou o Steam Deck rodando o xCloud

O chefe da divisão XBOX e vice presidente da divisão de jogos da Microsoft, Phil Spencer, recebeu um Steam Deck e passou uma semana testando o dispositivo da Valve. Nas palavras dele: “trata-se de um dispositivo muito legal. É interessante ter os jogos disponíveis em qualquer lu...

Ler Notícia Completa

Conheça o Playstation 2 portátil criado por um brasileiro

Claudio Adriano decidiu criar uma versão portátil do console Playstation 2, da Sony. Inspirado no Nintendo Switch, o console ficou pronto depois de 2 anos de trabalho e algumas interessantes adaptações. Partindo de uma placa-mãe de um PS2 Slim, Claudio fez os encaixes necessários para que a pla...

Ler Notícia Completa

Playstation 4 já vendeu mais de 116 milhões de unidades

Embora a nova geração de consoles já tenha chegado definitivamente, o PS4 ainda vem registrando bons números e ultrapassou a marca dos 116 milhões de aparelhos vendidos ao redor do mundo. Possivelmente a confirmação da Sony de que títulos bastante esperados, como o novo God Of War e Horizon Forb...

Ler Notícia Completa

Nintendo Switch supera Xbox 360 e PS3 em número de unidades vendidas

Em números divulgados nesta quinta-feira (05) a Nintendo confirmou a quantia de 89 milhões de unidades vendidas do seu console Switch, deixando para trás o Playstation 3, com 87 milhões de unidades e o Xbox 360, com 80 milhões. O próximo console na lista para ser ultrapassado é o Wii, também da...

Ler Notícia Completa

Far Cry 5 está de graça para todas as plataformas por tempo limitado

A Ubisoft liberou o game Far Cry 5 entre os dias 5 e 9 de agosto para todas as plataformas (PS4, PS5, Xbox One, Series X e Series S, Google Stadia e PC). A notícia é ótima, claro, mas ao contrário do que normalmente acontece, o jogo só poderá ser jogado gratuitamente até o dia 9 de agos...

Ler Notícia Completa
Ajude o Contém Bits com um cafezinho!

Se você gostou do artigo, se ele lhe foi útil de alguma maneira e você quiser ajudar o Contém Bits, saiba que é simples, fácil e rápido. Basta clicar na imagem do PayPal (ou no cafezinho) e seguir as instruções, em ambiente seguro e com o respaldo do Paypal. Eu agradeço muito! :)


Você gostará destes vídeos!