페이지 이동에 어떤 태그를 써야할까?

개인생각

SEO 를 위해서는 a 태그가 정석이라고 한다.

---

<a> 태그와 <button> 태그의 차이점

1. <a> 태그 (Anchor 태그)

• 주요 용도: 페이지 이동 (새로운 URL로 이동)
• 기본 동작: 클릭하면 링크된 페이지로 이동
• 속성: href(목적지 URL), target(새 탭 열기 등)
• SEO 영향: 검색 엔진이 링크를 탐색 가능
• 예제 코드:

  <a href="https://example.com">이동하기</a>

• 사용 예시:
  ✅ 페이지 간 이동 (내부 링크, 외부 링크)
  ✅ 사용자가 새 페이지로 가야 하는 경우
  ✅ SEO가 중요한 경우

---

2. <button> 태그

• 주요 용도: 사용자 상호작용 (이벤트 실행, 폼 제출 등)
• 기본 동작: 클릭하면 JavaScript 실행 또는 폼 제출
• 속성: type="button"(기본 버튼), type="submit"(폼 제출)
• SEO 영향: 검색 엔진이 버튼을 탐색하지 않음
• 예제 코드:

  <button onclick="alert('버튼 클릭됨!')">클릭하기</button>

• 사용 예시:
  ✅ JavaScript로 동작(모달 열기, AJAX 호출 등)
  ✅ 폼 제출
  ✅ 페이지 이동이 아니라 특정 기능을 수행하는 경우

---

🚀 언제 <a> 태그를 사용해야 할까?

• 유저가 다른 페이지로 이동해야 하는 경우
• 네비게이션 바, 링크 버튼 등
• SEO(검색 엔진 최적화)가 필요한 경우

⚡ 언제 <button> 태그를 사용해야 할까?

• 자바스크립트 이벤트를 실행해야 할 때 (예: 팝업 열기, AJAX 요청 등)
• 폼을 제출해야 할 때 (<form> 안에서 type="submit")
• 페이지 이동이 아닌 특정 기능을 수행하는 경우

---

❌ 잘못된 예시

<button onclick="location.href='https://example.com'">이동하기</button>

• 잘못된 이유: 페이지 이동은 <a> 태그가 더 적절합니다.
• 수정 예시:

  <a href="https://example.com">이동하기</a>

---

💡 정리

구분	<a> 태그	<button> 태그
주요 용도	페이지 이동	이벤트 실행, 폼 제출
기본 동작	클릭하면 링크로 이동	클릭하면 JS 실행 or 폼 제출
SEO 영향	검색 엔진이 인식	검색 엔진이 인식 X
속성	href, target	type, onclick
사용 예시	메뉴, 외부 링크, 페이지 이동	모달 열기, AJAX 요청, 폼 제출

---

📌 결론:

• 페이지 이동 = <a>
• 기능 실행 = <button>
• a 태그로 만들고 CSS로 버튼처럼 꾸미는 것이 일반적 🎨