Diferença entre elementos inline e de bloco em HTML
Postado por: Pedro Rogério emEntender 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
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
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.
Sobre Pedro Rogério
Pedro Rogério é desenvolvedor web por paixão, não saberia fazer melhor outra coisa. Além de escrever para o CSS no Lanche também escreve para o Pinceladas da Web, blog com assuntos gerais sobre desenvolvimento web.
Ótimo post, eu por ex. que trabalho mais com programação web é sempre bom estar de olho nesses “detalhes”.
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.
Muito bom o post, como diz o Neto ai no comentário acima, é sempre bom ta de olho nesses detalhes.
um abraço t+.
Bom Post, só acho que faltou alguns exemplos… pro pessoal entender melhor
Abraços!
Achava que só ocupava a largura total depois de simesmo qdo se inseri a para este a propridade display:block;
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!
@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.
Muito boa a explicação. !
vlw !
Gostei das imagens
Tb axo q faltou mais exemplos. Principalmente deixar explícito q mesmo se colocar um block element dentro dum p por exemplo, ele cai pra linha seguinte, preenche ela toda e depois o texto continua na próxima.