Este é o décimo post da nossa série de tutoriais que vai te ajudar a criar sua primeira página web de forma profissional com HTML e CSS. Neste artigo vamos discutir sobre HTML sections, mais especificamente como usar o elemento SECTION do HTML5.
Portanto para seguir esse guia sem dificuldades, é necessário entender sobre a tecnologia HTML. Então recomendamos que também siga para o tutorial “O que é HTML” depois volte aqui. Pois assim ira absorver todo o conteúdo.
Conteúdo
Introdução a HTML sections
HTML é a sigla para Linguagem de marcação de Hipertexto, uma linguagem usada para criar páginas web. Deste modo, as seções HTML são elementos que permitem organizar o conteúdo em diferentes partes e fornecer estrutura e significado à página.
Isso torna mais fácil para os desenvolvedores e os motores de busca entenderem o conteúdo e oferecer aos usuários uma experiência de navegação mais clara e agradável. Então, Neste artigo vamos falar mais especificamente sobre a tag section.
No entanto, além desta tag, ainda existem vários elementos do HTML, como header, nav, main, article, section, aside, e footer. Cada um destes elementos tem uma função específica e pode ser usado de forma diferente dependendo da estrutura da página.
O que é o elemento section do HTML5
Tag HTML section
A tag HTML <section> é escrita em uma tag de abertura e uma de fechamento, com o conteúdo a ser incluído entre estas. Logo, essa tag tem como principal diferencial o modo semântico do HTML5.
Exemplos de uso da tag section incluem:
- Criar seções para diferentes tópicos em uma página de artigo ou blog.
- Agrupar informações relacionadas, como detalhes de contato em uma página de contato ou informações de serviço em uma página de produto.
<section> Conteúdo </section>
Aprenda como usar a tag section para fazer cards responsivos HTML com CSS.
HTML5 semântico
O HTML semântico é uma abordagem de marcação que utiliza as tags HTML de forma estrutural e significativa para o conteúdo da página. Em vez de usar tags apenas para dar formato ao conteúdo, as tags HTML são usadas para descrever o significado da informação na página.
Isso ajuda a tornar o conteúdo mais acessível para pessoas com deficiência, dispositivos de leitura de tela e motores de busca. Exemplos de tags HTML semânticas incluem: header, nav, main, article, section, aside, e footer.
Caso esteja interessado pode ver aqui as principais tags HTML e tags semântica utilizadas para construção de website “Principais tags HTML“.
Ao usar corretamente as tags HTML semânticas, os desenvolvedores podem criar páginas web mais acessíveis e organizadas, o que pode melhorar a experiência do usuário e aumentar o tráfego do site.
Além disso, o HTML semântico ajuda os motores de busca a entender melhor o conteúdo da página, ou seja, ajuda com o SEO. Logo em seguida destacamos mais porque você deve adaptar ao HTML semântico.
Importância do HTML5 semântico
O HTML5 semântico é importante porque ajuda a melhorar a acessibilidade, a usabilidade e a descoberta do conteúdo da página. Algumas das principais vantagens incluem:
-
Acessibilidade: As tags HTML semânticas tornam o conteúdo da página mais acessível para pessoas com deficiência, como aquelas que usam dispositivos de leitura de tela. Isso ocorre porque as tags HTML semânticas ajudam a descrever o significado da informação na página, tornando-a mais fácil de navegar para todos os usuários.
-
Usabilidade: O HTML5 semântico ajuda a melhorar a usabilidade da página, tornando-a mais fácil de navegar e entender para os usuários. Por exemplo, ao usar as tags HTML semânticas corretamente, é possível criar uma estrutura de navegação clara e fácil de entender para os usuários.
-
Descoberta: As tags HTML semânticas ajudam os motores de busca a entender melhor o conteúdo da página, o que pode aumentar o tráfego do site. Isso ocorre porque os motores de busca usam o HTML semântico para identificar o conteúdo da página e classificá-lo adequadamente nos resultados da pesquisa.
-
SEO: O HTML5 semântico pode melhorar o desempenho de SEO de um site, pois os motores de busca preferem páginas web estruturadas e organizadas. Além disso, o HTML5 semântico permite que os desenvolvedores criem uma estrutura de conteúdo clara e coerente, o que pode ajudar a melhorar o ranqueamento dos sites nos resultados da pesquisa.
Em resumo, o HTML5 semântico é importante porque melhora a acessibilidade, a usabilidade e a descoberta do conteúdo da página, o que pode aumentar a satisfação do usuário e melhorar o desempenho do site em termos de SEO, descubra mais tags semânticas para utilizar em seu site.
Como usar o elemento SECTION do HTML5
A tag section é usada para agrupar conteúdo semelhante em uma seção lógica da página. Aqui estão algumas dicas sobre como usar a tag <section>:
-
Estrutura: Use a tag <section> para agrupar conteúdo relacionado e criar uma estrutura clara para o seu documento. Por exemplo, você pode usar a tag <section> para agrupar seções de introdução, corpo e conclusão de um artigo.
-
Conteúdo: O conteúdo dentro da tag section pode incluir qualquer tipo de elemento HTML, como títulos, parágrafos, listas, tabelas, imagens, vídeos e muito mais.
-
Identificação: Você pode identificar cada seção adicionando uma ID única à tag <section>, que pode ser usada como referência em outros lugares da página. Por exemplo:
<section id="introducao">
<h2>Introdução</h2>
<p>Bem-vindo ao nosso artigo sobre HTML sections!</p>
</section>
- Hierarquia: As seções podem ser aninhadas dentro de outras seções para criar uma estrutura de conteúdo mais complexa. Por exemplo:
<section id="introducao">
<h2>Introdução</h2>
<p>Bem-vindo ao nosso artigo sobre HTML sections!</p>
</section>
<section id="body">
<h2>Corpo do Artigo</h2>
<section>
<h3>Seção 1</h3>
<p>Conteúdo da seção 1.</p>
</section>
<section>
<h3>Seção 2</h3>
<p>Conteúdo da seção 2.</p>
</section>
</section>
Dúvidas frequentes
A tag <section> no HTML é usada para representar uma seção ou área temática em um documento. Pode conter títulos, parágrafos, imagens, ou qualquer outro elemento HTML.
Use a tag <section> quando tiver um conteúdo no seu documento que pode ser considerado uma seção distinta e independente. Geralmente, uma seção é algo que pode ser isolado, reutilizado, ou navegado de forma independente do restante do conteúdo da página.
Ambas as tags <div> e <section> são usadas para agrupar conteúdo no HTML, mas têm propósitos ligeiramente diferentes.
Em resumo, a <div> é usada quando estiver agrupando elementos sem um significado semântico específico, e a tag <section> é usada quando estiver agrupando elementos que formam uma seção temática ou conceitualmente relacionada no seu conteúdo.
Conclusão sobre HTML sections
Em conclusão, a tag section é uma das muitas tags HTML5 semânticas que tornam o conteúdo da web mais acessível, fácil de usar e fácil de entender. O elemento section permite que você agrupe conteúdo relacionado em seções lógicas, ajudando a estruturar o conteúdo da página e a melhorar a acessibilidade.
Além disso, ao usar a tag section de maneira correta, você pode melhorar a usabilidade e a descoberta do seu conteúdo, o que pode resultar em uma melhor experiência do usuário e um desempenho melhor do SEO.
Por fim, é importante lembrar que a elemento section do HTML5 é apenas uma das muitas ferramentas à sua disposição para criar um conteúdo HTML semântico e acessível, e é importante usá-las em conjunto com outras tags e práticas para alcançar os melhores resultados.
Exemplos de códigos HTML:
Este é apenas um exemplos simples, mas você pode usar as tags HTML sections de muitas maneiras diferentes para estruturar seu conteúdo de acordo com suas necessidades.
<!-- seção com titulo texto e link/botão -->
<section class="secao2" id="servicos">
<div class="secao2-div">
<div class="secao2-div-1">
<div class="secao2-div-1-coluna">
<!-- elemento h2, p e button/a -->
<h2>Crescimento sustentável para sua gestão.</h2>
<p>Somos inspirados por um futuro justo, diversificado e sustentável. O futuro com soluções de engenharia e infraestrutura que aprimoram a vida das pessoas e protegem o planeta.</p>
<p>Oferecemos o que há de mais moderno e exclusivo em equipamentos com equipe técnica especializada e qualificada. Nosso compromisso é integrar soluções às necessidades públicas ou privadas provendo crescimento com responsabilidade em desenvolvimento sustentável.</p>
<button class="secao2-botao"><a href="#empresa">Saiba Mais</a></button>
</div>
</div>
</div>
</section>
/*seção-2 style*/
.secao2{
height: auto;
width: 100%;
}
.secao2-div{
display: flex;
flex-wrap: wrap;
width: 680px;
margin: auto;
align-items: stretch;
padding: 60px 10px 60px 10px;
}
.secao2-div-1{
display: flex;
width: 100%;
text-align: center;
}
/*botão*/
.secao2-botao{
background-color: #f36e20;
border: none;
border-radius: 8px;
padding: 12px 20px 12px 20px;
font-size: 16px;
transition: all .5s ease;
}
.secao2-botao a{
text-decoration: none;
color: white;
}
.secao2-botao:hover{
transform: scale(1.1)
}
/*mobile*/
@media (max-width: 768px) {
.secao2-div{
width: 85%;
}
}
Como se tornar um desenvolvedor Web?
Certamente deve estar animado para começar a sua jornada, saiba que estou focado para fazer conteúdos excepcionais que irão te ajudar! Então não perca tempo e cadastre-se logo abaixo para não perder nenhuma novidade e ficar sempre por dentro
Respostas de 2
Parabéns pela iniciativa.
Excelente conteúdo, claro e sussinto.
Obrigado, Léo Lourenço! Fico feliz que tenha gostado do conteúdo sobre o elemento section em HTML5. Se tiver mais dúvidas ou precisar de mais informações, estou à disposição. Abraços!