Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

h1, h2, h3...

Faz diferença usar um ou outro? No header eu entendi o sentido de colocar h1 diferenciando do main. Mas no próprio main, é utilizado h2 para título "Sobre Barbearia Alura" e h3 para mapa "Nosso Estabelecimento" e benefícios "Benefícios". Eu poderia utilizar h2 para todos já que estamos usando o mesmo estilo de CSS?

<!DOCTYPE html>
<html lang='pt-br'>
    <head>
        <meta charset='UTF-8'>
        <title>Barbearia Alura</title>
        <link rel='stylesheet' href='reset.css'>
        <link rel='stylesheet' href='style.css'>
        <link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">

        <!-- fonte: css exportado do google fonts -->        

    </head>
    <body> <!-- letras começam com 16px -->
        <header>
            <div class='caixa'>
                <h1><img src='logo.png' alt='Logo da Barbeaira Alura'></h1>
                <nav>
                    <ul>
                        <li><a href='index.html'>Home</a></li> 
                        <li><a href='produtos.html'>Produtos</a></li>
                        <li><a href='contato.html'>Contato</a></li>
                    </ul>
                </nav>    
            </div>    
        </header>

        <img class='banner' src ="banner.jpg">

        <main>    
            <section class='sobre'>

                <h2 class='titulo-principal'> Sobre a Barbearia Alura </h2>

                <img class='utensilios' src='utensilios.jpg' alt='Utensílios de um Barbeiro'>

                <p>Localizada no coração da cidade a <strong>Barbearia Alura</strong> traz para o mercado o que há de melhor para o seu cabelo e barba. Fundada em 2019, a Barbearia Alura já é destaque na cidade e conquista novos clientes a cada dia.</p>

                <p id='marcadorDeIdentificacao'><em>Nossa missão é: <strong>"Proporcionar auto-estima e qualidade de vida aos clientes".</strong></em></p>

                <p>Oferecemos profissionais experientes e antenados às mudanças no mundo da moda. O atendimento possui padrão de excelência e agilidade, garantindo qualidade e satisfação dos nossos clientes.</p>
            </section>

            <!-- section te um conteúdo complexo que faz um mesmo sentido, mesmo conteúdo, mesma semântica -->

            <section class='mapa'>
                <h3 class='titulo-principal'> Nosso Estabelecimento </h3>
                <p>Nosso estabelecimento está localizado no coração da cidade.</p>
                </section>
            </section>

            <section class='beneficios'>
                <h3 class='titulo-principal'>Benefícios</h3>
                <ul>
                    <li class='classe'>Atendimento aos Clientes</li>
                    <li class='classe'>Espaço diferenciado</li>
                    <li class='classe'>Localização</li>
                    <li class='classe'>Profissionais Qualificados</li>
                </ul>
                <img class='imagemBeneficios' src='beneficios.jpg'>
                <!-- imagem é CONTEÚDO INLINE: deixa ter conteúdo ao lado, não bloqueia espaço -->
            </section>
        </main>
        <footer>
            <img src='logo_branco.png' alt='Logo da Barbeaira Alura'>
            <p class='copyright'>&copy; Copyright Barbearia Alura - 2019</p>
        </footer>
    </body>
</html> 
1 resposta
solução!

Oi Julia, tudo bem?

É uma boa prática você dividir seus subtítulos, o bom uso das heading tags ajuda no rankeamento do seu site nos resultados do Google. Então divida mais ou menos assim quando for usar as tags:

  • H1 com um resumo breve do que o usuário vai encontrar no texto, de preferência usando palavras chave.
  • no H2 deve tratar de algo que dê sequência ao H1 e ao assunto da página, como se fosse um subtítulo.
  • H3 use para dividir os elementos ainda mais e assim facilitando o entendimento e visualização das pessoas e dos robôs.

Assim criando uma estrutura de informação coerente.

Aqui na Alura temos uma formação de SEO, e com esse curso você consegue entender melhor como funciona o algoritmo de grandes buscadores como o Google.

Espero ter te ajudado. :D

Bons estudos.