DH의 개발 공부로그
[HTML] #3 시맨틱 마크업 Semantic Markup 본문
728x90
시맨틱 마크업 Semantic Markup
시맨틱(Semantic)이란 ‘의미론적인’의 뜻을 가지고, 마크업(Markup)이란 HTML 태그로 문서를 작성하는 것을 말합니다. 즉 시맨틱 마크업은 작업에 있어서 태그들이 의미를 잘 전달 할 수 있도록 문서를 작성하는 것을 말합니다.
html5에 시맨틱 웹을 위해 관련 태그들이 제공됩니다.
시맨틱 웹을 위한 태그 | 설명 |
header | 말그대로 문서의 헤더영역을 의미합니다. 페이지의 머리글, 제목, 로고, 메뉴, 검색 관련, 유틸, 작성자의 이름 등등으로 구성합니다. |
nav | 페이지의 내비게이션 영역. (사이트 내, 외부로 이동). 메뉴, 목차, 색인 등등 |
main | 메인 컨텐츠 영역. 문서 내에서 *반드시* 한 번만 사용합니다. 다른 header, footer, nav, article, section, aside의 하위로 작성할 수 없습니다. |
section | 본문의 여러 내용(article)을 포함하는 부분을 의미합니다. |
article | 본문의 주 내용이 들어가는 부분을 의미합니다. |
aside | 간접 컨텐츠, 보조 컨텐츠를 의미하며, 대체적으로 옆에 위치하는 내용의 부분을 의미합니다. |
footer | 하단 바닥글을 의미합니다. 주로 들어가는 정보는 회사정보, 저작권, 연락처 등등이 있습니다. |
웹페이지의 각 부분을 시맨틱 웹 태그로 구성하면, 검색엔진등에서 각 부분을 보다 잘 이해 할 수 있습니다.
시맨틱 웹 태그들을 이용하여 웹페이지의 각 부분들을 구성하는데에만 사용되며 구성하는 위치나 표현법은 전적으로 css를 통해 작성해야 합니다.
예전 방식의 구조 표현
<div id="container" class="wrapper">
<div id="header">
<div id="title">페이지의 제목</div>
<div id="nav">
페이지의 내비게이션 영역
<div class="gnb">메뉴</div>
</div>
</div>
<div id="contents">
<div class="main_cont">
메인 컨텐츠 영역
<div class="txt_box">내용</div>
</div>
<div class="side_cont">사이드 내용</div>
</div>
<div id="footer">
하단바닥글
<address>주소 & 연락처</address>
</div>
</div>
현재 방식의 구조 표현
<div id="container" class="wrapper">
<header>
<h1>페이지의 제목, 로고</h1>
<nav>
페이지의 내비게이션 영역.
</nav>
</header>
<main>
<section>일반적인 문서 영역. (제목태그와 함께 작성 권장.)
<article>독립된 컨텐츠. (게시판, 블로그, 뉴스, 매거진...)</article>
</section>
<aside>간접 컨텐츠. 보조 컨텐츠.</aside>
</main>
<footer>
하단 바닥글. 회사정보, 저작권, 연락처...
</footer>
</div>
728x90
'HTML & CSS' 카테고리의 다른 글
[CSS] 블록(block)요소 안에 img 태그의 하단 여백 없애기 (0) | 2022.04.15 |
---|---|
[HTML] #5 하이퍼링크를 설정하는 태그 a & 절대경로, 상대경로 (0) | 2022.03.29 |
[HTML] #4 리스트 태그 ol, ul, li, dl, dt, dd, 컨텐츠 분할을 위한 태그 div, span (0) | 2022.03.28 |
[HTML] #2 텍스트 태그 h1~h6, p, br, strong, em (0) | 2022.03.23 |
[HTML] #1 HTML 기본정리 (0) | 2022.03.22 |
Comments