Divs e Seções HTML

Modelos de conteúdo

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

Veremos aqui:

Elementos em linha

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

  • <a> Define um link ou âncora
  • <strong> Define um destaque (nêgrito)
  • <em> Define uma ênfase (itálico)
  • <img> Define uma imagem
  • <input> Define um campo de entrada de dados (formulário)
  • <abbr> Define uma abreviaçã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 especí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 são como caixas, que dividem o conteúdo nas seções do layout.

  • <h1> Define um título nível 1
  • <p> Define um parágrafo
  • <ol> Define uma lista ordenada
  • <ul> Define uma lista não ordenada
  • <li> Define um item de lista
  • <table> Define uma tabela
  • <div> Define uma divisão ou seçã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” à esquerda ou a grupar elementos similares (links)

page_container

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 nã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 parágrafo não pode conter um DIV. Mas o contrário é possível.

 

Alternativas do HTML5

No lugar das genéricas<divs> do HTML4, o HTML5 favorece a web semântica por possuir tags de organização dos conteúdos mais descritivas.

  • <header> para cabeçalhos da página
  • <nav> para links de navegação (menu)
  • <article> para artigos, textos e postagens
  • <section> para seções do conteúdo
  • <aside> para textos secundários
  • <footer> para rodapés

seccionando

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *