[HTML] a / button / input type="submit" 구분하기

보여지는 모양이 비슷할때가 많은 button과 a태그.. input type="submit" 까지
시멘틱한 마크업을 위해 확실하게 구분하자!

 

📌 a : 단순 링크 연결을 위한 태그

문서(페이지)간의 이동이나 문서 내 다른 영역으로 이동 등, 단순히 A에서 B로의 연결을 위한 태그.

<a href="https://www.google.com"> 구글로 이동 </a>

<div id="hello"> text </div>
<a href="#hello"> 페이지 내 id 설정한 div 영역으로 이동 </a>

<a href="mailto:sprout.jessie@google.com"> Jessie에게 메일 쓰기 </a>

<a href="tel:010-1234-5678"> Jessie에게 전화 걸기 </a>

<a href="https://www.google.com" target="_blank"> 새창으로 구글 열기 </a>

 

📌 button : 눌러서 어떤 액션이 일어나도록 하는 태그

• button 태그는 데이터를 제출하거나, ui를 조작하는 등의 버튼에 쓰인다.
• button 태그에는 꼭 type을 명시해주어야 한다.
• button type="submit"이 default 값이기 때문에,
  단순 UI조작을 위한 버튼 역할이라면 button type="button"이라고 적어줘야하는 것.
• button type="submit"의 경우에는 전송'처리'가 되면서 화면이 새로고침 된다.

<button type="submit">제출용버튼</button>

<button type="button">인터페이스 조작을 위한 버튼</button>

<button type="reset">input을 클리어하는 버튼</button>

 

📌 input type="submit" 과 button type="submit"의 차이?

써 본적은 없지만, button에 대해 구글링 하다보니
input type="submit" 과 button type="submit"도 함께 개념정리를 하더라.
결론적으로 둘은 기능상에 차이는 없다.

하지만,

• button 은 태그 내에 자식 요소를 가질 수 있어 다양한 스타일링이 가능하다.
• input type="submit"은 열린태그이기 때문에, 자식요소를 가질 수 없다.

과거에 button 태그가 없을때, 이벤트 처리를 위해 input type="submit" 을 사용했다고 한다. 고로 지금은 사용할 필요 없는 태그.

 

---

[ 참고문서 ]
https://nykim.work/96
https://chlolisher.tistory.com/72