O que é o HTML e suas tags? Parte 3: elementos block-level e como utilizá-los
6 minutos de leitura
Esse artigo compõe uma série de cinco artigos sobre o que é HTML e suas tags:
- O que é o HTML e suas tags: estrutura básica
- O que é o HTML e suas tags: elementos inline
- O que é o HTML e suas tags: elementos block-level
- O que é o HTML e suas tags: elementos de um formulário
- O que é o HTML e suas tags: atributos dos elementos
No artigo anterior, vimos o que são os elementos inline e como eles se comportam na página. Agora, vamos avançar para outra categoria importante do HTML: os elementos block-level, entendendo o que eles são, como funcionam e quais tags fazem parte desse grupo.
O que são Elementos block-level no HTML?
Os elementos block-level, ou elementos em nível de bloco, ocupam toda a largura disponível do elemento pai por padrão. Além disso, eles iniciam em uma nova linha, o que faz com que cada elemento desse tipo seja exibido abaixo do anterior.
<header> - Para que serve a tag header no HTML?
A tag <header> representa a seção de cabeçalho de uma página ou de um bloco de conteúdo. Ela é bem usada para reunir elementos introdutórios ou de identificação, como logotipo, título, menu de navegação, campo de busca ou outras informações que aparecem no topo da interface ou de uma seção específica.
Em uma página, o <header> ajuda a apresentar o site para a pessoa usuária, funcionando como uma área de identificação visual e organizacional do conteúdo.
<main> - Para que serve a tag main no HTML?
A tag <main> representa o conteúdo principal da página, ou seja, a parte central do documento que reúne as informações mais importantes daquele conteúdo.
Ela contém o assunto principal da página, excluindo elementos repetidos como cabeçalhos, rodapés, menus de navegação e barras laterais.
<footer> - Para que serve a tag footer no HTML?
A tag <footer> representa o rodapé de uma página ou de uma seção do documento.
Ela traz informações complementares e de encerramento, como dados de contato, links para redes sociais, endereço, avisos legais, direitos autorais ou outros conteúdos institucionais relacionados à página ou ao bloco em que está inserida.
<section> - Para que serve a tag section no HTML?
A tag <section> representa uma seção temática do documento, ou seja, um agrupamento de conteúdos relacionados dentro da página. Ela é usada para organizar o conteúdo em partes com um mesmo assunto ou propósito, ajudando a estruturar melhor a informação.
Dentro do conteúdo principal, por exemplo, uma <section> pode ser utilizada para separar áreas como apresentação, serviços, depoimentos, perguntas frequentes ou qualquer outro bloco de conteúdo que faça sentido como uma divisão temática da página.
<article> - Para que server a tag article no HTML?
A tag <article> indica um conteúdo independente e autocontido dentro da página, ou seja, um bloco que faz sentido por si só e pode ser lido, compartilhado ou reutilizado separadamente do restante do documento.
Ela é bastante usada em blogs, portais de notícia, fóruns e páginas de conteúdo para marcar textos como posts, matérias, publicações ou comentários. Em muitos casos, o <article> abriga o conteúdo principal de texto da página, especialmente quando esse conteúdo é uma publicação completa.
<aside> - Para que serve a tag aside no HTML?
A tag <aside> sinaliza um conteúdo complementar ou relacionado ao conteúdo principal da página. Ela é usada para incluir informações de apoio que fazem referência ao tema tratado, mas que não fazem parte do fluxo principal de leitura.
Entre os usos mais comuns do <aside>, estão definições, explicações extras, avisos, links relacionados, biografia do autor, curiosidades ou qualquer outro conteúdo secundário que ajude a enriquecer a compreensão do assunto.
<nav> - Para que serve a tag nav no HTML?
A tag <nav> representa uma seção de navegação da página. Ela é usada para agrupar links que ajudam o usuário a se deslocar entre páginas ou seções do site, como menus principais, índices, navegação lateral ou conjuntos de links importantes.
É comum que, dentro do <nav>, sejam inseridas listas e links criados com a tag <a>, formando a estrutura de navegação da interface.
<div> - Para que serve a tag div no HTML?
A tag <div> é um contêiner genérico usado para agrupar elementos e organizar a estrutura da página. Diferentemente de tags como <header>, <section> ou <article>, ela não possui valor semântico próprio, ou seja, não descreve o significado do conteúdo que está dentro dela.
Por isso, a <div> é bem usada quando o objetivo é apenas criar divisões para estruturar o layout, aplicar estilos com CSS ou facilitar a manipulação de elementos com JavaScript, sem atribuir um significado específico àquele bloco de conteúdo.
<p> - Para que serve a tag p no HTML?
A tag <p> representa um parágrafo de texto. Ela é usada para marcar blocos de conteúdo textual dentro da página, organizando a leitura e separando ideias em unidades menores e mais fáceis de compreender.
<h1>, <h2><h6>
A família de cabeçalhos ou headings, define os títulos da página. Esse grupo de elementos possuem um alto valor semântico e uma organização hierárquica, indo de `<h1>` até `<h6>`, sendo o h1 de maior valor semântico e o h6 de menor valor semântico.
<hr> - Para que serve a tag hr no HTML?
A tag <hr> representa uma quebra temática entre blocos de conteúdo. Visualmente, ela é exibida como uma linha horizontal, mas seu significado semântico vai além da aparência: ela indica uma mudança de assunto ou uma separação entre seções relacionadas dentro da página.
<video> - Para que serve a tag video no HTML?
A tag <video> é usada para inserir vídeos em uma página HTML. Com ela, podemos incorporar arquivos de vídeo diretamente no navegador e configurar sua exibição por meio de atributos que controlam tamanho, reprodução e origem do arquivo.
Entre os atributos mais comuns estão src, que define o caminho ou a URL do vídeo; controls, que exibe os controles de reprodução para o usuário; width, que informa a largura do vídeo; e height, que define sua altura. Caso width e height não sejam especificados, o navegador utiliza as dimensões originais do arquivo de vídeo.
<video src="video/exemplo.mp4" controls></video> Também é possível utilizar a tag <source> dentro de <video> para oferecer mais de um formato e aumentar a compatibilidade entre navegadores:
<video controls width="640" height="360">
<source src="video/exemplo.mp4" type="video/mp4">
<source src="video/exemplo.webm" type="video/webm">Seu navegador não suporta o elemento de vídeo.
</video> Veja o resultado.
Continua…
Neste artigo, você conheceu o que são elementos block-level e alguns exemplos de uso. No próximo capítulo, vamos aprender quais elementos podem ser utilizados para compor um formulário."
Avalie este artigo
Autor(a)
Beatriz Moura
Estudante de Analise e Desenvolvimento de Sistemas, troquei a área da saúde e mergulhei em programação! Apaixonada por desenvolvimento Front-end e entusiasta de UX/UI Design. Descobri a paixão por ensinar sendo monitora durante uma outra graduação de ensino, onde também era presidente de Liga Acadêmica e Diretora de Mídia no Diretório Acadêmico. Atualmente sou Instrutora e Desenvolvedora de Software na Alura e já fiz parte do Scuba Team de Front-end.
Inscreva-se em nossa Newsletter
Fique por dentro de conteúdos, insights e oportunidades do universo tech. Receba novidades e lançamentos direto no seu e-mail.