lesson1Title

lesson2Title

lesson3Title

lesson4Title

lesson5Title

lesson6Title

lesson7Title

lesson8Title

lesson9Title

lesson10Title

lesson11Title

lesson12Title

lesson13Title

lesson14Title

lesson15Title

lesson16Title

lesson17Title

webLightBasicChapter1Title

webLightBasicChapter2Title

webLightBasicChapter3Title

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR"
      rel="stylesheet"
    />
    <title>HTML 시작하기</title>
  </head>
  <body>
    <br />
    <p>
      HTML은 <strong>HyperText Markup Language</strong>의 약자로 웹페이지의
      구조와 내용을 정의해요.
    </p>
    <div>
      HTML은 <a href="https://example.com">링크(Link)</a>를 활용해 텍스트 기반의
      문서와 컨텐츠를 서로 연결하는 <strong>하이퍼텍스트</strong>(HyperText)를
      활용한 마크업 언어로, 웹페이지의 틀을 잡는 골격과 같아요.
    </div>
  </body>
</html>

# HTML 시작하기

HTML은 **HyperText Markup Language**의 약자로, 웹페이지의 구조와 내용을 정의하는 **골격**과 같습니다.

여기서 `하이퍼텍스트(HyperText)`는 텍스트에 '하이퍼링크'라 불리는 링크(Link)가 포함된 것을 뜻합니다. 사용자는 이 링크를 클릭함으로써 다른 웹 페이지, 이미지, 비디오 등으로 간편하게 이동할 수 있습니다.

또 다른 중요한 개념인 `마크업 언어(Markup Language)`는 문서나 데이터의 구조를 정의하는 코드나 태그(Tag)를 뜻합니다.

예를 들어 HTML에서 `<p>`는 단락(Paragraph)을 의미하고, `li`는 목록(List)을 의미합니다.

간단한 HTML 예시를 살펴보겠습니다.

<br />

## HTML 코드 예시

```html title="간단한 HTML 코드"
<html>
  <head>
    <title>제목</title>
  </head>
  <body>
    <h1>안녕하세요</h1>
    <p>반갑습니다</p>
  </body>
</html>
```

위 HTML 코드는 `<html>`, `<head>`와 같이 꺾쇠 괄호`(<, >)`로 감싸진 요소들로 구성되어 있습니다.

이러한 요소들은 무엇이고, HTML에서 어떻게 작용할까요? 다음 강의에서 함께 알아보겠습니다 👨🏻‍💻

<br />

## 실습

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

단락을 나타내는 태그는 `<p>`입니다.

HTML에서 단락을 나타내는 태그는 `<paragraph>`이다.