Modelos de conteúdo

Dentre todas as categorias de modelos de conteúdo, existem dois tipos de elementos: elementos de linha e de bloco.

Veremos aqui:

Elementos em linha
Span
Elementos em Bloco
Div
Premissas de Bloco e Linha
Alternativas do HTML5

Elementos em linha

Os elementos de linha marcam, na sua maioria das vezes, texto. Alguns exemplos:

<a> Define um link ou âncora
<strong> Define um destaque (nêgrito)
<em> Define uma ênfase (itálico)
<img> Define uma imagem
<input> Define um campo de entrada de dados (formulário)
<abbr> Define uma abreviação (sigla)
<span> Define um agrupamento de texto em linha

Span

Devemos utilizar a span quando queremos modificar um elemento no meio de uma linha de texto. Aplicar um estilo específico, por exemplo (negrito + cor a um elemento).

O texto segue normal e, de repente, fica vermelho.

Abaixo o exemplo em HTML (com CSS embutido).

<p> O texto segue normal e, de repente, fica <span style=“color:red”>vermelho.</span></p>

Elementos em bloco

Os elementos de blocos são como caixas, que dividem o conteúdo nas seções do layout.

<h1> Define um título nível 1
<p> Define um parágrafo
<ol> Define uma lista ordenada
<ul> Define uma lista não ordenada
<li> Define um item de lista
<table> Define uma tabela
<div> Define uma divisão ou seção do documento

Div

Devemos utilizar a div quando queremos dividir e/ou modificar um grupo de elementos de bloco numa parte do documento.

Exemplos: Fazer um texto “flutuar” à esquerda ou a grupar elementos similares (links)

Premissas: bloco e linha

Abaixo segue algumas premissas para relembrar e conhecer:

Os elementos de linha podem conter outros elementos de linha, dependendo da categoria que ele se encontra. Por exemplo: o elemento a não pode conter o elemento label.
Os elementos de linha nunca podem conter elementos de bloco.
Elementos de bloco sempre podem conter elementos de linha.
Elementos de bloco podem conter elementos de bloco, dependendo da categoria que ele se encontra. Por exemplo, um parágrafo não pode conter um DIV. Mas o contrário é possível.

Alternativas do HTML5

No lugar das genéricas<divs> do HTML4, o HTML5 favorece a web semântica por possuir tags de organização dos conteúdos mais descritivas.

<header> para cabeçalhos da página
<nav> para links de navegação (menu)
<article> para artigos, textos e postagens
<section> para seções do conteúdo
<aside> para textos secundários
<footer> para rodapés

Fundamentos da Web

Introdução ao HTML e CSS

Divs e Seções HTML