2024-10-08
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--
시맨틱 태그(Semantic Tag)
- 시맨틱 : 의미의, 의미론적인 이라는 뜻을 가지고 있음.
- 즉, 시맨틱 태그란 의미가 있는 태그라는 뜻.
- 인터넷의 발전으로 방대한 양의 웹 문서가 생기면서, 제각기
일관적이지 않게 생성된 문서 구조로 인해 웹에서 원하는 정보를
찾으려면 시간이 많이 걸리고 어려움을 겪게 됨.
- 이러한 웹 문서를 지양을 하고 의미론적인 태그를 만들기 위해서
나온 것이 시맨틱 테그임.
- 웹 문서의 구조를 설계하기 위한 태그임.
1. header 태그
- 브라우저의 상단에 존재하는 태그.
- 웹 문서의 머릿말에 해당이 됨.
- 회사의 로고, 회원가입, 로그인을 할 수 있는 태그.
2. hgroup 태그
- 제목과 부제목을 묶어서 나타내 주는 태그.
- 즉, <h1>, <h2>,...... 이렇게 연속해서 나올 때 묶어주기 위한 태그.
- 페이지 전체 구조에 대한 개념으로 쉽게 눈에 들어오게 하는 역할을 담당함.
3. footer 태그
- 브라우저의 하단에 존재하는 태그.
- 일반적으로 저작권, 회사의 주소, 연락처, 약관 등에 대한 정보를
나타내는 태그.
4. article 태그
- 일반적으로 웹 문서의 본문에 해당하는 내용을 작성하는 태그.
- 개별 기사를 지정할 때 사용함. 주로 특정 기사의 미리 보기,
썸네일, 제목, 본문을 지정할 때 사용함.
5. section 태그
- 문서의 일반적인 영역을 설정하는 태그. article 태그 사용이 가능함.
- 연관성이 있는 콘텐츠 여러 개를 그룹화 할 때 사용함.
주로 연관된 기사 제목 여러 개를 해당 태그를 사용하여
그룹으로 지정할 때 사용함.
6. aside 태그
- 문서의 별도 영역 컨텐츠 영역.
- 보통 광고나 기타 링크 등의 사이드 바를 설정하는 태그.
7. nav 태그
- 다른 페이지 링크를 제공하는 태그.
- 보통 메뉴(home, content 등등) 설정 시 사용함.
-->
</body>
</html>
'HTML > 기초 내용 정리' 카테고리의 다른 글
| HTML(Exam)_02 (0) | 2024.10.12 |
|---|---|
| HTML(Exam)_01 (0) | 2024.10.11 |
| HTML_33 (0) | 2024.10.11 |
| HTML_32 (0) | 2024.10.11 |
| HTML_31 (0) | 2024.10.11 |