HTML 2일차 : HTML5의 페이지 구조

bitterpotato·2021년 1월 26일
0

html

목록 보기
2/3

HTML 페이지의 구조


일반적으로 html 페이지는 아래와 같이 구성되어 있다.

<!DOCTYPE html>
<html>
  <head>
    <title>My Title </title>
  </head>
  <body>
    
  </body>
</html>

여기에서 각 줄마다 어떤 의미를 가지고 있는지 살펴 보도록 하겠다.


!DOCTYPE html


이 태그는 웹 브라우저 프로그램이 현재 웹 페이지가 html5임을 인식하게 만들어 주는 태그이다.

W3C에 따르면 모든 html5 문서의 제일 첫 번째 줄에 아래의 태그를 입력해야만 한다.

<!DOCTYPE html>

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 태그는 실제로 웹 페이지에서 보이는 부분을 나타낼때 이용하는 태그이다. body 태그 내부에 들어갈 수 있는 태그들은 매우 많으므로 나중에 정리하도록 하겠다.


title


title 태그는 브라우저에 표시하는 제목을 지정한다. 아래와 같이 코드를 짜게 될 경우 해당 페이지의 제목이 참고 사진과 같이 표시된다.

<title>My Page</title>

profile
개발자 망생이

0개의 댓글