본문 바로가기
HTML5&웹디자인

HTML5 기초 -HTML5의 기본 구조

by 택형. 2021. 9. 25.
반응형

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>타이틀</title>
</head>
<body>
  안녕하세요
</body>
</html>

웹 표준인 HTML5의 기본적인 구조에 대해 알아보겠습니다.

위에 태그들이 html5의 기본적인 구성인데요, 인터넷에 실행시키면 아래와 같이 결과가 나옵니다.

그럼 하나하나 의미를 한번 알아보겠습니다.


<!DOCTYPE html>

모든 HTML5 문서에 써야 되는 태그입니다. DOCTYPE 선언은 html태그를 쓰기 앞서 선언되어야 합니다. html 버전이 무엇인지를 웹 브라우저에 알려주는 역할을 하는 선언문으로 대,소문자를 구분하지 않습니다.


<html lang="ko">

html 문서의 시작을 선언하는 태그

html 뒤의 lang="ko"의 의미 : lang 설정과 접속자 브라우저의 언어 설정이 다른 경우, 자동번역 인터페이스 뜨게 설정.

한국어 : ko

영어 : en

중국어 : zh

일본어 : ja

독일어 : de

프랑스어 : fe

스페인어 : es

러시아어 : ru


<head>

head는 웹페이지에 보이는 영역은 아니지만, 해당 웹문서에 스타일 시트나, 자바스크립트 등 필요한 기능을 담습니다.

↓ head 태그 내부에 넣을 수 있는 태그

태그 설명
meta 웹 페이지에 추가 정보 전달
title 웹 페이지의 제목 지정
script 웹 페이지에 스크립트 추가
link 웹 페이지에 다른 파일 추가
style 웹 페이지에 스타일 시트 추가
base 웹 페이지의 기본 경로 지정

<meta charset="UTF-8">

유니코드 인코딩 방식 중에 하나로, 몇 가지 있긴 하지만 보통 UTF-8을 사용합니다. 만약 이걸 작성하지 않는다면 글자가 깨져 보일 수 있고, 요구하는 인코딩 방식과 달라도 글자가 깨질 수 있습니다.


<title>타이틀</title>

<title> </title> 사이에 웹페이지 제목을 쓰는 곳입니다.

위에 빨간 표시처럼 인터넷 웹페이지 제목이 표시됩니다.


</head>

head 태그가 끝났음을 선언하는 태그입니다.


<body> 안녕하세요 </body>

 

body 태그는 웹페이지에 보이는 모든 영역을 담당합니다. '안녕하세요'라는 글자를 입력했기 때문에 웹페이지 상에 '안녕하세요' 글자가 보입니다.

/body를 선언함으로써 dody 태그가 끝났음을 알립니다.


</html>

html 태그가 끝났음을 선언합니다.

반응형

댓글