케네스로그

HTML문서의 기본 구조 본문

Dev/WEB

HTML문서의 기본 구조

kenasdev 2021. 2. 5. 19:00
반응형

사용자에 의해 작성된 HTML문서는 웹 브라우저를 통해 확인할 수 있습니다. 웹 브라우저는 일정한 규칙에 따라 웹 문서를 읽고 텍스트를 포함한 내용을 화면에 표현해 줍니다. 이렇게 웹 브라우저가 따라는 규칙 중 가장 기본이 되는 것이 HTML문서의 구조입니다. 어떠한 웹 문서이든 반드시 이 기본 구조를 지켜야 웹 브라우저를 통해 정상적으로 표현될 수 있습니다.

HTML 문서의 기본 구조

<!DOCTYPE html>
<html lang="ko">
	<head>
		<meta charset="UTF-8">
		<title>HTML</title>
	</head>
	
	<body>
		<h1>Hello, HTML</h1>
	</body>
</html>

가장 단순한 형태의 HTML문서 구조는 위와 같습니다.

전체적으로 <html>이라는 태그가 감싸고 있고, 그 안에 <head>와 <body>가 위치하고 있는 모습입니다.

DOCTYPE

HTML문서에서 가장 먼저 나오며, <html>태그 상단에 위치합니다.

DOCTYPE은 해당 웹 문서가 어떤 버전으로 작성되었는지 브라우저에게 명시해주는 역할을 합니다.

웹 표준을 따르기 위해서 반드시 기재해야 합니다.

 

HTML 태그

<html>요소는 페이지 전체를 감싸는 요소입니다. root 요소라고 불리기도 합니다.

html lang

lang 속성은 검색엔진이나 브라우저가 언어인식에 참고될 수 있도록 html요소 내부에 기입합니다.

최근의 대부분 브라우저들은 유저가 접속한 위치, 국가 등을 인식하기때문에 자동으로 설정이 되긴 합니다.

head 태그

<head>요소 내부에는 브라우저 상에 표시되지 않는 모든 것들이 들어갑니다. 웹 페이지를 검색할 때 사용 되는 키워드, 페이지에 대한 설명, CSS와 Javascript의 설정, 문자 인코딩 설정과 같은 메타데이터들이 포함됩니다.

- meata: 문자 인코딩 설정

- title: 브라우저 탭에 노출되는 웹 타이틀 설정

body 태그

실제 브라우저의 화면에 노출되는 내용들이 body 태그 내부에 위치하게 됩니다.

반응형
저작자표시 비영리 동일조건

'Dev > WEB' 카테고리의 다른 글

HTML <form> 태그 정리 (input태그 예제)  (0) 2021.08.11
HTML 테이블 셀 병합 (colspan, rowspan)  (0) 2021.04.27
<th>태그로 테이블 행이름, 열이름 지정하기  (0) 2021.04.27
HTML <table>태그 사용법 - 테이블 생성  (0) 2021.02.10
HTML에서 주로 사용되는 기본 태그들  (0) 2021.02.05
'Dev/WEB' Related Articles more