Para fazer o primeiro botão da página, no header, o Flávio (instrutor) usou a tag âncora. Para fazer o segundo botão, no formulário, o Flávio usou a tag button. Eu usei um input de tipo submit porque foi o que aprendi. Então quero saber:
- Usar âncora para fazer um botão faz sentido quando existe a tag button?
- A propósito, a tag button possui uma propriedade href?
- Usar a tag button num form não prejudica a semântica?
<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 href="#" class="button">Inscreva-se</a>
</section>
</div>
</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>
</html>