시맨틱(semantic) 태그
시맨틱태그의 의미
'의미를 가진다' 각 태그가 스스로 의미를 가진다
시맨틱태그가 필요한 이유
1. 접근성을 높이기 위해서 : 소스 코드만으로 본문, 제목 등 해당부분을 쉽게 파악 할 수 있다.
2. 문서 구조를 정확하게 나눠 놓으면 여러 기기의 다양한 화면에서 웹 문서를 표현하기가 쉽다.
3. 검색엔진에 본문에 맞는 키워드가 알맞게 상위노출 될 수 있다.
주요 시맨틱태그
1. <header> : 특정 영역의 머릿말로 사이트소개, 메인메뉴(상단메뉴), 사이트로고 등의 부분이다. 주로 맨 위쪽이나 왼쪽에 위치한다.
2. <nav> : 같은 웹 문서 안에서 다른 위치로 연결하거나 다른 웹 문서로 연결하는 링크를 만든다. 보통 상단메뉴와 연결하는 사이트의 메뉴(좌측) 부분으로 헤더나 푸터, 사이드 바 안에 포함 할 수도 있고 독립해서도 사용 할 수 있다. 필수적으로 사용해야 하는건 아니다.
3. <main> : 메인 콘텐츠가 들어 있는 부분으로, 여기에는 메뉴, 사이드바, 로고같은 웹마다 똑같이 들어 있는 정보는 넣을 수 없고, 웹 문서에서 한 번만 사용 할 수 있다.
4. <article> : 실제적인 자세한 문서내용으로 내용이 많으면 여러개를 사용 할 수 있다.
5. <section> : 문서에서 콘텐츠 영역으로 몇 개의 콘텐츠를 묶는 용도로 사용한다. 소제목이 있는 단락의 구분으로 눈에 보이지 않는 논리적인 단위이다. 여러개를 사용 할 수 있다.
6. <footer> : 웹 문서 맨 아래쪽에 있는 푸터 영역은 사이트 제작 정보나 저작권 정보, SNS정보, 연락처 등을 넣는다. footer영역에는 header, section, article 등 다른 시맨틱 태그를 모두 사용 할 수 있다.
7. <aside> : 본문 내용 외에 왼쪽, 오른쪽 혹은 아래쪽에 사이드 바를 만든다. 필수 요소는 아니다.
<div>태그
시맨틱 태그가 나오기 전에 헤더나 내비게이션, 푸터 등을 구별 할 때 사용하던 태그로 아직도 많이 사용한다. css에서 스타일을 적용 할 때 오직 디자인 용도로 아무 의미 없이 사용된다.
시맨틱(semantic) 태그 사용법
<body>
<header><!-- 1.머리말(body태그) -->
<h1>매일매일 개발슝이</h1>
<h3>매일매일 개발 공부를 합니다.</h3>
</header>
<nav><!-- 2.상단메뉴와 연결(링크) -->
<ul>
<li><a href="#">프론트엔드 공부</a></li>
<li><a href="#">백엔드 공부</a></li>
<li><a href="#">웹 개발 프로젝트</a></li>
</ul>
</nav>
<main class="contents"><!-- 3.메인 콘텐츠가 들어 있는 부분 -->
<section><!-- 5.소제목을 가진 단략(section) 묶어주는 논리적인 단위 -->
<header><!--1.머리말(section)-->
<h2>html</h2>
</header>
<article><!--4.독립적인 콘텐츠 내용-->
<h4>태그</h4>
<p> 태그란 무엇이냐면~~ </p>
<h4>html의 구조</h4>
<p> 기본적인 구조는~~ </p>
<h4>많이 사용되는 태그</h4>
<p> ~~ 이런 태그들이 많이 사용된다.</p>
</article>
</section>
<section><!--5.여러개의 section이 올 수 있다.-->
<header>
<h2>css</h2>
</header>
<section><!--5.section 내부에 또 다른 여러개의 section태그를 넣을 수 있다.-->
<h4>css란</h4>
<p> css가 무엇이냐면~~ </p>
</section>
<section>
<h4>css 예시</h4>
<p> css 사용 예시 </p>
</section>
</section>
</main>
<footer><!-- 6.웹문서의 다양한 정보-->
<p><br><br><time datetime="2021-08-31">2021년 8월 31일</time>에 작성되었습니다.</p>
<address>개발슝이@tistory.com</address>
</footer>
</body>'프로그래밍언어 > HTML' 카테고리의 다른 글
| [HTML] HTML 텍스트 표현 (0) | 2022.03.04 |
|---|---|
| [HTML] HTML 개요 (0) | 2022.03.04 |
| [HTML] KIC campus 수강 내용 정리 (0) | 2021.08.31 |
| [HTML] HTML 태그 정리 (0) | 2020.11.18 |
| [HTML] HTML문서에 다른 사람들이 만들어 놓은 기능 추가하기(동영상, 댓글, 채팅, 방문자분석) (0) | 2020.11.17 |
