HTML 시멘틱 태그 (sementic)

uiux4503 2024. 11. 14. 11:02

SMALL

1. 시멘틱 태그 설명

- block element이며 사이트의 구조를 설계하기 위한 태그
- 사이트의 구조를 파악하기 용이할 수 있도록 만들어진 태그

2. 시멘틱 태그 종류

시맨틱 태그	설명
header	- 페이지의 머리글, 제목, 메뉴, 검색 관련, 유틸, 작성자의 이름 등으로 구성
nav	- 네비게이션, 목차, 리스트 등 다른 페이지로 이동을 위한 링크 공간
aside	- 간접 컨텐츠, 보조 컨텐츠 이며 대부분 옆에 위치하는 내용을 의미 - 좌측과 우측 사이드 공간 위치를 의미하며 본문 외 부수적인 내용을 주로 표현
main	- <body>의 중심 주제 - 메인 콘텐츠 영역 - 문서내에서 반드시 한 번만 사용 가능 - 다른 header, footer, nav, article, section, aside의 하위로 작성 불가능
section	- 카테고리별 섹션을 구분하는 용도로 사용 - 같은 콘텐츠가 여러개일 경우 그룹화 - 본문의 여러 내용을 포함하는 부분
article	- 기사, 블로그 등 텍스트 위주의 페이지 구성 - 본문의 주 내용이 들어감
footer	- 하단 바닥글 - 문서 하단에 들어가는 정보 구분 공간
address	- 콘텐츠 작성자사 사이트 소유자의 정보 등 부가적으로 담음
hgroup	- 제목과 관련된 부제목을 묶는 태그
figure	- 이미지, 다이어그램, 사진 등 독립적인 콘텐츠 정의 시 사용
figcaption	- <figure>요소의 설명을 정의 시 사용

3. section과 article의 차이점
- <section>은 주제별로 콘텐츠를 묶을 때 사용
- <article>은 독립된 내용의 실제 콘텐츠를 넣을 때 사용
- <section>은 header, footer와 구분하기 위해 사용하며 <article>은 실제 내용이 들어감

4. 시맨틱 태그 작성

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>시맨틱 요소 설명</title>
</head>
<body>
 <header> <!-- 상단 제목, 메뉴 등을 위해 사용 -->
    <h3>제목요소 사용가능</h3>
    <p>로고나 아이콘 사용가능</p>
    <nav>상단 메뉴를 넣을 때 사용</nav> <!-- 메뉴를 넣을 때 같이 사용하는 경우도 종종 있음 -->
 </header>
 <main> <!--  header, footer, nav, article, section, aside의 하위로 작성 불가능 -->
    메인 콘텐츠 영역
 </main>
 <section> <!-- header와 footer 영역을 나누기 위해 사용 -->
    <aside>
        <p>좌측 혹은 우측 사이드 공간 위치</p>
    </aside>
    <article>
        <p>실제 내용</p>
    </article> <!-- 실제 내용이 들어갈 때 사용 -->
 </section>
 <footer> <!-- 하단의 정보를 작성 할 때 사용 -->
    <address>사이트 정보 연락처 정보</address> 
 </footer>
</body>
</html>

- <body>태그 안에 <main>은 <section> 하위 작성이 불가능 하여 따로 콘텐츠로 사용 가능
- <article>,<aside>는 <section>태그 안에 사용이 가능하며 다른 방법으로도 사용 가능
- <header>안에 <nav>도 하위로 작성이 가능하며 다른 방법으로도 사용 가능