시맨틱 태그
반드시 시멘틱 태그를 사용할 필요는 없다. 네이버 메인페이지도 개발자도구로 확인해보면 다 div로 만들어져있다. 하지만 시맨틱 태그가 있는 것을 알았다면 쓰임새에 맞는 태그를 사용하는 것이 좋다. 시멘틱 태그들 중에서 일부만 사용해도 좋으니 최대한 사용해보자.
시맨틱 태그 장점
- SEO 최적화에 유리. (SEO: Search Engine Optimization)
검색 엔진이 태그의 목적에 부합하게 설계되어있는 구조의 사이트에서 더욱 빨리 효율적으로 정보를 파악할 수 있어 검색 결과의 노출에 유리할 수 있게 해준다.
- 웹 접근성에 효율적
스크린리더(시각장애인을 위한 웹 서핑 프로그램)과 같은 환경에서 사이트 구조를 제대로 이해하여 사용자에게 정확한 내용을 전달할 수 있다.
- 유지보수의 용이성
태그의 이름만 보고도 어떤 영역인지 바로 확인이 가능. 해당 태그 영역의 특성에 맞는 작업을 구분하여 진행하기에 용이하다.
시맨틱태그의 종류
<header> 머리글, 제목, 헤더
<nav> 네이게이션, 목차, 리스트 등 다른 페이지로의 이동을 위한 링크 공간을 위주로 표현.
nav 태그를 여러 개 사용할 경우 각각 id 속성을 지정하면 네비게이션마다 다른 스타일을 적용할 수 있다.
<aside> 좌측과 우측 사이드 위치의 공간을 의미하며, 본문 외에 부수적인 내용을 주로 표현하는 태그
<section> 몇 개의 콘텐츠를 묶어서 섹션을 구분하는 용도의 태그로 주로 사용.
같은 테마를 가진 여러개의 콘텐츠의 그룹화
<article> 기사, 블로그 등 독립된 웹 콘텐츠 항목을 구성할때 주로 사용.
<footer> 바닥글, 문서 하단에 들어가는 정보 구분 공간을 표현하는 태그
<address> 콘텐츠 작성자나 사이트 소유자의 정보등을 부가적으로 담는 기능
<hgroup> 제목과 관련된 부제목을 묶는 태그
<main> 이름처럼 문서 <body>의 중심 주제, 주요 내용 또는 응용 프로그램의 중심 기능과 직접 관련되어나 확장되는 콘텐츠를 나타낸다.
<details> 주변 문맥에서 표시된 구절의 관련성 또는 중요성으로 인해 참조 또는 표기 목적으로 표시되거나 강조된 텍스트를 나타냅니다.
<figure> 이미지, 다이어그램, 사진 등 독립적인 컨튼츠 정의시 사용
<figcaption> <figure> 요소의 설명 캔션(caption) 정의
<mark> 현재 맥락에 관련이 깊거나 중요한 부분 강조
<time> 시간의 특정 지점 또는 구간, datetime과 같은 속성을 이용해 알림같은 기능 구현
<summary> details 요소에 대한 요약, 캡션 또는 범례.
안녕하세요!