Diferença entre elementos inline e de bloco em HTML

Postado por: Pedro Rogério 5 de novembro de 2008

Entender como os elementos HTML são renderizados na página é essencial para aqueles que estão embarcando agora no mundo do desenvolvimento web. Já vi muitas pessoas passarem por problemas por não entenderem isso, aliás, muitos programadores, no decorrer do desenvolvimento acabam tendo problemas com o HTML que foi desenvolvido pois ao tentarem efetuar alguma alteração acabam utilizando tags que não são necessárias, e aí os problemas começam. Então, para evitarmos esses problemas vou mostrar aqui que os elementos HTML são renderizados de 3 formas diferentes: Tags a níveis de bloco, Inline e Invisíveis.

Elementos a nível de bloco

Imagem ilustrando elementos de bloco

Os elementos de bloco em HTML utilizam toda a sua largura disponível e criam uma linha invisível antes e depois de si próprio. Os elementos a nível de bloco são os seguintes:

address, blockquote, center, dir, div, dl, dt, dd, frameset, fieldset, form, h1, h2, h3, h4, h5, h6, hr, menu, noframes, noscript, ol, ul, li, p, pre, table, tbody, thead, tfoot, tr, td, th

Eu sou um elemento a nível de bloco

Elementos Inline

Imagem ilustrando elementos inline

Os elementos HTML a nível inline são aqueles que ocupam somente sua largura necessária e não criam linhas antes e depois de si. Os elementos a nível inline são os seguintes:

a, abbr, acronym, applet, b, basefont, bdo, big, br, button, cite, code, del, dfn, em, font, i, iframe, img, input, ins, kbd, label, map, object, q, s, samp, select, small, span, strike, strong, sub, sup, textarea, tt, u, var

Eu sou um elemento a nível inline, Eu sou mais um elemento a nível inline

Elementos Invisíveis

São aqueles elementos que existem na página, mas não são mostrados ao usuário:

base, isindex, link, meta, script, style, title

Uma dica é que em CSS você pode tranformar um elemento de bloco em inline ou vice-versa através da propriedade CSS display.

Categorias: CSS, XHTML Tags: , ,

Comentários
5 de novembro de 2008
# 1

Ótimo post, eu por ex. que trabalho mais com programação web é sempre bom estar de olho nesses “detalhes”.

Postado por Neto
5 de novembro de 2008
# 2

Boa Dica! Muito desenvolvedor ai não sabe a diferença e faz cada porcaria no código. Pensa que para um site está dentro dos padrões web basta ser validado no validator.w3.org e pronto… não da importância nenhuma na semântica do código.

Postado por Igor Pimentel
6 de novembro de 2008
# 3

Muito bom o post, como diz o Neto ai no comentário acima, é sempre bom ta de olho nesses detalhes.

um abraço t+.

Postado por rafael veloso
6 de novembro de 2008
# 4

Bom Post, só acho que faltou alguns exemplos… pro pessoal entender melhor
Abraços!

Postado por Rafael Sanchez
6 de novembro de 2008
# 5

Achava que só ocupava a largura total depois de simesmo qdo se inseri a para este a propridade display:block;

Postado por Mateus
6 de novembro de 2008
# 6

Nossa, demorei muito tempo para aprender isso. Até hoje ainda me confundo com algumas tags. Agora tenho um ótimo link de referência. Del.icio.us nesse post rsrs! Valeu Pedro!

Postado por LeoCaseiro
6 de novembro de 2008
# 7

@Rafael,

Estou pensando em fazer o seguinte, criar posts referentes ao uso de cada tag, para tentar forma uma referência completa sobre HTML. Quando sobrar um tempo vou começar a pensar nisso.

Postado por Pedro Rogério
17 de novembro de 2008
# 8

Muito boa a explicação. !

vlw !

Postado por Wellington
Quer comentar?

(Obrigatório)

(Obrigatório)