Você não precisa usar tags div todas as vezes. Use essas tags HTML semânticas para tornar seu site mais estruturado e acessível.
Antes da introdução do HTML semântico, os desenvolvedores usavam divs para organizar o conteúdo. Os elementos div não têm significado por conta própria. Eles fornecem apenas uma maneira de aplicar estilos e organizar o conteúdo.
A palavra semântica significa relativo ao significado. Os elementos HTML semânticos descrevem o propósito de seu conteúdo. Eles fornecem significado para o desenvolvedor, usuário, mecanismos de pesquisa e tecnologias assistivas. Aqui está uma lista de tags HTML semânticas populares que você pode usar em seu próximo projeto.
O que são Divs?
Em HTML, o elemento div (divisão) é um contêiner em nível de bloco. Você usa um div para agrupar ou dividir elementos HTML em seções em uma página da web. A sintaxe é a mostrada abaixo:
<div>
div>
Benefícios do uso de elementos HTML semânticos sobre Divs
O HTML5 introduziu elementos HTML semânticos para facilitar a leitura do código. Os elementos semânticos fornecem significado e estrutura ao conteúdo da web.
Eles tornam seu código compreensível para outros desenvolvedores. Eles também tornam mais fácil para os mecanismos de pesquisa encontrar seu conteúdo e direcionar o tráfego para seu site. Aqui estão alguns elementos semânticos que você pode usar em seu Projetos HTML e CSS.
1.
O tag define a seção de cabeçalho em um documento. Normalmente, contém o logotipo do site, a navegação e o título da página. É a seção que aparece no topo de uma página da web. Você pode personalizar o cabeçalho de acordo com sua necessidade. A sintaxe é a seguinte:
<corpo><cabeçalho>
<h1> Olá!h1>
<p>eu sou um cabeçalhop>
cabeçalho>
corpo>
2.
O tag contém os links de navegação para o site. Podem ser menus, sumários ou índices. Geralmente é colocado dentro do marcação. A sintaxe é a seguinte:
<cabeçalho><navegação>
<ul>
<li>links do meu siteli>
<li><ahref="#"> Lara>li>
<li ><ahref="#"> Sobre nós a>li>
ul>
navegação>
<h1>O acima é parte de navegação do meu site.h1>
cabeçalho>
No navegador ficará assim:
Você pode usar modelos de layout CSS como CSS flexbox alinhar o
3.
O tag contém o conteúdo principal da página da web. Ele separa o conteúdo do cabeçalho, barra lateral e rodapé. O principal representa o conteúdo dominante do seção.
<corpo><cabeçalho>
<título> fatos do site título>
cabeçalho>
<principal>
<p> Este site é uma pequena demonstração de como funciona a tag principal.p>
<p> Ele inclui a parte do site com conteúdo útil.p>
principal>
<rodapé>
<h3> Este é um rodapé h3>
rodapé>
corpo>
Aparece assim:
4.
Use o tag para definir seções independentes em um documento ou site. Por exemplo, você pode usá-los para estruturar postagens de blog, revistas ou cartões de produto. O elemento pode incluir outros elementos, incluindo outros artigos, seções e cabeçalhos. Os elementos incluídos devem estar relacionados ao tema do artigo.
<artigo>
<h1>Mais estranho que Ficçãoh1><artigo>
<h3>Introduçãoh3>
<p>Os eventos e pessoas narrados neste livro são fictícios.p>
artigo>
<artigo>
<h3>Capítulo umh3>
<p> O dia estava claro e o sol sorriu do céup>
artigo>
artigo>
Parece assim:
5.
O tag contém o conteúdo relacionado ao conteúdo principal. Use esta tag para criar barras laterais para citações, comentários ou elogios. destaca informações que o leitor pode perder. Destaca-se do resto do conteúdo.
html><html>
<estilo>
corpo{
cor de fundo:#abdbe3;
}
aparte {
largura: 30%;
padding-esquerda: 0,5rem;
margem esquerda: 1rem;
flex: esquerda;
box-shadow: inserir 5px 0 5px -5px verde;
estilo da fonte: itálico;
cor vermelha;
}
lado > p {
margem: 0,5rem;
estilo>
<corpo>
<principal>
<h1> pássaros tecelõesh1>
<p>Ploceidae é uma família de pequenos pássaros passeriformes. Muitos dos quais são chamados de tecelões, pássaros tecelões, tentilhões tecelões e bispos.p>
<aparte>
<p>Reino: Animalia
Filo: Chordatap>aparte>
<p>Nas classificações mais recentes, Ploceidae é um clado, excluindo algumas aves que historicamente foram colocadas na família. Alguns dos pardais, mas inclui a subfamília monotípica Amblyospizinae.p>
principal>
corpo>
html>
6.
O O elemento contém uma parte da página sem nenhum elemento semântico específico. As seções podem ter um título para apresentar o conteúdo e incluir outros elementos HTML. representa os componentes de uma página da Web, como capítulos de um livro ou blog.
html><html>
<corpo>
<h1>A Bíbliah1>
<seção>
<h2>Introduçãoh2>
<p>A Bíblia é uma coleção de escrituras religiosas sagradas no Cristianismo, Judaísmo, Samaritanismo. A Bíblia é uma antologia – uma compilação de textos de uma variedade de formas – originalmente escrito em hebraico, aramaico e grego coiné.p>
seção>
<seção>
<h2>Capítulo um: Gênesish2>
<p>O Livro do Gênesis é o primeiro livro da Bíblia hebraica e do Antigo Testamento cristão. Seu nome hebraico é o mesmo que sua primeira palavra, Bereshit. Gênesis é um relato da criação do mundo, o início da história da humanidade e dos ancestrais de Israel e as origens do povo judeup>
seção>corpo>
html>
Parece assim:
7.
O elemento inclui ilustrações independentes como imagens ou diagramas. Essas ilustrações fazem referência ao conteúdo da página principal. As figuras vêm com legendas especificadas pelo elemento. O explica do que se trata a imagem. O
html><html>
<corpo>
<principal>
<seção>
<h1>Partes de um computadorh1>
<p> Existem várias partes que trabalham juntas para formar um computadorp>
<figura>
<imgorigem="some-url.jpg"alternativo="mouse de computador">
<figcaption>Este é um mouse de computadorfigcaption>
figura>
seção>
principal>
corpo>
html>
Você pode ir mais longe e aprender como criar imagens responsivas em HTML.
O O elemento HTML inclui informações na parte inferior da página da web. É o oposto do elemento. O pode conter informações sobre o proprietário da página. Isso inclui dados de direitos autorais ou links para informações adicionais do site.
html><html>
<corpo>
<principal>
<seção>
<h1>Partes de um computadorh1>
<figura>
<imgorigem="some-url.jpg"alternativo="mouse de computador">
<figcaption>Este é um mouse de computadorfigcaption>
figura>
seção>
principal>
<rodapé>
<p> Fabricado pela ComputerTech © 2023p>
rodapé>
corpo>
html>
O código acima adiciona um rodapé ao Partes de um computador página conforme a imagem a seguir.
Por que usar elementos HTML semânticos?
O uso de elementos HTML semânticos fornece contexto ao código. Qualquer um que olhasse o código poderia entendê-lo facilmente. As tags facilitam o estilo de elementos e a colaboração em projetos.
Você pode usar HTML semântico com bibliotecas e estruturas front-end. A maioria dos navegadores modernos prefere elementos HTML semânticos em vez de elementos tradicionais. Comece a usar HTML semântico e veja seu código parecer moderno, legível e apresentável.
