Button VS ~

• HTML에서 버튼을 만드는 방법은 다양합니다.
• <input type=”button” />
• <Button type=”button”> </Button>
• <div>와 다른 엘리먼트에 onClick 이벤트를 발생시키는 경우
•  
• 여기서 어떤거를 써야할지 고민이 될 수도 있는데,
  결론부터 말하자면 Button을 사용하는 것이 좋습니다.
• <input type=”button” />
  과거 코드들을 보면 HTML에서 form 태그 내에 input을 두어 버튼 활용을 하기도 했지만 input은 열린 태그이기 때문에 태그 하위에 다른 엘리먼트들을 담을 수 없어서(활용가치가 딱히..) 지금은 잘 사용하지 않습니다.
• <div>와 다른 엘리먼트에 onClick 이벤트를 발생시키는 경우
  front를 접하게 되면서 시멘틱 태그(semantic tag)에 대해서 들어보셨나요?시멘틱 요소가 아닌 div, span 요소 등은 해당 요소가 무슨 내용인지는 내부 코드를 봐야 알 수 있다.그에 비해, 시멘틱 요소인 form, table, img 요소는 코드를 보지 않아도 해당 요소가 이름만 봐도 바로 알 수가 있습니다.
  • 시멘틱(semantic) 요소란 그 자체에 의미를 가지고 있는 요소를 말한다. 즉, 요소가 자기 스스로 브라우저와 개발자 모두에게 자신이 사용된 의미를 명확히 전달해 주는 요소를 의미한다.
  • div로 버튼을 만들게 된다면 브라우저가 인식을 하지 못해 SEO가 떨어지는 단점과 타 개발자가 해당 태그를 보았을 때 직관성이 떨어진다는 단점이 있습니다.

결론

• 버튼을 만들 때 를 사용하는 것이 바람직하다.
  • 버튼 태그 내의 하위 엘리먼트들을 넣을 수 있음
  • SEO 향상 및 직관성 증가

참고자료

버튼에 타입을 쓰는 이유 (button type="button")

[HTML] 시맨틱 태그 (Semantic Tag)란? 🧐

HTML 입문 | HTML5 시작 | HTML5 시멘틱(semantic) 요소