" 시멘틱 태그 "
: 시멘틱 태그란 HTML의 구조를 설계하는데 있어 의미에 맞게 태그를 작성하여
사이트의 구조를 파악하기 용이할 수 있도록 도와주기 위해 만들어진 태그입니다
1. body
- html 문서의 내용을 나타냅니다.
- 한 문서에 하나의 <body> 요소만 존재 할 수 있습니다.
2. header
- 웹 문서의 머리글을 정의합니다
-제목, 로고, 검색, 폼 작성자 이름 등의 요소도 포함할 수 있습니다.
<header>
<!--로고-->
<h1><img src="img/logo.png" alt="logo"></h1>
<!--제목-->
<h1>Rim' blog<h1>
</header>
3. section
- 웹 문서의 한 부분, 한 장을 구분하는데 사용합니다.
- 주제나 챕터 그룹화된 엘리먼트들을 묶는 컨테이너 역할입니다.
- 문서 내 영역의 범위를 한정하며, 문서의 아웃라인을 구성합니다.
<section>
<h2>rim</h2>
<img src="img/hello.jpg"></img>
</section>
4. article
- 문서, 페이지 또는 사이트 안에서 독립적으로 구분해 단독으로 배포할때
- 게시판이나 블로그 글, 뉴스 기사 등에 쓰입니다.
<article>
<h1>사과</h1>
<p>사과는 사과나무의 열매로, ....</p>
</article>
5. nav
- 문서 전체 혹은 section 의 네비게이션 영역을 표현합니다
- 문서의 부분 중 현재 페이지 내 , 또는 다른 페이지로의 링크를 보여주는 구획을 나타냅니다.
- 메뉴, 목차 등
<nav>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</nav>
6. footer
- 웹 문서의 바닥글을 정의합니다.
- 하나의 HTML 문서에는 여러 개의 <footer> 요소가 포함될 수 있습니다.
- 사이트맵, 연락처, 저작권정보, 연관페이지 등
<footer>
<address>
<p>서울시 00구 00동</p>
</address>
</footer>
7. address
- 문서를 제공하는 저자의 연락처 정보 등의 부가정보를 표현합니다.
<footer>
<address>
|(주)rim's devlop <br>
서울시 00구 00동
</address>
</footer>
8. aside
- 문서의 주요 내용과는 별개의 영역을 정의하는데 사용합니다.
- 광고, 즐겨찾기 링크 등과 같이 주변의 내용과는 별도로 다뤄지는 영역을 지정합니다.
'web > HTML' 카테고리의 다른 글
| [ HTML ] dl/ul/ol - list 정리 글 ! (0) | 2022.04.11 |
|---|---|
| [ HMTL5 ] 메타태그란 ? 카톡으로 URL 링크 공유 시 이미지 설정 방법 ! (0) | 2022.03.25 |