<a> <button> <input> 용도에 맞게 사용하기

<a> - 보통 페이지 링크를 걸 때 주로 사용되는 일반적인 방식
<button> - 값을 전달하는 사용자 인터페이스를 정의하는 마크업
<input> - 값을 받거나 전달할 떄 사용하는 마크업

<a>태그

<a>..</a> 요소의 어원은 anchor(닻)이다. 다른 자원을 연결하는 의미를 지니고 있고 href 속성으로 하여금 어떤 자원을 연결하고 있는지 표시할 수 있다. ( href 속성의 어원은 hypertext reference)
그러나 href의 값으로 아무 의미없는 "#"을 사용하여 onclick과 같은 방식을 쓰는 것은 <a>...</a> 요소를 본래의 의미(자원의 참조)와 다르게 사용했다는 것을 반증한다. 참조하는 자원이 있다면 유효한 URL 값을 넣어 준다. 다른 자원의 참조하는 의미 없는 버튼이나 텍스트가 키보드 포커스를 받아야 한다면 <button type="button">...</button> 요소를 사용해야 한다.

<button><input> 태그

<button type="submit / button / reset">...</button> 요소는 <input type="submit / button / reset" /> 요소와 동일한 기능을 수행한다. <button>...</button> 요소는 어떤 의미를 마크업하는 요소가 아니라 사용자 인터페이스에 대한 기능을 정의하는 마크업으로써 type 속성의 기본 값은 submit 이며 다음과 같은 기능을 수행 한다.

<button type="submit">...<button> form을 전송하는 기능 : 기본 값, 그러나 IE 6~7브라우저는 표준 명세에 따르지 않음
<button type="button">...<button> 자바스크립트의 도움을 받아 인터페이스를 조작하는 기능. (IE 6~7 브라우저의 기본 값)
<button type="reset">...</button> form 입력 항목들을 초기화하는 기능

<input /> 요소와 가낭 큰 차이점은 내용을 가질 수 있다는 점 이다. <button>...</button> 요소는 텍스트 뿐만 아니라 이미지 요소를 자식으로 포함할 수 있다.

물론 <input />타입은 조금 더 있어 radio /text/images 등으로 더 다양한 기능을 할 수 있다.

페이지 코딩을 할 때 이거나 저거나 <a> 링크로 거는 게 아니라 용도에 맞게 사용하는 것이 중요하다.

<button><input>태그의 비주얼 초기화

<button>...</button> , <input> 요소는 웹 브라우저 기본 값으로 회색 배경과 2px  크기의 outset 스타일이 지정되어 있는데 이 값을 다음과 같이 초기화 할 수 있다.

button {border:0; padding:0; background:transparent; cursor:pointer; *overflow:visible; }
input {border:0; padding:0; background:transparent; cursor:pointer; *overflow:visible; }

<button type="button">버튼></button>
<input type="button value="버튼" />

*overflow:visible 속성과 값을 추가한 것은 버튼 텍스트 길이에 비례하여 비 정상적으로 버튼의 폭이 커지는 IE 6~7 브라우저 버그를 해결하기 위한 hack이다.

출처 : 네이버카페 '웹표준 코딩의 완전체를 꿈꾸며'