Tutorial Intermediário de HTML: Span e Div

A principal função do HTML é dar significado ao conteúdo. Enquanto a maioria das tags HTML aplicam algum significado (p quer dizer parágrafo, h1 quer dizer cabeçalho, etc.), as tags span e div não têm significado algum. Isso pode parecer quase tão útil quanto um martelo sem cabeça, mas essas tags são usadas extensivamente com CSS.

Elas são usadas para agrupar um bloco de HTML e aplicar alguma informação a esse bloco, na maioria das vezes usando os atributos class e id para associar o elemento com um seletor de classe ou id CSS.

id é um atributo que identifica um elemento, e é único (dois elementos não podem ter o mesmo id). class identifica um grupo de elementos, e vários elementos podem ter a mesma class. No Tutorial Intermediário de CSS class e id são explicados mais detalhadamente.

A diferença entre span e div é que span é um elemento inline e geralmente é usado para um pequeno bloco de HTML, e div é um elemento de bloco (o que basicamente é equivalente a ter uma quebra de linha antes e depois do elemento) e é usado para agrupar blocos maiores de código (geralmente divisões da página como menu, cabeçalho, etc.). Este artigo explica melhor as diferenças entre elementos inline e de bloco.

<div id="tesouras">
	<p>Isso é <strong><span class="papel">louco!</span></strong></p>
</div>

div e principalmente span não devem ser usados com muita frequência. Sempre que houver uma outra alternativa que faça mais sentido, ela deve ser usada. Por exemplo, se você quer enfatizar a palavra “louco!” e aplicar nela a classe “papel”, o código pode ficar assim:

<div id="tesouras">
	<p>Isso é <strong class="papel">louco!</strong></p>
</div>

Páginas Relacionadas

• Próxima Página: Tags Meta
• Página Anterior: Introdução
• Seletores Classe e ID (Tutorial Intermediário de CSS)

Referência

• span
• div

BlogBlogs Tags: tutorial, minicurso, html

Esse material é uma adaptação do HTML Intermediate Tutorial, de autoria de Patrick Griffiths. Todos os direitos pertencem ao autor.