2026-01-23

시맨틱 마크업

HTML 태그에 의미를 부여하여, 문서 구조와 역할을 명확히 표현하는 마크업 방식

• 태그만 보고도 이 콘텐츠가 무엇인지 알 수 있게 작성
• 사람 + 브라우저 + 검색엔진 + 스크린리더 모두를 위한 마크업

왜 쓰는가

1. 가독성과 유지보수성 향상

• div만 있으면 구조 파악이 어려움
• 의미 있는 태그 → 코드 읽기 쉬움

2. SEO(검색엔진 최적화)에 유리

• 검색엔진은 HTML 구조를 분석해 페이지 의미를 파악
• header, nav, main, article 등은 콘텐츠 중요도 판단에 도움

3. 웹 접근성 향상

• 스크린리더가 태그 의미를 기준으로 콘텐츠를 읽음
• 시각장애인 사용자에게 더 정확한 정보 전달

대표 시맨틱 태그

| 태그 | 의미 | | — | — | | <header> | 페이지/섹션의 머리말 | | <nav> | 내비게이션 링크 | | <main> | 페이지의 주요 콘텐츠 | | <section> | 주제별 콘텐츠 그룹 | | <article> | 독립적으로 의미 있는 콘텐츠 | | <aside> | 부가 콘텐츠 | | <footer> | 페이지/섹션의 하단 정보 |

• section vs article 차이
  • <article> :독립적으로 사용 가능한 콘텐츠
  • <section> : 문서 내 논리적 구획

참고자료

• http://velog.io/@jh0152park/%EC%8B%9C%EB%A7%A8%ED%8B%B1-%ED%83%9C%EA%B7%B8%EB%A5%BC-%EC%95%84%EC%8B%AD%EB%8B%88%EA%B9%8C
• https://seo.tbwakorea.com/blog/what-is-semantic-tag/
• https://coding-factory.tistory.com/883