Front/HTML
HTML - HTML5 시멘틱 구조 태그
by Hyeon_
2021. 12. 5.
HTML5 시멘틱 구조 태그
- 시멘틱(Semantic) : 의미의, 의미론적인
- 역할과 기능에 맞는 요소로 영역 구분해서 사용
- 각 요소(태그)가 의미가 있다는 것
- <header> : 헤더(제목)
- <nav> : 내비게이션(메뉴)
- <aside> : 사이드 바
- <section> : 컨텐츠(내용)
- <article> : 컨텐츠 안의 내용 (컨텐츠 영역을 세분화)
- <footer> : 푸터(주소 / 연락처 / 저작권 등)
HTML5 시멘틱 구조의 특징
- HTML4로 만든 웹 문서의 결과 화면이나 HTML5로 만든 웹 문서의 결과 화면만 보면 웹 브라우저에 보이는 모습은 동일하지만
- 실제로 웹 브라우저에서 문서를 처리할 때 큰 차이 존재
HTML5 시멘틱 구조의 장점
- 소스만으로도 문서 내용 쉽게 이해
- 태그만 보고도 어느 부분이 제목이고, 메뉴이고, 실제 내용인지 쉽게 구분
- 편리한 검색
- 사이트 검색 시 필요한 내용을 정확하게 찾을 수 있어 편리
- <header>나 <nav> 태그 영역은 검색하지 않고 <section>이나 <article> 태그 영역만 찾아서 검색
- 뛰어난 웹 접근성
- 시각 장애인들이 우베 보조 기구로 사용하는 화면 판독기에서 시멘틱 태그를 통해 제목과 내용을 구별하여 사용자에게 정확한 내용 전달 가능
- 다양한 장치에 통일된 결과 제공
- 태그의 역할이 정해져있기 때문에 어떤 장치에서든 동일하게 문서 해독 가능
<body>
<div id="wrap">
<header>
<div id="topMenu">
로그인 이벤트 장바구니 고객센터 회원가입
</div>
</header>
<nav>
<div id="menuBox">메뉴</div>
<div id="subMenuBox">서브 메뉴</div>
</nav>
<section>
<article>
<div id="slideShowBox">슬라이드 쇼</div>
</article>
<article>
<div id="content">메인 내용</div>
</article>
</section>
<footer>
<div id="companyInfo">회사정보/Copyright</div>
</footer>
</div>
</body>
