일반적으로 html 페이지는 아래와 같이 구성되어 있다.
<!DOCTYPE html>
<html>
<head>
<title>My Title </title>
</head>
<body>
</body>
</html>
여기에서 각 줄마다 어떤 의미를 가지고 있는지 살펴 보도록 하겠다.
이 태그는 웹 브라우저 프로그램이 현재 웹 페이지가 html5임을 인식하게 만들어 주는 태그이다.
W3C에 따르면 모든 html5 문서의 제일 첫 번째 줄에 아래의 태그를 입력해야만 한다.
<!DOCTYPE html>
html 태그는 모든 HTML 페이지의 근간이 되는 태그이다. 따라서 모든 태그는 html 태그 내부에 작성하며, lang 속성을 가진다.
아래와 같이 언어 속성을 입력할 수 있다.
<html lang="ko">
언어 | 속성값 | 언어 | 속성값 |
---|---|---|---|
한국어 | ko | 영어 | en |
일본어 | ja | 러시아어 | ru |
중국어 | zh | 독일어 | de |
lang 속성은 브라우저가 동작하는데 큰 영향을 끼치지 않지만 검색 엔진이 웹페이지를 탐색할 때 만들어진 언어를 인식하게 한다.
head 태그는 body 태그에서 필요한 스타일시트(css)와 자바스크립트(js)를 제공하는데 이용된다.
또한 이 태그의 내부에 아래의 태그들만 넣을 수 있다.
태그 이름 | 기능 |
---|---|
meta | 페이지에 추가 정보를 전달 |
title | 페이지 제목 |
script | 페이지에 스크립트(js, ts 등등) 추가 |
link | 페이지에 다른 파일 추가 |
style | 페이지에 스타일시트(css) 추가 |
base | 페이지의 기본 경로 지정 |
이 이외의 태그를 입력할 경우 자동적으로 그런 태그들은 body 내부로 옮겨지게 된다.
body 태그는 실제로 웹 페이지에서 보이는 부분을 나타낼때 이용하는 태그이다. body 태그 내부에 들어갈 수 있는 태그들은 매우 많으므로 나중에 정리하도록 하겠다.
title 태그는 브라우저에 표시하는 제목을 지정한다. 아래와 같이 코드를 짜게 될 경우 해당 페이지의 제목이 참고 사진과 같이 표시된다.
<title>My Page</title>