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

Como usar a tag main?

No início, na primeira section da página (classe panel-about), eu havia colocado a tag main. Mas depois que a página foi crescendo resolvi seguir os passos do instrutor e trocar por uma section. Pois pensei "qual seria a parte principal da página?". Não consegui chegar numa conclusão, pois a section "sobre" contém a informação da página mas o form de inscrição também é importante.

Enfim, quero entender um pouco mais sobre essa tag e, se possível, um exemplo prático.

<body>
    <header  class="header">
        //trecho de código omitido
    </header>
    <section class="panel panel-about">
        <div class="container">
                <h2 class="title">Muito Conteúdo: do frontend ao backend</h2>
            <h3 class="subtitle">30 de Maio de 2017 - na Cidade Maravilhosa</h3>
            <div class="about-description">
                <p>
                Com a AluraConf abordaremos o que há de novidade e conhecimento essenciais a um desenvolvedor mobile.
                </p>
                <p>
                É 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 BigData. O desenvolvedor atualizado vai estar aqui.
                </p>    
            </div>            
        </div>
    </section>
    <section class="panel panel-speakers">
        <div class="container">
            <div class="about-speakers">
                <h2 class="title">Palestrantes</h2>
                <h3 class="subtitle">Aprenda com os palestrantes que são referência no mercado</h3>
            </div>
            <ul class="speakers">
                <li class="speaker">
                    <figure class="speaker-portrait">
                        <img class="speaker-image" src="img/palestrantes/placeholder.jpeg" alt="Foto do Palestrante">
                        <figcaption class="speaker-name">Nome do Palestrante</figcaption>
                        <p class="speaker-bio">Desenvolvedor e instrutor da Caelum</p>
                    </figure>
                    <p class="speaker-speach">Descrição Descrição Descrição</p>
                </li>
                <li class="speaker">
                    <figure class="speaker-portrait">
                        <img class="speaker-image" src="img/palestrantes/placeholder.jpeg" alt="Foto do Palestrante">
                        <figcaption class="speaker-name">Nome do Palestrante</figcaption>
                        <p class="speaker-bio">Desenvolvedor e instrutor da Caelum</p>
                    </figure>
                    <p class="speaker-speach">Descrição Descrição Descrição</p>
                </li>
                <li class="speaker">
                    <figure class="speaker-portrait">
                        <img class="speaker-image" src="img/palestrantes/placeholder.jpeg" alt="Foto do Palestrante">
                        <figcaption class="speaker-name">Nome do Palestrante</figcaption>
                        <p class="speaker-bio">Desenvolvedor e instrutor da Caelum</p>
                    </figure>
                    <p class="speaker-speach">Descrição Descrição Descrição Descrição Descrição Descrição Descrição Descrição Descrição Descrição Descrição Descrição Descrição Descrição Descrição</p>
                </li>
                <li class="speaker">
                    <figure class="speaker-portrait">
                        <img class="speaker-image" src="img/palestrantes/placeholder.jpeg" alt="Foto do Palestrante">
                        <figcaption class="speaker-name">Nome do Palestrante</figcaption>
                        <p class="speaker-bio">Desenvolvedor e instrutor da Caelum</p>
                    </figure>
                    <p class="speaker-speach">Descrição Descrição Descrição</p>
                </li>
                <li class="speaker">
                    <figure class="speaker-portrait">
                        <img class="speaker-image" src="img/palestrantes/placeholder.jpeg" alt="Foto do Palestrante">
                        <figcaption class="speaker-name">Nome do Palestrante</figcaption>
                        <p class="speaker-bio">Desenvolvedor e instrutor da Caelum</p>
                    </figure>
                    <p class="speaker-speach">Descrição Descrição Descrição</p>
                </li>
                <li class="speaker">
                    <figure class="speaker-portrait">
                        <img class="speaker-image" src="img/palestrantes/placeholder.jpeg" alt="Foto do Palestrante">
                        <figcaption class="speaker-name">Nome do Palestrante</figcaption>
                        <p class="speaker-bio">Desenvolvedor e instrutor da Caelum</p>
                    </figure>
                    <p class="speaker-speach">Descrição Descrição Descrição</p>
                </li>
            </ul>    
        </div>
    </section>
    <section class="panel panel-subscriber">
        <div class="container">
            <h2 class="title">Seus Dados</h2>
            <form class="form-subscriber">
                <label class="label">Nome <input class="input" type="text" name="nome"><br></label>
                <label class="label">E-mail <input class="input" type="text" name="email"><br></label>            
                <div class="button-submit">
                    <input class="button" type="submit" value="Realizar Inscrição">
                    <!--<button class="button">Realizar Inscrição</button>-->    
                </div>
            </form>    
        </div>
    </section>
</body>
1 resposta
solução!

Olá, Geovane

A tag "main" é só para deixar o seu código mais semântico e organizado, ele indica qual é a área principal e não o conteúdo. Você pode incluir uma section para o "sobre" e outra para o "form" dentro do main sem problema algum.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software