본문으로 건너뛰기
실습하기

크롤링을 위한 HTML 기초

웹 페이지의 골격을 정의하는HTML(HyperText Markup Language)은 웹 페이지를 구성하기 위한 마크업 언어입니다.

마크업 언어는 문서의 구조와 콘텐츠를 정의하는 언어를 뜻합니다.


HTML 기본 구조​

HTML 문서는 꺾쇠 괄호(< >)로 둘러싸인 태그(Tag)들로 이루어져 있습니다.

태그는 시작 태그(<tag>)와 종료 태그(</tag>)로 이루어져 있으며, 시작 태그와 종료 태그 사이에 컨텐츠가 위치합니다.

예를 들어 <h1> 태그는 제목을 나타내며, </h1>와 같이 /를 사용하여 태그를 닫습니다.

태그와 컨텐츠로 구성된 HTML 문서의 단위를 요소(Element)라고 합니다.

예를 들어 <h1>제목</h1>는 <h1> 태그로 감싸인 "제목"이라는 컨텐츠를 포함하는 요소입니다.

기본적인 HTML 문서 구조는 다음과 같습니다.

HTML 기본 구조
<!DOCTYPE html>
<html>
  <!-- 문서의 메타데이터를 포함하는 영역 -->
  <head>
    <title>페이지 제목</title>
  </head>
  <!-- 웹 페이지의 본문 내용을 포함하는 영역 -->
  <body>
    <h1>제목 요소</h1>
    <p>단락 요소</p>
  </body>
</html>

  • <!DOCTYPE html>: HTML 문서의 버전을 정의합니다. HTML5 문서임을 나타냅니다

  • <html>: HTML 문서의 최상위(root) 요소로, 모든 HTML 요소를 포함합니다.

  • <head>: 문서의 메타데이터(제목, 설명, 스타일 등)를 포함합니다.

  • <title>: 브라우저 탭에 표시되는 페이지 제목을 정의합니다.

  • <body>: 웹 페이지의 본문 내용을 포함합니다.

  • <h1>, <p> 등: 다양한 HTML 요소들로, 제목, 단락 등의 컨텐츠를 나타냅니다.


주요 HTML 태그​

HTML에는 다양한 종류의 태그가 있으며, 각 태그는 특정한 종류의 컨텐츠를 나타냅니다:

  • <h1>에서 <h6>: 제목을 나타내는 태그들로, <h1>이 가장 큰 제목을 나타냅니다.

  • <p>: 단락(Paragraph)을 나타내는 태그입니다.

  • <a>: 하이퍼링크(다른 웹 페이지로 이동하는 링크)를 만드는 태그입니다.

  • <img>: 이미지를 삽입하는 태그입니다.

  • <ul>, <ol>, <li>: 순서가 없는 또는 순서가 있는 목록을 만드는 태그들입니다.


HTML에 대한 더 자세한 내용은 HTML 입문 강의에서 확인할 수 있습니다.


실습​

코드의 별표로 강조된 부분을 따라 입력해 보세요.