컨텐츠 구분에 사용되는 태그
아래 태그는 body내 위치합니다.
태그 예시
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>기본 포멧 설명</title>
<meta name="author" content="rosa.kim">
<meta name="description" content="rosa.kim's test">
<meta name="viewport" content="width=device-width, initial-scal=1.0">
<link rel="stylesheet" href="./main.css">
<script src="./main.js"></script>
</head>
<body>
<header>
<p>헤더 내 텍스트 영역</p>
<nav>네비게이션 영역</nav>
</header>
<div>
<main>메인 영역</main>
<article>아티클 영역</article>
</div>
<section>
<h1>제목1</h1>
<p>섹션 영역</p>
</section>
<aside>사이드 영역</aside>
<footer>
<p>푸터 내 텍스트 영역</p>
<address>010-1234-5678</address>
</footer>
</body>
</html>
태그 설명
| 태그 | 의미 |
| header | 문서의 헤더를 지칭. GNB 영역을 제작할 시 사용 |
| nav | 문서의 부분 중 네비게이션(현재 페이지 내, 또는 다른 페이지로의 링크)를 보여주는 구획 |
| div | division의 약자. 의미 없이 범위를 묶는 용도로 사용함 |
| main | 문서의 주요 컨텐츠를 지칭. 한 문서에 하나의 태그만 허용 |
| article | 문서, 페이지, 애플리케이션, 또는 사이트 안에서 독립적으로 구분해 배포하거나 재사용할 수 있는 구획 |
| section | HTML 문서의 독립적인 구획을 나타냄. 더 적합한 의미를 가진 요소가 없을 때 사용. 보통 h태그를 포함. |
| h | <h1>–<h6> 요소는 6단계의 구획 제목을 나타냄 구획 단계는 <h1>이 가장 높고 <h6>은 가장 낮음 |
| aside | 문서의 주요 내용과 간접적으로만 연관된 부분을 나타냄. 광고/배너 영역 |
| footer | 문서의 푸터를 지칭. 주로 작성자의 정보가 삽입 됨 |
| address | HTML 요소의 사람, 단체, 조직 등에 대한 연락처 정보를 나타냄 |
#HTML 태그 참고서
MDN Web Docs
Hacks Blog Read more at hacks.mozilla.org For the last couple of years, we've run the MDN Web Developer Needs Assessment (DNA) Report, which aims to highlight the key issues faced by developers building web sites and applications. This has proved to be an
developer.mozilla.org
'달밤에 코딩하기 > HTML CSS 공부하기' 카테고리의 다른 글
| #9 - HTML 태그 - 이미지/동영상/오디오 (0) | 2021.04.18 |
|---|---|
| #8 - HTML 태그 - 텍스트 (0) | 2021.04.09 |
| #6 - HTML 태그 -head (0) | 2021.04.06 |
| #5 - HTML 작성 준비 (0) | 2021.04.04 |
| #4 - CSS 기본 문법 (0) | 2021.04.04 |
