HTML 시멘틱 태그

안녕하세요.

이번 포스팅에서는 HTML의 시멘틱 태그에 대해 알아보겠습니다.

지난 포스팅에서는 <strong></strong>과 <em></em> 이라는 글자를 강조하는 태그를 알아보았습니다.

하지만 HTML에는 브라우저가 해석할 수 있는 다양한 시멘틱 태그들이 있습니다.

시멘틱 태그 종류

• <article>: 독립적인 컨텐츠 정의.
• <aside>: 페이지 컨텐츠 이외의 컨텐츠 정의.
• <details>: Show/Hide 할 수 있는 추가적인 컨텐츠 정의.
• <figcaption>: <figure></figure> 태그에 대한 표제 정의.
• <figure>: 주로 사진, 일러스트, 도표, 코드 리스트 등을 표시하는 자체 컨텐츠 정의.
• <footer>: 문서나 섹션의 푸터 정의. 푸터는 일반적으로 작성자, 저작권 정보, 관련 문서 등의 내용을 포함.
• <header>: 문서나 섹션의 헤더 정의. 헤더는 일반적으로 제목, 로고, 검색 폼 등 포함.
• <main>: 문서의 메인 컨텐츠 정의.
• <mark>: 강조된 텍스트 정의.
• <nav>: 사이트 내의 다른 페이지로 이동하기 위한 네비게이션 링크 정의.
• <section>: 문서 내의 섹션 정의.
• <summary>: <details></details> 태그의 가시적인 제목 정의.
• <time>: 날짜/시간 정의.

여기 나오는 모든 요소를 다 이해할 필요는 없습니다.

다만 이런 태그를 사용할 경우 브라우저가 위와 같은 내용이 화면 내에 있다는 것을 이해할 수 있도록 해준다는 것만 기억하면 됩니다.

실제 사이트를 예시로 설명해 보겠습니다.

좀 더 세분화할 수도 있겠지만 간략하게 보면 위와 같습니다.

하지만 네이버처럼 오래 전부터 존재했던 사이트들은 시멘틱 태그를 사용하지 않는 경우가 많습니다.

지금은 사라진 인터넷 익스플로러가 시멘틱 태그를 제대로 지원해줄 수 없었기 때문입니다.

그리고 대부분의 시멘틱 태그는 사실 <div></div> 태그로 대체 가능합니다.

그럼에도 시멘틱 태그를 쓰는 이유는,

1. 검색 엔진 최적화(SEO)

브라우저가 웹페이지를 해석할 수 있다면 누군가가 네이버, 구글 등의 검색 엔진을 통해 문서를 검색할 때 유용하게 사용될 수 있습니다.

2. 웹 접근성

접근성은 Accessibility를 번역한 것으로, 보다 많은 사람이 신체, 나이, 지식 수준 등에 관계 없이 접근할 수 있는 정도를 나타냅니다.

단적인 예로, 시멘틱 태그를 사용하면 브라우저는 웹페이지를 해석할 수 있기 때문에 스크린 리더 등을 통해 시각 장애인들도 웹페이지를 사용할 수 있도록 만들 수 있습니다.

그러니 적재적소에 올바른 시멘틱 태그를 사용하는 것은 중요합니다.