HTML: Aprendendo a usar elementos inline e block

Em HTML, a maioria dos elementos é definida como nível de bloco ou elementos em linha, block ou inline respectivamente. Os elementos de nível de bloco começam a partir de uma nova linha.

São exemplos de nível de bloco: <h1> <form> <li> <ol> <ul> <p> <pre> <table> <div>.

Elementos em linha normalmente são exibidos sem quebras de linhas, como por exemplo: <b> <a> <strong> <img> <input> <em> <span>.

O elemento <div> é um elemento de nível de bloco que é frequentemente usado como um contêiner para outros elementos HTML.

Quando usado em conjunto com algum estilo CSS, o elemento <div> pode ser usado para estilos de blocos de conteúdo:

Da mesma forma, o elemento <span> é um elemento inline que é frequentemente usado com o um contêiner para lagum texto. Quando usado em conjunto com CSS, o elemento <span> pode ser usado para estilizar partes do texto, como no exemplo seguinte:

O elemento <div> define uma seção em nível de bloco em um documento, enquanto o elemento <span> define uma seção embutida em um documento.

Outros elementos podem ser usados como elementos de nível de bloco ou elementos embutidos. Isso inclui os seguintes elementos:

  • APPLET – Applet Java incorporado
  • IFRAME – Moldura em linha
  • INS – Texto inserido
  • MAP – Mapa de imagem
  • OBJECT – Objeto incorporado
  • SCRIPT – Script em um documento HTML

Você pode inserir elementos inline dentro de elementos de bloco, como por exemplo, você pode ter vários elementos <span> dentro de um elemento <div>.

Elementos em linha não podem conter nenhum elemento de nível de bloco.

Olha… você já deve ter percebido que eu tô postando todos os dias aqui… tem C#, tem HTML, tem CSS e até SQL! Ah, quase esqueci do JavaScript! Então já sabe, se quiser continuar recebendo conteúdos novos, me segue lá no twitter (@vt_norton) e curta e compartilhe!

Vítor Norton

I don't dream, I do a lot of things. Sou desenvolvedor Windows e Web, tenho o título de Windows Insider MVP (Anteriormente Microsoft MVP: Windows Experience), tenho uma empresa (Y'APP) e uma startup (M!xer). Sou escritor, programador, artista, mágico e inventor.