Para um bom entendimento da renderização dos elementos HTML é necessário o entendimento de elementos níveis de bloco, inline e os invisíveis. Conhecendo bem esses conceitos, evitamos o uso inadequado de elementos HTML e marcação adicional.
Elementos nível de bloco
Elementos nível de bloco ocupam toda largura disponível na página e criam uma linha invisível antes e depois de si próprio. Elementos nível de bloco sempre começam em nova linha.
Um elemento que venha antes ou depois de um elemento nível de bloco é renderizado acima ou abaixo do elemento nível de bloco, nunca ao lado. Elementos nível de bloco podem conter elementos inline e outros elementos nível de bloco.
Exemplos de tags nível de bloco:
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
Elementos inline
Ocupa somente a largura do elemento, largura necessária. Elementos “inline” poderão apenas conter informações e outros elementos “inline”, jamais poderão conter elementos nível de bloco.
Diferente dos elementos nível de bloco os inline não começam em nova linha.
Exemplos de tags inlines:
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
Elementos invisíveis
São definidos como tags invisíveis porque estão escritas no documento mas o usuário não as vê.
Exemplos de elementos invisíveis:
meta, link, style, title
Usando display:block; e display:inline; podemos trocar um elemento para nível de bloco e inline respectivamente.