태그 (Tag) : 브라우저가 웹 문서를 이해할 수 있도록 컨텐츠를 목적에 맞게 분리하는 규칙
<!DOCTYPE html>
// <!DOCTYPE>문서 타입을 지정
<html lang="ko">
<head>
// 문서에 필요한 외부 파일, 설정
<meta charset="UTF-8">
// 해당 문서의 인코딩 방식 지정, UTF-8 : 전세계 표준 인코딩 방식
<meta http-equiv="X-UA-Compatible" content="IE=edge">
// 익스플로러의 버전 최신으로 지정
<meta name="viewport" content="width=device-width, initial-scale=1.0">
// 브라우저 종류에 따라 동일한 퀄리티 , 반응형
<title>Hi :) </title>
// 브라우저 상단 탭 문서의 제목
</head>
<body>
// 출력을 담당하는 콘텐츠 태그
</body>
</html>
시맨틱 태그 : 웹페이지를 제작할 때 HTML5의 시맨틱 태그를 이용해 목적에 맞게 화면을 구분해준다.
| 종류 | 설명 |
| <header> | 웹 문서의 머리말 영역 |
| <nav> | 웹 문서에서 링크 등의 메뉴 영역 |
| <figure> | 웹 문서에서 사진, 동영상 등의 멀티 미디어를 담는 영역 |
| <main> | 본문 |
| <aside> | 본문과 연관성이 적은 외부 영역 (장바구니 등) |
| <section> | 웹 문서의 특정 영역을 그룹화 |
| <article> | 기사나 개별 콘텐츠를 담는 영역 |
| <footer> | 웹 문서의 꼬리말 영역 |
EX)
<body>
<header>
<nav></nav>
</header>
<figure></figure>
<section>
<article></article>
<article></article>
</section>
<footer></footer>
</body>728x90
반응형
'Programming > CSS&Html&JS' 카테고리의 다른 글
| [Html] 멀티미디어 콘텐츠 태그 (0) | 2023.02.12 |
|---|---|
| [Html] 폼 태그 (0) | 2023.02.12 |
| [html] 목록 태그 (0) | 2023.02.12 |
| [Html] 서식 태그 (0) | 2023.02.12 |
| 무료 HTML 템플릿 사이트 6가지 추천 (0) | 2022.06.28 |
댓글