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



Algumas notícias

O que acontece com o cérebro no exato momento em que morremos

O que passa em nossa cabeça no momento da morte? Não se sabe exatamente e, embora os cientistas tenham alguma resposta, a resposta continua sendo um grande mistério. Além de difícil solução, tentar respondê-la pode criar implicações éticas. No entanto, uma equipe de cientistas da Universidade...

Ler Notícia Completa

Operada e devolvida ao útero, menina que nasceu duas vezes hoje 'acorda sorrindo toda manhã'

Um bebê pode nascer duas vezes? Não é o caso da absoluta maioria das crianças, mas foi assim para a pequena Lynlee Boemer. Em outubro de 2015, sua mãe, Margaret Boemer, descobriu que estava grávida de gêmeos. Ela sofreu um aborto espontâneo, mas um dos bebês sobreviveu. Com dez semanas de ges...

Ler Notícia Completa

Médicos dizem estar perto de chegar a exame de sangue para todos os tipos de câncer

Cientistas dizem que estão mais perto de criar um exame de sangue universal, capaz de identificar todos os tipos de câncer. Estudo conduzido com 1.005 pacientes por uma equipe da Universidade Johns Hopkins, dos Estados Unidos, testou um método que detecta oito tipos de proteínas e 16 mutações ge...

Ler Notícia Completa

Formato JPEG está com os dias contados

Há quantos anos você ouve falar em arquivos JPG? O formato já era utilizado nos primórdios da web comercial nos anos 1990, vivendo há mais de 20 anos como o principal método de compressão de imagens do público. No que depender de Google, Mozilla e outras empresas, isso pode mudar dentro de algum...

Ler Notícia Completa

EUA aprovam 'droga viva', 1ª terapia contra câncer que reestrutura sistema imunológico do paciente

Os Estados Unidos aprovaram o primeiro tratamento que reestrutura o sistema imunológico do paciente para atacar o câncer. A agência reguladora de medicamentos do país - a FDA - diz que a decisão foi um momento "histórico" e que a medicina agora "entra em uma nova fronteira". A companhia Novar...

Ler Notícia Completa

Cientistas norte-americanos criaram anticorpo capaz de atacar 99% das variações de HIV

Um grupo formado por pesquisadores do Instituto Nacional de Saúde (NIH), dos Estados Unidos, e da empresa farmacêutica Sanofi criaram em laboratório anticorpos superdesenvolvidos capazes de atacar 99% das cepas de HIV. O feito é ainda mais significativo por ser capaz até mesmo de prevenir a infec...

Ler Notícia Completa