lesson1Title

lesson2Title

lesson3Title

lesson4Title

lesson5Title

lesson6Title

lesson7Title

lesson8Title

lesson9Title

lesson10Title

lesson11Title

lesson12Title

webIntroHtmlChapter1Title

webIntroHtmlChapter2Title

webIntroHtmlChapter3Title

webIntroHtmlChapter4Title

<!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>

    <script src="scripts.js"></script>
  </head>

  <body>
    <header>
      <h1>웹페이지 제목</h1>
    </header>

    <nav>
      <ul>
        <li><a href="#home">홈</a></li>
        <li><a href="#about">소개</a></li>
      </ul>
    </nav>

    <main>
      <article>
        <h2>본문 제목</h2>
        <p>이것은 웹페이지의 본문 콘텐츠를 나타냅니다.</p>
      </article>
    </main>

    <footer>
      <p>© 저작권, 연락처</p>
    </footer>
  </body>
</html>

# html 태그

`<html>` 태그는 웹 문서의 시작과 끝을 나타내는 태그입니다.

html 태그를 선언하기 전에, 웹페이지는 브라우저에게 이 페이지가 어떤 버전의 HTML로 만들어졌는지 알리기 위해 `DOCTYPE`을 선언합니다.

현재 인터넷에서 널리 사용되는 HTML 버전은 HTML 5입니다.

<br />

## HTML의 역사

1. **HTML (1991)**

   - 월드 와이드 웹의 창시자인 팀 버너스리(Tim Berners-Lee)에 의해 처음으로 도입된 원래의 HTML 버전

2. **HTML 2.0 (1995)**

   - 최초의 표준 HTML 버전. 웹 커뮤니티의 다양한 구성원들의 피드백을 기반으로 정의

3. **HTML 3.2 (1997)**

   - 테이블, 스크립트(예: JavaScript) 및 다른 몇 가지 요소가 추가

4. **HTML 4.0 (1997)**

   - 스타일시트(CSS), 보다 개선된 폼 양식 및 스크립팅 등 다양한 기능이 추가

5. **HTML5 (2014, 현재 버전)**

   - 현대 웹의 필요성과 웹 애플리케이션의 발전을 반영한 큰 업데이트.
   - `<canvas>`, `<video>`, `<audio>`, `local storage`, `geolocation`, 등과 같은 새로운 추가
   - 문서의 구조화와 의미론적 요소(예: `<header>`, `<footer>`, `<article>`, `<nav>` 등) 강화

현재 사용하는 HTML5 버전으로 웹 페이지를 만들 경우, HTML 코드 최상단에 DOCTYPE을 다음과 같이 선언합니다.

```html title="DOCTYPE 선언"
<!DOCTYPE html>
<html>
  
</html>
```

이렇게 HTML 문서 최상단에 `<!DOCTYPE html>`이라고 적으면, 웹 브라우저는 이 웹 페이지가 HTML5 버전으로 작성되었다는 것을 알게 됩니다.

<br />

## `<html>` 태그

**html** 태그는 HTML 문서의 루트(root, 최상단) 요소로, 문서의 처음과 끝에 위치해야 합니다.

`<html>` 태그 내에는 웹 페이지에 대한 정보를 담는 `<head>` 태그와 웹페이지에 표시할 내용을 담는 `<body>` 태그를 포함합니다.

<br />

## HTML 태그 내부 구조

```html title="HTML 문서 기본 구조"
<!DOCTYPE html>
<html>
  <head>
    
  </head>
  <body>
    
  </body>
</html>
```

HTML 태그에는 **lang** 속성으로 웹 페이지의 주 사용 언어를 지정할 수 있습니다.

예를 들어, 한국어를 주 사용 언어로 사용하는 웹 페이지는 `<html lang="ko">`와 같이 표시할 수 있습니다.

<br />

```html title="HTML lang 속성 사용 예제"
<!DOCTYPE html>

<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <title>웹페이지 제목</title>
  </head>
  <body>
    <h1>문단 제목</h1>
    <p>문단 내용</p>
  </body>
</html>
```

html 태그

HTML의 역사

<html> 태그

HTML 태그 내부 구조

`<html>` 태그