HTML의 기초

컬럼월드·2025년 9월 9일

H...TML..? 이게 뭐시랑게
하시는 분들을 위한 완전 기초 OF 기초로 설명해드리도록 하겠습니다.
이 글을 읽으시고 감을 좀 잡으실 수 있으실겁니다.
먼저 영상 하나를 시청해주세요.

HTML이 뭔데 도대체?
출처 : 코딩 분야 소개와 가장 먼저 공부해야 할 것과 공부 순서
( HTML관련해서 보실려면 6:49초, 웹 프론트엔드 상세 소개 - HTML,CSS,JavaScript 이 부분을 보세요! )

그래서 HTML이란,
HyperText Markup Language의 약자로, 웹 페이지를 만들기 위한 기본적인 마크업 언어입니다.

마크업 언어(Markup Language): 태그를 사용하여 문서의 구조나 서식, 내용 등을 표시하는 언어입니다.
즉 HTML을 통해 웹 페이지의 '뼈대'와 '구조'를 만들 수 있습니다. 즉, 웹 브라우저 화면에 표시되는 거의 모든 콘텐츠를 HTML을 통해 구성할 수 있어요.
무엇을 보여줄지를 정의하는 것이 주된 역할이므로, 컴퓨터에게 명령을 내려 특정 동작을 수행하게 하는 프로그래밍 언어와는 다릅니다.

먼저 HTML로 구성된 간단한 문서 하나를 보도록 하겠습니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>문서 제목</title>
</head>
<body>
    <h1>Hello World!</h1>
    <p>이것은 간단한 HTML 문서입니다.</p>
</body>
</html>

이렇게 HTML 문서를 작성하면 브라우저는 이 HTML 문서를 렌더링해서 사용자에게 보여줍니다.

문서와 브라우저에 렌더링된 화면을 비교해서 보면,

<body>와 </body> 사이에 있는 것들만 브라우저에 표기된 것을 볼 수 있습니다.

HTML 문서는 크게 <head>와 <body>로 구분할 수 있는데 <head>는 웹 문서에 필요한 설정,

<body>는 실제로 사용자에게 보여지는 부분이라고 이해하시면 됩니다.

웹 문서를 구성하는 요소(element)

웹 문서는 요소로 구성되어 있습니다. <body>와 </body>를 묶어 <body> 요소라고 합니다.

위의 예시에서 <body>와 </body> 사이에 <h1>요소와 <p>요소가 있었습니다.

<body>
	<h1>Hello World!</h1>
	<p>이것은 간단한 HTML 문서입니다.</p>
</body>

이를 풀어서 설명하면, <body> 요소의 영역 안에 <h1> 요소와 <p> 요소가 들어 있다고

표현할 수 있습니다. 또, <body> 요소를 <h1> 요소와 <p> 요소의 부모 요소,

<h1> 요소와 <p> 요소를 <body> 요소의 자식 요소라고 부르기도 합니다.

여는 태그와 닫는 태그

요소는 여는 태그와 닫는 태그로 구성되어 있습니다.

여는 태그란 요소의 시작점을 의미합니다.

요소를 예로 들면, < >은 여는 태그, </ >은 닫는 태그입니다.

여는 태그와 닫는 태그 사이에는 텍스트를 넣을 수도 있고, 또는 자식 요소를 추가할 수도 있습니다.

<body>
	<h1>여는 태그와 닫는 태그 사이에 텍스트를 넣을 수 있습니다.</h1>
	<div>
		<h3>여는 태그와 닫는 태그 사이에 다른 요소를 자식 요소로 넣을 수 있습니다.</h3>
	</div>
</body>

HTML 요소의 종류는 굉장히 다양합니다.

먼저 위에서 예시로 보여드린 HTML 문서에 있었던 요소에 대한 설명입니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>문서 제목</title>
</head>
<body>
    <h1>Hello World!</h1>
    <p>이것은 간단한 HTML 문서입니다.</p>
</body>
</html>

: 이 문서가 HTML5로 작성되었음을 선언합니다.
<html lang="en">: HTML 문서의 시작을 나타내며, 여기서 lang 속성은 문서의 언어를 지정합니다.
<head>: 문서에 대한 메타 정보를 담고 있습니다. 예를 들면 문자 인코딩, 뷰포트 설정, 제목 등이 있습니다.
<meta charset="UTF-8">: 문서의 문자 인코딩을 UTF-8로 설정합니다.
<meta name="viewport" content="width=device-width, initial-scale=1.0">: 모바일 기기에서 적절한 뷰포트를 설정합니다.
<title>: 문서의 제목을 정의합니다. 브라우저 탭에 표시됩니다.
<body>: 실제 콘텐츠가 들어가는 부분으로, 텍스트, 이미지, 링크 등을 포함할 수 있습니다.