[HTML - 12] 시맨틱 태그

의미론적인 코드 - 시맨틱 태그

• 개발자와 브라우저에게 의미를 제고하는 태그
• <의미> 콘텐츠 </의미>
• 태그명은 ‘이 요소가 가진 목적이나 역할은 무엇인가?’를 나타냄
• 검색엔진에게 좋은 단서가 됨
• 대부분의 시멘틱 태그는 컨테이너 태그와 같이 특별한 스타일을 제공하지 않지만 이점을 가져다 줌
  • 검색엔진은 시맨틱 태그를 중요한 단서로 봄
  • 시각 장애가 있는 사용자가 화면 판독기로 페이지를 탐색할 때 참조 됨
  • 코드의 가독성이 좋아짐
  • 컨테이너의 남용을 방지할 수 있어 코드 쓰기가 편함
  • 대표적인 시맨틱 태그들

    태그명	의미	태그명	의미
    <article	독립적인 콘텐츠	<header>	머리말
    <aside>	별도의 콘텐츠	<main>	주된 콘텐츠
    <details>	추가적인 상세한 정보	<nav>	내비게이션 링크
    <figcaption>	figure의 자막	<selection>	콘텐츠의 한 섹션(절)
    <figure>	설명 붙는 독립 콘텐츠	<summary>	detail의 헤더
    <footer>	맺음말	<time>	강조할 시간