Curso IT Fundamentos HTML 016_Elementos semânticos
Elementos semânticos
O HTML5 introduziu muitos elementos semânticos, cujo objetivo é melhorar a semântica da estrutura do documento, tornando-o mais legível, mantível e mais amigável tanto para mecanismos de busca quanto para desenvolvedores.
Uma estrutura de página geralmente inclui: cabeçalho, rodapé, título, navegação, conteúdo, barra lateral, etc.
Projetando layout de página usando o elemento <div>:
[!Resumo]
- Não é favorável para os desenvolvedores escreverem código. Quando você se depara com uma tela cheia de elementos
<div>, é difícil distinguir rapidamente o que eles representam.- Não é favorável para otimização de mecanismos de busca (SEO). O navegador só sabe que você usou o elemento
<div>, e o elementodivem si não tem nenhum significado, é apenas um contêiner.
Projetando layout de página usando elementos semânticos:
Usar <header> <nav> <main> <aside> <footer> para representar diferentes áreas da página, essas tags dão à página boa semântica e estrutura, facilitando tanto para desenvolvedores quanto para navegadores entenderem rapidamente o conteúdo da página.
| Elemento | Função |
|---|---|
<header> | Usado para definir a área do cabeçalho da página, geralmente incluindo logo do site, navegação principal, links de todo o site e caixa de pesquisa. |
<nav> | Usado para definir a área da seção de links de navegação da página. |
<main> | Usado para definir o conteúdo principal da página ou a parte de funcionalidade principal, esse conteúdo deve ser único na página. |
<aside> | Usado para definir o conteúdo da barra lateral da página, esse conteúdo está relacionado ao conteúdo principal, mas é opcional. |
<footer> | Usado para definir a área do rodapé da página, geralmente incluindo informações de direitos autorais, informações de contato e outras informações relevantes. |
<article> | Usado para definir artigos, documentos, páginas, aplicativos ou outras áreas de conteúdo independentes. |
<section> | Usado para definir uma seção independente genérica na página, geralmente contendo um título ou parágrafo, bloco. |
<figure> | Usado para definir conteúdo independente como imagens, gráficos, fotos, etc. |
<figcaption> | Usado para fornecer um título ou descrição para o elemento <figure>. |
Exemplo:
<!DOCTYPE html><html lang="en"><head> <title>Minha Página Web</title></head><body> <header> <h1>Minha Página Web</h1> </header>
<nav> <ul> <li><a href="#">Início</a></li> <li><a href="#">Sobre Mim</a></li> <li><a href="#">Contato</a></li> </ul> </nav>
<main> <article> <h2>Minha Apresentação</h2> <p>Meu nome é XXX, este é um exemplo de elementos semânticos.</p> </article> </main>
<aside> <h2>Links Relacionados</h2> <ul> <li><a href="#">Meu Blog</a></li> <li><a href="#">Minha Página do GitHub</a></li> </ul> </aside>
<footer> <p>Direitos autorais 2023 XXX</p> </footer></body></html>Efeito:
Este exemplo contém uma página web que usa elementos semânticos do HTML5 para descrever o significado do conteúdo da página.
- O elemento
<header>define a área do cabeçalho da página, contendo o logo do site e a navegação principal. - O elemento
<nav>define a área da seção de links de navegação da página. - O elemento
<main>define o conteúdo principal da página, contendo o artigo de minha apresentação. - O elemento
<aside>define o conteúdo da barra lateral da página, contendo links relacionados. - O elemento
<footer>define a área do rodapé da página, contendo informações de direitos autorais.
[!Resumo]
- Os mecanismos de busca podem entender melhor o conteúdo da página, melhorando a classificação da página nos resultados de pesquisa.
- Pode ajudar pessoas com deficiência a entender mais facilmente o conteúdo da página, melhorando a acessibilidade da página.
- Pode ajudar os desenvolvedores a organizar melhor a estrutura da página, melhorando a manutenibilidade da página.
Link: 观鸟网 (roy-tian.github.io)