HTML 문서 구조
- HTML 문서의 구조를 잘 짜야하는데, 아래의 두가지가 그 이유가 된다.
- “표준웹”이라는 개념이 있는데 웹에서 문서가 원활히 검색 될 수 있도록 하기 위한 공통의 약속이라고 볼 수 있다.
- 좋은 구조로 짜여진 문서는 코드의 가독성이 좋으며 이후 css, javascript 등을 이용한 스타일이나 동적인 움직임을 줄 때에도 용이하다.
HTML 기본 구조
- <!DOCTYPE html> - 현재 문서가 HTML5로 작성된 문서임을 명시한다.
<html>, </html>- HTML 문서의 루트(root) 요소를 정의한다.<head>, </head>- HTML 문서의 메타데이터(metadata)를 정의한다.<body>, </body>- 사용자가 가시적으로 보게 되는 부분(content)을 담당한다.
"메타데이터(metadata)" 란?
- HTML 문서에 대한 정보(data)로 웹 브라우저에는 직접적으로 표현되지 않는 정보를 의미한다.
- <.meta>, <.link>, <.title>, <.style>, <.script>태그 등의 태그들로 정보들을 담아낸다.
HTML 기본구조 코드 예시
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>html 문서의 기본 구조 예시</title>
</head>
<body>
<h1>html 문서의 기본 구조</h1>
<p>이 문서는 html 문서의 기본 구조를 사용하여 작성되고 있습니다.</p>
</body>
</html>
위 코드처럼 처음 시작은 `<!DOCTYPE html>`로 시작된다.
html태그가 열리고 'lang="ko"' 라는 속성과 값을 부여하며 사용 언어는 한글로 정의한다.
head태그 안에는 meta, title 태그들로 문서의 기본 구조와 제목이 정의되어 있다.
head태그가 닫히고 body태그가 열리며 가시적으로 들어낼 부분들을 h1과 p태그에 담아내고 있다.
body 태그가 닫히고 html태그를 닫으면서 문서가 마무리된다.
아래는 위 소스코드의 출력물이다.
html 문서의 기본 구조
이 문서는 html 문서의 기본 구조를 사용하여 작성되고 있습니다.
