lesson1Title

lesson2Title

lesson3Title

lesson4Title

lesson5Title

lesson6Title

lesson7Title

lesson8Title

lesson9Title

lesson10Title

lesson11Title

pythonIntroCrawlingChapter1Title

pythonIntroCrawlingChapter2Title

pythonIntroCrawlingChapter3Title

pythonIntroCrawlingChapter4Title

<!DOCTYPE html>
  <html>
  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body>
      <header>
          <h1>빈칸을 입력하세요 🙂</h1>
          <p>머리말</p>
      </header>
      <nav>
          <ul>
              <li>홈</li>
              <li>소개</li>
              <li>연락처</li>
          </ul>
      </nav>
      <section>
          <h2>환영합니다!</h2>
          <p>웹사이트 기본 구조를 확인해 보세요.</p>
      </section>
      <footer>
          <p>&copy; 꼬리말</p>
          <a href="https://example.com/">외부 페이지로 이동</a>
      </footer>
  </body>
</html>

# 크롤링을 위한 HTML 기초

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

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

<br />

## HTML 기본 구조

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

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

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

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

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

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

```html title="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 요소들로, 제목, 단락 등의 컨텐츠를 나타냅니다.

<br />

## 주요 HTML 태그

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

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

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

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

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

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

<br />

HTML에 대한 더 자세한 내용은 <a href="https://www.codefriends.net/courses/web-intro-html" target="_blank">HTML 입문 강의</a>에서 확인할 수 있습니다.

<br />

## 실습

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