[HTML] 시멘틱 태그란?(semantic tag) / 웹접근성을 고려한 마크업

 

 

 

 

 

 

 목차

• 시맨틱태그란(Semantic Tag)?  >>바로가기
• Semantic tag를 사용하면 좋은점 >>바로가기
• Semantic tag를 사용할 때 주의할점 >>바로가기
• Semantic tag 사용방법 및 종류 >>바로가기

 

 

 

1. 시멘틱 태그란? (Semantic Tag)

---

https://static.semrush.com/blog/uploads/media/cc/85/cc85d452a743e27f68d426df35e4da7d/EN-Semantic-Search-Non-Semantic.webp

 

"Semantic" 영어 단어의 뜻은 ‘의미의’, ’의미론적인’이라는 뜻을 가진 형용사이다.

따라서 시맨틱 태그란 의미가 잇는 태그를 말한다. 

 

 

 

 

2. Semantic Tag를 사용하면 좋은점

---

• 검색엔진 최적화(SEO): 검색엔진은 태그를 기반으로 페이지 내 검색 키워드의 우선순위를 판단한다.   따라서 제목 <h1></h1>, 중요한 단어<strong></strong>  또는 <em></em>을 사용하는 것 처럼 의미에 맞는 올바른 태그를 사용하는 것이 중요하다.
• 시각 장애가 있는 사용자가 스크린 리더를 사용하여 페이지를 탐색할 때 도움된다.
• 시멘틱 태그를 사용하여 마크업을 하면 수정할때 div를 탐색하는 것 보다 쉽게 찾을 수 있다. 
•  

 

 

 

3. Semantic Tag를 사용할때 주의할 점

---

• 사용할 태그를 결정하기 전 태그안에 포함된 데이터가 사용할 태그와 연관성이 높은지 적절한지를 판단한다.
• 사용할 HTML태그는 스타일 기반이 아닌 채워질 데이터 기반으로 결정되어야한다. (예: 페이지 상단 네비게이션은 <div>가아닌 <nav>로 사용하는 것을 추천)

 

 

 

4. Semantic Tag 사용 방법 및 종류

---

https://velog.velcdn.com/images%2Fsyoung125%2Fpost%2F21d321a8-5e5b-4f48-9635-3a217a25799d%2Fimage.png

 

 

 

1. <header> tag
   1. 페이지의 제목, 로고 등에 쓰인다.
2. <nav> tag
   1. Navbar 메뉴, 목차 등에 쓰인다. 
3. <aside> tag 
   1. 주로 사이드 바에 쓰인다.
4. <main> tag
   1. 페이지 내에 제일 메인이 되는 콘텐츠에 쓰인다. 
5. <section> tag
   1. 구체적인 시맨틱 태그가 없는 문서에 쓰인다.
   2. <section>에는 항상 섹션에 대한 제목이 있는게 좋다
6. <article> tag
   1. 페이지 내에 독립적으로 의미가 있는 일부분이며, 독립적으로 여러곳에 재사용 되는 내용에 사용된다.
   2. 게시물, 기사, 블로그 작성글, 카드 form, 위젯 등등에 쓰인다. 
7. <footer> tag
   1. copyright, 개인정보처리방침, 이용약관 등 포함되는 내용에 쓰인다. 

 

 

 

 

 

잘못된 정보에 대한 피드백은 언제나 환영입니다  (´▽`ʃƪ)♡