HTML 기본 구조 - by. UXKM

2024-07-30

요약 설명
HTML의 기본 구조는 웹 페이지를 구성하는 골격으로, 문서 형식 선언(Doctype), 루트 요소(html), 헤드(Head), 본문(Body)으로 구성됩니다.
이 구조는 웹 페이지 개발에 필수적이며, 웹 브라우저가 올바르게 해석하여 사용자에게 메타데이터와 실제 콘텐츠를 구분하여 표시합니다.

HTML 기본 구조

HTML 구조 설명

다음은 위 예제 HTML 기본 구조 기준으로 각 요소에 대한 설명입니다.

문서 형식 선언 (DOCTYPE)

문서 형식 선언(Doctype)은 HTML 문서가 어떤 버전의 HTML이나 XHTML로 작성되었는지 웹 브라우저에게 알려주는 역할을 합니다. Doctype은 웹 브라우저에게 문서를 올바르게 해석하고 렌더링하는 데 필요한 정보를 제공합니다.
Doctype 선언은 HTML 문서의 맨 위에 위치하며 다음과 같은 형식으로 작성됩니다.

HTML5 Doctype 선언
<!DOCTYPE html>

위 예제에 사용된 Doctype으로 현재 대부분의 웹에서 사용되는 표준 Doctype입니다.
HTML5에서는 더 이상 DTD(Document Type Definition)를 사용하지 않고 간단한 Doctype 선언만으로 버전을 명시합니다.
이전 버전의 Doctype 선언
이전 버전의 HTML에서는 다른 형식의 Doctype 선언을 사용해야 했습니다.
- HTML 4.01 Strict DTD
  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
- XHTML 1.0 Strict
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

루트 요소 (html)

루트 요소(<html>)는 HTML 문서의 최상위 요소이며, 모든 다른 HTML 요소들을 포함하는 부모 요소입니다.
모든 HTML 문서는 <html> 요소로 시작하며, 다음과 같은 형식으로 작성됩니다.

								<!DOCTYPE html>
								<html lang="ko">
									<!-- HTML 문서의 내용 -->
								</html>

<html> 요소에는 lang 속성이 포함될 수 있습니다. 만약, 영어로 작성된 문서라면 lang="en"과 같이 작성됩니다.
lang 속성은 스크린 리더 및 검색 엔진 등이 문서의 언어를 이해하는 데 도움이 됩니다.

헤드 (head)

헤드 (<head>) 요소는 HTML 문서의 메타데이터와 외부 리소스에 대한 정보를 포함하는 부분입니다. <head> 요소는 화면에 직접적으로 보이지 않지만, 웹 브라우저가 문서를 처리하고 표시하는 데 중요한 역할을 합니다.
<head> 요소는 다음과 같은 요소를 포함합니다.

문서 제목 (title)
문서의 제목을 지정합니다. 브라우저의 제목 표시줄이나 북마크 목록에서 표시됩니다.

<head> <title>문서 제목</title> </head>
메타데이터(meta data)
문서의 특정 정보를 정의하는데 사용됩니다. 주로 검색 엔진 최적화(SEO), 문자 인코딩, 뷰포트 설정 등을 지정합니다.
일반적으로 name과 content 속성을 사용하여 다양한 메타데이터를 정의합니다.

<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content="문서에 대한 간단한 설명"> <meta name="keywords" content="키워드1, 키워드2, 키워드3"> <meta name="author" content="작성자 이름"> </head>
스타일시트 및 외부 리소스
문서에 스타일을 적용하기 위해 <style> 요소를 사용할 수 있으며, CSS 파일, JavaScript 파일 등과 같은 외부 리소스를 문서에 연결합니다.

<head> <style> h1 { background-color: #f0f0f0; } p { color: green; } </style> <link rel="stylesheet" href="styles.css"> <script src="script.js"></script> </head>

본문 (body)

본문 (<body>) 요소는 HTML 문서의 실제 내용을 담고 있는 부분입니다. 웹 페이지를 구성하는 모든 텍스트, 이미지, 링크, 테이블, 폼 등의 콘텐츠는 <body> 요소 내에 포함됩니다.
사용자가 브라우저에서 웹 페이지를 열면 <body> 요소 안에 있는 내용이 표시됩니다.
<body> 요소는 다음과 같은 요소를 포함합니다.

텍스트
웹 페이지의 본문 내용을 작성할 수 있습니다. 제목, 단락, 목록 등의 텍스트 요소를 사용하여 웹 페이지의 구조를 정의할 수 있습니다.

<body> <h1>본문 제목</h1> <p>본문의 첫 번째 단락입니다.</p> <p>본문의 두 번째 단락입니다.</p> </body>
이미지
웹 페이지에 이미지를 삽입할 수 있습니다.

<body> <img src="/_assets/images/example.jpg" alt="예시 이미지"> </body>
링크
다른 웹 페이지로 연결하는 하이퍼링크를 만들 수 있습니다.

<body> <a href="https://uxkm.io/" target="_blank">UXKM 바로가기</a> </body>

위에 언급된 요소 외에 테이블(<table>), 폼(<form>) 요소 등 다양한 구성 요소가 본문 (<body>) 요소에 포함됩니다.