Seções e Artigos
Parte da seção Fundamentals do Journey de HTML da Coddy — lição 28 de 60.
No HTML, as tags <section> e <article> são usadas para organizar o conteúdo em partes lógicas.
A tag <section> define uma seção em um documento, como capítulos, cabeçalhos, rodapés ou quaisquer outras seções do documento. É uma forma de agrupar conteúdos relacionados. Por exemplo, você pode usar <section> para dividir uma página em uma introdução, conteúdo e informações de contato.
Veja como você pode usar a tag <section>:
<section>
<h2>Section Heading</h2>
<p>Section content goes here.</p>
</section>A tag <article> especifica conteúdo independente e autossuficiente. Ela deve fazer sentido por si só e deve ser possível lê-la independentemente do restante do site. Exemplos de onde um elemento <article> pode ser usado: uma postagem em um fórum, uma entrada de blog, uma notícia ou um comentário.
Veja como você pode usar a tag <article>:
<article>
<h2>Article Title</h2>
<p>Article content goes here.</p>
</article>
Desafio
FácilCrie um documento HTML que use as tags <section> e <article> para estruturar uma página web. Inclua as seguintes seções:
- Uma seção
<main>para conter o conteúdo principal da página. - Dentro de
<main>, crie uma<section>com um cabeçalho (<h2>) que diga "Upcoming Events". - Dentro da
<section>, crie dois elementos<article>. - Cada
<article>deve ter um cabeçalho (<h3>) e um parágrafo (<p>) com algum texto fictício. Use "Event 1" e "Event 2" para os cabeçalhos e "Event 1 details..." e "Event 2 details..." para os parágrafos.
Folha de consulta
A tag <section> define uma seção em um documento para agrupar conteúdos relacionados:
<section>
<h2>Section Heading</h2>
<p>Section content goes here.</p>
</section>A tag <article> especifica um conteúdo independente e autossuficiente que deve fazer sentido por si só:
<article>
<h2>Article Title</h2>
<p>Article content goes here.</p>
</article>Experimente você mesmo
<!DOCTYPE html>
<html>
<body>
<!-- Escreva o código aqui -->
</body>
</html>
Teste seus conhecimentosEsta lição inclui um quiz rápido. Comece a lição para respondê-lo e acompanhar seu progresso.
Todas as lições de Fundamentals
1Fundamentos do HTML
O que é HTML?Estrutura Básica do HTMLTags e ElementosAninhamento e Fechamento de TagsComentários em HTML7Página de Perfil Pessoal
Visão Geral do ProjetoSeção de Cabeçalho
Foto de PerfilSeção Sobre MimLinks Sociais2Texto e Formatação
TítulosParágrafosQuebras de LinhaTexto em Negrito e ItálicoNegrito e Itálico NovamenteRecapitulação - Formatação8Formulários e Inputs Parte 1
Fundamentos de FormuláriosInputs de TextoAtributos de InputCampo de SenhaLabels para InputsRecapitulação - Formulário Básico11Página de Inscrição de Evento
Visão Geral do ProjetoSeção de CabeçalhoSeção de Detalhes do EventoFormulário de InscriçãoSeção de Rodapé