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>