Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Semanticamente posso substituir a tag <section> pela tag <main>?

Olá, pessoal. O título do tópico já diz tudo, posso substituir a tag section pela tag main?

Estruturei meu HTML da seguinte maneira (segue apenas a tag body):

<body>
    <header class="header">
        <nav class="main-menu">
            <ul>
                <li class="menu-item"><a href="#">Sobre</a></li>
                <li class="menu-item"><a href="#">Palestrantes</a></li>
            </ul>
        </nav>

        <div class="jumbotron">
            <section class="panel-main">
                <h1 class="title">ALURACONF</h1>
                <h2 class="subtitle">30MAIO|RIO</h2>
            </section>
            <section class="panel-subscribe">
                <a class="button" href="#">inscreva-se</a>
            </section>
        </div>
    </header>

    <main>
        <div class="main-text">
            <h1 class="main-title">Muito conteúdo do frontend ao backend</h1>
            <h2 class="main-subtitle">30 de Maio de 2017 - na Cidade Maravilhosa</h2>
            <p class="paragraph">Com a AluraConf abordaremos o que há de novidade e conhecimentos essenciais a um
                desenvolvedor mobile.
            </p>
            <p class="paragraph">É uma grande chance de ficar por dentro dos assuntos de Android, iOS, Web mobile, desenvolvimento
            híbrido, UX, além da parte backend com Rest, Microservices, e Big Data. O desenvolvedor atualizado vai
            estar aqui.</p>
        </div>
    </main>

</body>
2 respostas
solução!

Oi Lucas tudo bem?

O elemento main define o conteúdo principal dentro do body em seu documento ou aplicação. Entende-se como conteúdo principal aquele relacionado diretamente com o tópico central da página ou com a funcionalidade central da aplicação. O mesmo deverá ser único na página, ou seja, dentro do elemento main não deverão ser incluidas seções da página que sejam comuns a todo o site ou aplicação, tais como mecanismos de navegação, informações de copyright, logotipo e campos de busca (a não ser, é claro, caso a função principal do documento seja fazer algum tipo de busca).

Já o elemento HTML section representa uma seção genérica contida em um documento HTML, geralmente com um título, quando não existir um elemento semântico mais específico para representá-lo.

Por exemplo, um menu de navegação deve estar dentro um elemento nav, mas uma lista de resultados de pesquisa ou a exibição de um mapa e seus controles não possuem elementos específicos, e podem ser colocados dentro de uma section.

Então semanticamente não pode substituir um pelo outro.

Porém seu HTML está semanticamente correto.

Continue assim e bons estudos!!!

Obrigado pela resposta completa, André. Consegui entender a diferença na utilização das duas tags.

Caso alguém leia esse tópico e queira saber mais, encontrei esse artigo enquanto pesquisava:

https://ilikekillnerds.com/2014/07/how-to-correctly-use-semantic-html5-article-main-and-section-tags/.