HTML 시멘틱 태그 제대로 사용하기

안녕하세요.

오늘은 HTML 시멘틱 태그(Semantic Tag)에 대해서 글을 써보겠습니다. 

 

시멘틱 태그는 웹(Web)을 의미 있게 만드는 역할을 합니다. 

아래와 같은 이유로 적절한 시멘틱 태그를 사용하는 것은 매우 중요합니다.

 

1. 웹 접근성
2. SEO(Search Engine Optimization) : 검색엔진 최적화 
   검색 결과 상위에 문서를 노출하기 위해서 SEO 최적화는 필수입니다. 
3. 유지 보수
   시멘틱 태그를 적절히 사용하면, 코드의 가독성이 올라가 유지 보수에도 도움이 됩니다. 

페이지의 모든 태그를 <div>로 사용하는 것보다 의미를 가진 시멘틱 태그를 사용하는 것이 좋습니다. 

 

주요 시멘틱 태그

Tag	용도
<header>	문서의 제목 및 로고 등
<nav>	페이지 이동 및 주요 메뉴
<main>	페이지의 주요 내용, 페이지 내 한번만 사용
<article>	<main>의 개별적 독자적 내용
<section>	<article>안의 각 단락
<aside>	본문과 직접적 관련 없는 내용
<footer>	아래쪽에 위치할 문서와 관련이 적은 부가정보

---

이 밖에도, 여러 시멘틱 태그들이 있습니다. 

특히 헷갈리기 쉬운 태그들은 아래와 같습니다. 

 

태그

Tag1	용도	vs	Tag2	용도
<em>	강조 이탤릭체		<i>	시각적 이탤릭체
<strong>	강조 볼드체		<b>	시각적 볼드체
<button>	특정한 액션 유도		<a>	페이지 이동

---

 

리스트 태그 같은 경우도 혼용해서 쓰는 경우가 많은데, 용도에 맞게 사용하면 좋을 것 같습니다. 
(저도 개발하면서 <dl>을 써야 하는데 무심코 <ul>을 쓰는 경우가 많았네요 ㅜㅜ)

 

리스트 태그

• <ol> : 순서가 있는 리스트
• <ul> : 순서가 없는 리스트
• <dl> : 정의 및 설명 리스트

 

---

테이블 태그도 사용여부를 고민할 때가 많은데, 다음과 같은 기준으로 사용하면 좋습니다. 

 

테이블 태그 사용여부 판단

• <table> : 행과 열이 있는 데이터 
• CSS(grid, flex) : 적당한 위치에 요소 위치

 

---

오늘 포스팅은 여기까지 입니다.