Semantic HTML이란 무엇이며 왜 중요한가요?

둘 다 동일하게 스타일링할 수 있지만, 브라우저, 스크린 리더, 검색 엔진이 이해할 수 있는 것은 두 번째뿐입니다.

실무에서 왜 중요한가

• Accessibility: 스크린 리더는 <header>, <nav>, <main>, <footer>로부터 랜드마크 맵을 구성하여 사용자가 영역 간을 이동할 수 있게 합니다. <div>만 잔뜩 있으면 아무것도 제공하지 못합니다.
• SEO: 검색 엔진은 <h1>, <article>, <main>에 담긴 콘텐츠에 가중치를 두고 페이지 구조를 이해합니다.
• 무료로 제공되는 동작: <button>은 포커스가 가능하고 키보드로 활성화(Enter/Space)할 수 있으며 버튼으로 안내됩니다. <div onclick>은 이 모든 것을 직접 다시 구현하지 않는 한 어느 것도 갖지 못합니다.
• 유지보수성: 마크업이 페이지의 개요처럼 읽힙니다.

자주 쓰는 semantic element

왜 중요한가

경험 법칙: 의도하는 의미를 가진 element를 선택하라는 것이며, 어울리는 semantic element가 없을 때만 <div>/<span>을 스타일링 컨테이너로 사용하십시오.

이는 가장 적은 비용으로 얻을 수 있는 accessibility와 SEO의 성과입니다.