Tutorial Intermediário de HTML: Span e Div

9 03 2008

Código HTML com as tahs <div> e <span>

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

Referência

BlogBlogs Tags: , ,

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

Anúncios

Ações

Information

11 responses

20 07 2008
Tutorial Avançado de CSS - Layout da Página « Codando

[…] Tags Span e Div […]

20 07 2008
16 04 2009
Bombe157

muito legal..estou acopanhando desde o começo….e concerteza estarei logo-logo obtendo melhores desempenho. estudei html no começo da facul. e depois so Actionscript…..mas e massa ….gostei pra caranba…sim deixo um abraço pra meu pço Jstevevai…(junior);….ele tambem esta acopanhando esse tutorial

17 08 2009
jefferson Moura

LOSER!

vc não usa div, então tu usa o que? td e tr ? …

god mio!

11 02 2010
Raiza

qual é a função da tag ?
Por favor resposta direta
qua é a função dela realmente
Obrigada
RAIZA

21 12 2010
Letícia

Nossa…gostei muito da sua tradução deste site:
http://htmldog.com/guides/htmlintermediate/spandiv/

Pô…só não gostei que são os mesmo exemplos!!!!!!!!!!!!!!!!!!!

21 12 2010
Letícia

*mesmos

rs

10 01 2011
Gabi

É, também queria saber a função das tags realmente. Não estou entendendo direito D=

10 01 2011
Gabi

aah, procurei no google e entendi \o\

29 12 2011
Feira Lider

A tag span não é usada para impedir a indexão de um determinado texto em site de busca.

26 08 2015
Bul

Tipo SPAN é quase mesma coisa que DIV , porém ela é usada para coisas pequenas.
Exemplo se você so quer editar sei la Uma unica frase no css , em vez de abrir uma DIV você pode usar o SPAN .
Sabe como é essas linguagens 50 maneiras de fazer a mesma coisa.

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s




%d blogueiros gostam disto: