현대 HTML 요소를 문서 구조와 역할에 맞게 고르는 기준은 무엇인가요?

이렇게 답해 보세요 (핵심 답변)

현대 HTML 요소는 시각적 모양이 아니라 문서 구조, 텍스트 의미, 미디어, 폼 입력, 대화형 동작 중 어떤 역할을 맡는지를 기준으로 고릅니다. 예를 들어 주요 영역은 <header>, <nav>, <main>으로 나누고, 독립된 콘텐츠는 <article>, 미디어는 <video>·<audio>, 펼침 UI는 <details>·<summary>를 사용합니다. 과거의 HTML5 태그 목록만 외우기보다 현재 HTML Living Standard의 의미와 내장 기능을 확인해 선택하는 습관이 중요합니다.

함께 설명하면 좋은 이유 (꼬리질문 대비)

1. 겉모양이 비슷해 보이는 버튼이라도 다른 URL로 이동하는 역할이면 <a>를, 폼 제출이나 모달 열기 같은 동작이면 <button>을 골라야 합니다.
2. <input>과 <label>을 연결하거나 type="email" 같은 내장 폼 속성을 쓰면 클릭 영역 확대와 모바일 가상 키보드 최적화를 기본으로 얻을 수 있습니다.

면접에서 자주 하는 실수

<header>나 <footer> 태그가 페이지 전체에 딱 한 번만 쓸 수 있는 최상위 배너 전용 태그라고 오해하지 않아야 합니다.