시맨틱 마크업(Semantic Markup) 작성 기법

웹 개발을 할 때 시맨틱(Semantic) HTML을 사용하면 웹페이지의 구조를 더욱 명확하게 만들 수 있습니다.

시맨틱 HTML이 무엇인지, 왜 중요한지, 그리고 어떻게 활용하는지 살펴보겠습니다

 

✅ 시맨틱 HTML과 웹 접근성

시맨틱 HTML(Semantic HTML) 은 단순히 웹페이지의 구조를 만드는 것이 아니라,

의미를 부여하여 웹 접근성을 높이는 역할을 합니다.

별도의 스타일이 없더라도 HTML 자체만으로도 의미있는 문서가 되어야 합니다.

 

📌 웹 접근성이란?

웹 접근성(Web Accessibility)이란 모든 사용자가 장애 여부와 상관없이 웹을 이용할 수 있도록 보장하는 원칙입니다.

특히 시각 장애인을 위한 스크린 리더(Screen Reader)와 같은 보조 기술을 사용할 때 웹페이지의 구조를 명확히 이해할 수 있도록 돕는 것이 중요합니다.

 

📌 왜 시맨틱 HTML이 웹 접근성에 중요한가?

• 스크린 리더 지원: <div>만 사용된 문서는 스크린 리더가 이해하기 어렵지만, <header>, <nav>, <article> 등의 태그를 사용하면 콘텐츠를 보다 쉽게 파악할 수 있습니다.
• 키보드 내비게이션 향상: 의미 있는 태그를 사용하면 키보드만으로 페이지를 탐색하기 쉬워집니다.
• 검색 엔진 최적화(SEO) 강화: 검색 엔진이 페이지 구조를 올바르게 해석하여 검색 결과에 유리하게 작용합니다.

 

✅ 시맨틱 HTML이란?

시맨틱 HTML(Semantic HTML) 이란, HTML 요소를 단순히 배치하는 것이 아니라 의미에 맞는 태그를 사용하여 문서를 구조화하는 기법을 말합니다.

 

🚨 비시맨틱(Non-Semantic) HTML

<div id="header">사이트 제목</div>
<div id="nav">메뉴</div>
<div id="content">본문 내용</div>
<div id="footer">저작권 정보</div>

 

✅ 시맨틱(Semantic) HTML

<header>사이트 제목</header>
<nav>메뉴</nav>
<main>
  <section>
    <article>본문 내용</article>
  </section>
</main>
<footer>저작권 정보</footer>

 

🔹 시맨틱 HTML을 사용하면 코드만 봐도 웹페이지의 구조를 쉽게 이해할 수 있습니다.

 

✅ 주요 시맨틱 태그와 활용법

시맨틱 태그를 활용하여 뉴스 기사 스타일의 웹페이지 구조를 만들어 보겠습니다.

• <header> 사이트 제목과 헤드라인 포함
• <nav> 카테고리 메뉴를 포함한 내비게이션
• <main> 주요 뉴스 섹션
• <article> 각 뉴스 기사 블록
• <aside> 인기 기사 목록
• <footer> 저작권 정보

 

시맨틱 HTML을 사용하면 웹페이지의 의미와 구조가 더욱 명확해지고, 웹 접근성과 SEO가 향상됩니다.

앞으로 웹페이지를 만들 때는 단순히 <div> 태그를 사용하는 것이 아니라

의미에 맞는 시맨틱 태그를 적극적으로 활용해 보시기 바랍니다. 😊

 

 

- Dblisher -