Sobre a semântica do HTML, na aula, é mostrada a criação de um botão utilizando a tag <input>. Porém, a tag <button> também existe. Qual é a diferença em termos semânticos e funcionais entre usar uma ou outra? Como escolher a melhor opção?
Solucionado
Sobre a semântica do HTML, na aula, é mostrada a criação de um botão utilizando a tag <input>. Porém, a tag <button> também existe. Qual é a diferença em termos semânticos e funcionais entre usar uma ou outra? Como escolher a melhor opção?
Olá Khayan!
Semanticamente, eles tem o mesmo significado. O elemento <button> foi criado mais recentemente e tem um modo de uso diferente, veja como fica o mesmo botão usando <input> e <button>:
<input class="favorite styled"
type="button"
value="Add to favorites">
<button class="favorite styled"
type="button">
Add to favorites
</button>A página do MDN sobre <button> (em inglês), diz sobre as vantagens de usá-lo:
É muito mais fácil estilizar elementos
<button>do que elementos<input>. Você pode adicionar conteúdo HTML (como<em>,<strong>, ou até<img>), e usar pseudo-elementos::aftere::beforepara executar composições complexas, enquanto<input>aceita apenas um atributovaluedo tipo texto.
Ou seja, através da tag <button> conseguimos além de uma melhor semântica, facilidades e vantagens na estilização do elemento. Legal, Pablo! Obrigado.