🌱 기초 프론트엔드
Semantic HTML이란?
쉽게 이해하기
책을 쓸 때 '여기', '저기' 대신 '서론', '본론', '결론'이라고 명확히 쓰는 것과 같아요. <div> 대신 <header>, <main>, <footer>를 쓰면 브라우저와 검색엔진이 페이지 구조를 더 잘 이해할 수 있어요.
핵심 정리
의미를 담은 HTML 태그를 사용하면 검색과 접근성이 좋아져요.
자세히 알아보기
Semantic HTML은 의미를 가진 HTML 태그를 사용하는 것을 말합니다. <div>와 <span>만 쓰는 대신, <header>, <nav>, <main>, <article>, <section>, <footer> 같은 태그를 씁니다.
이렇게 하면 좋은 점이 많아요. 첫째, 검색엔진이 페이지 구조를 더 잘 이해해서 SEO에 유리합니다. <article> 안의 내용을 본문으로, <nav> 안의 링크를 네비게이션으로 정확히 인식하죠. 둘째, 스크린 리더를 쓰는 시각장애인이 웹사이트를 더 쉽게 탐색할 수 있어요.
예를 들어 블로그를 만든다면, <article>로 각 글을 감싸고, <header>에 제목과 날짜를, <section>으로 단락을 나누는 식이에요. 네비게이션은 <nav> 안에, 사이드바는 <aside>에, 저작권 정보는 <footer>에 넣습니다.
처음에는 <div>가 더 익숙할 수 있지만, semantic 태그를 쓰면 코드를 나중에 봤을 때도 구조가 한눈에 들어옵니다. 팀으로 일할 때도 협업이 훨씬 수월해요. 그리고 브라우저의 기본 기능(예: outline 탐색)도 더 잘 작동합니다.