dev_or_alive

[HTML] 기본 개념 본문

Web Programming/HTML

[HTML] 기본 개념

개발로 먹고살자 2025. 3. 30. 16:07

웹 개발을 처음 시작하신 분이라면 누구나 한 번쯤 들어보았을 용어가 바로 HTML입니다.

이 글에서는 HTML의 정의부터 역할, 그리고 기본 구조까지 차근차근 설명드리겠습니다.

✨ HTML의 정의

HTML은 HyperText Markup Language의 약자로, 우리말로는 하이퍼텍스트 마크업 언어라고 부릅니다.

쉽게 말해, 웹페이지의 뼈대를 만드는 언어입니다.

  • HyperText(하이퍼텍스트): 링크를 통해 다른 문서나 페이지로 이동할 수 있는 텍스트를 의미합니다.
  • Markup Language(마크업 언어): 문서의 구조나 의미를 태그(tag)를 이용하여 표시하는 언어입니다.

즉, HTML은 웹페이지에 들어갈 텍스트, 이미지, 영상 등을 어떤 구조로 보여줄지를 정해주는 언어입니다.

✨ HTML의 역할

HTML은 웹페이지에서 다음과 같은 역할을 담당합니다:

  • 문서의 구조를 정의합니다.
  • 텍스트나 이미지, 링크, 버튼 등 요소들을 배치합니다.
  • 다른 기술(CSS, JavaScript)과 함께 사용되어 디자인과 기능을 추가하는 기반이 됩니다.

예를 들어, HTML은 웹페이지에 "제목은 여기!", "이미지는 여기!", "이 버튼을 누르면 어디로 이동!"처럼 각각의 역할을 정의하는 것이라 볼 수 있습니다.

✨ HTML의 기본 구조

HTML 문서는 아래와 같은 구조로 시작합니다:

<!DOCTYPE html>
<html>
  <head>
    <title>나의 첫 번째 웹페이지</title>
  </head>
  <body>
    <h1>안녕하세요!</h1>
    <p>HTML 공부를 시작해봅시다.</p>
  </body>
</html>

간단한 설명:

  • <!DOCTYPE html>: 이 문서가 HTML5 문서임을 선언합니다.
    • HTML에는 여러 버전이 존재하는데, HTML5는 가장 최신 버전입니다.
    • 다양한 멀티미디어 기능과 시멘틱 태그 등을 지원합니다.
    • 이 선언은 브라우저에게 "이 문서는 HTML5 형식으로 해석해야 합니다"라고 알려주는 역할을 합니다.
  • <html>: 전체 HTML 문서의 루트 요소입니다.
  • <head>: 웹페이지의 정보(메타데이터, 제목 등)를 담는 영역입니다.
    • 브라우저 화면에는 보이지 않지만, 웹페이지의 정보를 담는 중요한 공간입니다.
  • <title>: 브라우저 탭에 표시될 제목입니다.
  • <body>: 실제 사용자에게 보이는 콘텐츠가 위치하는 곳입니다.

✨ 태그의 열림과 닫힘

HTML에서 태그(tag)는 대개 열리는 태그와 닫히는 태그가 한 쌍으로 구성되어 있습니다.

<p>이것은 문단입니다.</p>
  • <p>는 열리는 태그입니다.
  • </p>는 닫히는 태그입니다.

태그는 이렇게 열고(<>) 닫고(</>)하는 구조를 통해 콘텐츠의 시작과 끝을 명확히 표현합니다. 이를 통해 브라우저는 어떤 내용이 어떤 역할을 하는지를 정확히 파악할 수 있습니다.

다만, 몇몇 태그는 닫는 태그 없이도 사용할 수 있는데, 이런 태그를 빈 태그(self-closing tag)라고 부릅니다.

예시:

<br> <!-- 줄바꿈 -->
<img src="이미지.jpg" alt="이미지 설명"> <!-- 이미지 삽입 -->
  • <br>은 줄을 바꿔주는 태그이며 닫는 태그가 필요 없습니다.
  • <img>도 자체적으로 닫히며, 닫는 태그가 없습니다.

이러한 태그의 구조를 잘 이해하면, HTML 문서를 보다 정확하고 안정적으로 작성할 수 있습니다.

✨ 마치며

HTML은 웹 개발의 출발점이며, 어떤 웹페이지라도 그 기초는 HTML로 이루어져 있습니다. 앞으로 CSS와 JavaScript를 함께 배우게 되겠지만, HTML을 먼저 확실히 익혀두면 이후 학습이 훨씬 수월해집니다.

'Web Programming > HTML' 카테고리의 다른 글

[HTML] Form 태그와 관련 태그들  (0) 2025.04.14
[HTML] 시멘틱 태그  (0) 2025.04.13
[HTML] 링크와 이미지 <a>, <img>  (1) 2025.04.13
[HTML] 리스트 관련 태그  (0) 2025.04.13
[HTML] 텍스트 관련 주요 태그  (1) 2025.03.30
'Web Programming/HTML' Related Articles more