HTML5 시맨틱 태그 완벽 정리: 의미와 올바른 사용법

HTML5 시맨틱 태그 완벽 정리: 의미와 올바른 사용법

HTML5 시맨틱 태그는 단순한 디자인 효과를 넘어, 콘텐츠의 의미와 구조를 명확히 전달합니다. 

<strong>, <b>, <em>, <i>, <figure>, <figcaption> 등 겉모양은 비슷하지만 의미가 다른 태그들을 올바르게 사용하면 SEO와 웹 접근성 모두 향상됩니다.

➰➰➰

✏️ 텍스트 강조 태그 비교 

✅ 글자를 굵게 표시하는 strong vs b 

✔ <strong>: 의미적 강조, 스크린리더에서도 강조 

✔ <b>: 단순 시각적 굵기 효과 

✨ 의미 전달이 중요한 메시지는 <strong>, 단순 시각적 강조 효과는 <b> 

✅ 글자의 기울임을 표시하는 em vs i 

✔ <em>: 의미적 강조(Emphasis), 브라우저 기본 스타일로 기울임 표시, 스크린리더에서도 강조 읽음 

✔ <i>: 외래어, 용어, 아이콘 등 특별한 텍스트 표현, 기울임은 기본 시각 효과일 뿐 의미는 없음 

✨ 의미 강조에는 em, 특별한 텍스트 표현에는 i 

✨ 텍스트 강조 시 단순 CSS만 사용하지 말고, 의미에 맞는 시맨틱 태그(<strong>, <b>, <em>, <i>)를 사용하면 의미 전달과 웹 접근성을 동시에 강화할 수 있습니다.

✏️ 콘텐츠 구조 태그 비교 

✅ section vs article vs div 

✔ <section>: 주제별 구획 

✔ <article>: 독립적으로 배포 가능한 콘텐츠 

✔ <div>: 의미 없는 단순 묶음 

✨ 레이아웃은 <div>, 콘텐츠는 <section>·<article> 

✅ address

✔ 문서/사이트 작성자·소유자의 연락처 의미 

✨ 사이트 하단의 “회사 정보”에는 <address>태그 활용이 더 의미 

✅ small 

✔ 부가 정보, 저작권, 주석 등 의미 있는 보조 텍스트 

✨ 단순히 font-size로 축소시키는 것보다 의미있는 보조 텍스트(copyright 등)는 <small> 태그 사용을 권장

✅ figure vs img

✔ <img>: 단순 이미지 삽입 

✔ <figure>: 이미지 + 설명(<figcaption>) 포함 

✨ 설명이 필요한 콘텐츠에는 figure + figcaption 태그 활용 

➰➰➰ 

시맨틱 태그를 올바르게 활용하면 웹 접근성과 SEO는 물론, 콘텐츠 구조와 코드 유지보수성까지 강화할 수 있습니다. 

실무에서 즉시 활용 가능한 반응형 디자인 템플릿과 HTML 소스코드를 디자인키트에서 만나보세요!

제공되는 HTML 소스코드는 웹 접근성과 웹 표준, SEO를 고려한 시맨틱 마크업 기반으로 제작되어, 프로젝트에 바로 적용할 수 있습니다.

✨ 관련 링크 ✨

시맨틱 태그 완벽 설명: 웹사이트구조와 SEO 향상 비결