시맨틱태그란?

시멘틱 태그

시맨틱 태그란?

시맨틱 태그(Semantic Tags)는 HTML에서 웹 페이지의 구조와 콘텐츠에 대한 명확한 의미를 담고 있는 태그들을 의미합니다. 이 태그들은 페이지의 각 부분이 무엇을 나타내는지 명확히 정의하여, 개발자와 사용자 모두에게 더 나은 웹 경험을 제공합니다.

시맨틱 태그의 특징

• 가독성: 시맨틱 태그는 페이지 구조를 더 이해하기 쉽게 만듭니다. 예를 들어, header는 사이트의 헤더 영역을 나타내고, footer는 푸터를 나타내기 때문에 코드의 가독성이 높아집니다.
• 유지 보수 용이: 웹 페이지를 수정할 때 각 부분의 역할이 명확히 구분되므로, 필요한 부분만 쉽게 수정할 수 있습니다.
• 검색엔진 최적화(SEO): 검색엔진은 시맨틱 태그를 활용하여 콘텐츠의 의미를 더 잘 이해합니다. 예를 들어, article 태그는 독립적인 콘텐츠 블록을 의미하여 검색엔진이 해당 내용을 잘 인식하게 돕습니다.
• 웹 접근성 향상: 스크린 리더와 같은 보조 기술이 시맨틱 태그를 기반으로 콘텐츠를 더 정확하게 해석하고 전달할 수 있습니다. 예를 들어, nav태그는 내비게이션 링크가 포함되어 있다는 것을 명시해, 시각장애인 사용자가 이를 쉽게 파악할 수 있게 합니다.

태그의 종류

• header: 페이지나 섹션의 상단 영역을 나타냅니다. 보통 로고, 제목, 내비게이션 등을 포함합니다.
• footer: 페이지나 섹션의 하단 영역을 나타냅니다. 저작권 정보, 링크, 연락처 정보 등이 포함됩니다.
• main: 페이지의 주요 콘텐츠를 포함하는 영역입니다. 이 태그는 페이지에서 핵심적인 내용을 다루며, header, footer, main, 등과는 구별됩니다.
• aside: 문서의 주요 내용과 간접적으로 관련된 부가적인 콘텐츠를 나타냅니다. 예를 들어, 사이드바, 광고, 관련 링크 등을 넣을 때 사용합니다.
• nav: 내비게이션 메뉴를 나타냅니다. ul, ol, 과 함께 사용하여 링크 목록을 정의할 수 있습니다.
• article: 독립적인 콘텐츠 블록으로, 각기 독립적으로 구분될 수 있는 문서나 글을 묶을 때 사용합니다. 예를 들어, 블로그 포스트, 뉴스 기사 등이 이에 해당합니다.
• section: 문서 내에서 주제를 구분하는 섹션을 정의합니다. article 보다 큰 범위의 콘텐츠를 다룰 때 사용됩니다.
• h1~h6: 제목 태그로, 페이지의 제목이나 각 섹션의 제목을 나타냅니다. h1이 가장 중요한 제목이며, h6는 가장 덜 중요한 제목입니다.
• a: 링크를 나타내는 태그로, 다른 페이지나 리소스로 이동할 때 사용합니다.
• button: 버튼을 나타내며, 사용자와의 상호작용을 위한 액션을 제공합니다. 예를 들어, 폼 제출, 로그인, 회원가입 등의 동작을 처리할 때 사용됩니다.

요약

시맨틱 태그는 웹 페이지의 구조와 콘텐츠를 명확히 하고, 개발자의 이해도와 가독성을 높이며, SEO와 웹 접근성을 향상시킵니다. header, footer, main, aside, nav, article, section 등은 각기 특정한 목적을 가진 태그로, 이들을 적절히 활용하는 것이 중요합니다.

예시

이 문서의 내용은 "시맨틱 태그란 무엇인가?"에서 참고하였습니다.

사진 출처: ozcoding school

틀린 점이 있다면 알려주세요!