HTML의 기본 구조
HTML 작성을 위해 꼭 있어야 하는 구조
<!DOCTYPE HTML>
<html>
<head>
<title>HTML 기본구조</title>
<meta charset="UTF-8">
</head>
<body>
HTML 5 구조
</body>
</html>
<!DOCTYPE HTML> : HTML5를 사용함을 브라우저에 선언한다.
<html> : 전체 html 문서를 감싸는 태그.
<head> : html 문서에 대한 정보를 나타냄. 하나만 존재해야 하고, html 바로 아래 위치해야 함
<title> : head 안에 들어가는 태그, 제목 표시줄의 내용을 나타냄
<meta> : meta 역시 head 안에 들어감. 문서에 대한 설명 표시. 사람에겐 보이지 않고 브라우저만 읽을 수 있음. charset="utf-8"은 브
라우저에게 한글 인코딩을 UTF-8로 설정하라고 지시함. 이 부분이 있어야 한글이 깨지지 않는다.
<body> : html 문서에서 실제적으로 화면에 보여지는 부분. 하나만 존재. html바로 아래, head 다음에 위치해야 함.
HTML5 개요
HTML5는 웹 상에서 콘텐츠를 구성하고 보여주기 위한 HTML 언어의 최신 표준 권고안이다.
HTML5는 HTML 4.01, XHTML과는 달리 대체하는 HTML의 차세대 표준이다.
HTML Semantic
HTML5에서는 웹페이지의 레이아웃만을 위한 별도의 새로운 Tag들을 제공한다. 이 Tag들을 Semantic Tag라고 함.
의미(Semantic) Tag
의미 Tag란 웹브라우저나 개발자에게 명확한 의미를 전달하는 Tag이다. 예를 들어 <header> Tag를 보면 의미적으로 헤더를 정의하고 웹브라우저, 개발자에게 헤더부분이라고 명시하는 역할을 한다. 하지만 header Tag를 쓴다고 해서 레이아웃을 만들어 주진 않음. CSS로 작업해야 함.
1. header: 사이트 제목, 또는 본문 헤더
<header> 요소는 다음을 포함한다.
- 하나 이상의 제목 요소(<h1>-<h6>)
- 로고 또는 아이콘
- 저자 정보
section이나, article, aside 등으로 묶어놓은 섹션 안의 헤더 용도로 사용해도 된다.
2. footer: 바닥글
태그는 문서 또는 섹션의 바닥 글을 정의한다. 요소는 포함 요소에 대한 정보를 포함. 요소는 다음을 포함한다.
- 저자 정보
- 저작권 정보
- 연락처 정보
- 사이트 맵
- 위로 가기 링크
- 관련된 문서
하나의 문서에 여러 개의 요소를 포함 할 수 있다.
3. section: 하나의 주제로 구성된 콘텐츠 또는 애플리케이션 블럭
하나의 주제와 관련있는 콘텐츠의 블럭. 웹 페이지를 의미적으로 각각의 파트로 구분하기 위해 쓴다.
4. article: 본문 콘텐츠로서 주변과 분리해도 하나의 완전한 콘텐츠가 되는 영역
웹페이지 내용에 사용하는 태그. 문서, 페이지, 사이트에서 독립적으로 배포 혹은 재사용 할 수 있는 섹션에 사용한다.
주로 사용 되는 예:
- 포럼 게시물
- 블로그 게시물
- 뉴스 기사
- 논평
5. nav: 내비게이션 링크 그룹
nav 태그는 일련의 탐색 링크를 정의한다. 문서의 모든 링크가 요소 내에 있어야하는 것은 아니다. 요소는 탐색 링크의 주요 블록에만 사용된다. 사용 중지 된 사용자를 위한 화면 판독기와 같은 브라우저는 이 요소를 사용하여 이 콘텐츠의 초기 렌더링을 생략할지 여부를 결정할 수 있다.
6. aside: 주요한 내용이 아닌 부가적인 콘텐츠
본문의 주요 부분을 표시하고 남은 부분을 설명하는 태그. 특별한 일이 아니면 사이드바나 광고창 등 중요하지 않은 부분에 사용됨.
References
Web Publishing - HTML5에서 추가된 것들
All-round programmer HTML5에 추가된 Element들 그리고 문서의 구조화
https://wikidocs.net/86172 : HTML 기본구조, Semantic
'공부 정리' 카테고리의 다른 글
| 22.11.26 : CRA없이 프로젝트 생성하기-3 (웹팩 설정, 주요 속성) (0) | 2022.11.26 |
|---|---|
| 22.11.25: URI, URL (0) | 2022.11.25 |
| 22.11.22 : CRA없이 프로젝트 생성하기-2 (웹팩 알아보기) (0) | 2022.11.22 |
| 22.11.22 : CRA없이 프로젝트 생성하기-1 (왜?) (0) | 2022.11.22 |
| 22.11.19 : 잘 안 되었던것, 톺아보기 (0) | 2022.11.19 |
