HTML 기본 소개

Source: Dev.to

HTML이란?

HTML은 Hyper Text Markup Language의 약자입니다. 웹 페이지를 만들고 인터넷상의 콘텐츠 구조를 정의하는 데 사용됩니다. 여러분이 보는 모든 웹사이트는 HTML로 구축됩니다.

Doctype 선언 – 무엇이며 왜 사용하는가

### 왜 사용하는가
- 브라우저에 문서가 HTML5로 작성되었음을 알립니다.  
- 브라우저가 페이지를 올바르게 렌더링하도록 돕습니다.  
- 호환성 문제를 방지합니다.  
- 이것은 선언문이며, HTML 태그가 아닙니다.

### 예시

```html

```

## `` 태그

`` 요소는 웹페이지에 대한 메타 정보를 담고 있습니다. 포함 내용은 다음과 같습니다:

- `` – 브라우저 탭에 표시되는 페이지 제목  
- 메타 데이터 (charset, viewport, SEO 태그 등)  
- CSS 스타일시트 링크  
- 페이지 본문이 로드되기 전에 실행되어야 하는 스크립트(JavaScript)  

```` 안의 내용은 렌더링된 페이지에 **직접적으로 보이지** 않습니다.

### 예시

```html
  My First Page
  
  
  
  
```

## `` 태그

`` 요소는 `` 안에 배치됩니다.

**목적:** 브라우저 탭에 페이지 이름을 표시합니다.

### 예시

```html
HTML Basics
```

브라우저 탭에 **HTML Basics**가 표시됩니다.

## `` 태그

`` 요소는 웹페이지의 주요 콘텐츠를 담고 있습니다. `` 안에 있는 모든 내용은 사용자에게 보입니다.

### 예시

```html
  
## Welcome
  
This is my first HTML page.

```

## 블록 요소

블록 레벨 요소는 새 줄에서 시작하며 컨테이너의 전체 너비를 차지합니다.

### 예시

```html

## Section Heading

This paragraph is a block element.

```

## `` 태그

`` 은 **division**(구역)을 의미합니다. 다른 요소들을 그룹화하는 컨테이너 혹은 박스로 사용됩니다.

### 예시

```html
  
## Welcome
  
This is inside a div.

```

## `` 태그

`` 은 **paragraph**(단락)를 의미합니다. 텍스트를 단락 형태로 작성할 때 사용합니다.

- 자동으로 새 줄에서 시작합니다.  
- 블록 요소이기도 합니다.

### 예시

```html

This is a paragraph.

```

## 헤딩 태그 (`` 부터 ``까지)

헤딩 태그는 제목과 부제목을 제공하여 중요도의 계층 구조를 만듭니다.

| 태그   | 일반적인 사용 용도                     |
|-------|---------------------------------|
| ``   | 페이지의 메인 타이틀                |
| ``   | 서브‑주제 또는 섹션 헤딩            |
| ``   | 서브‑서브‑주제                      |
| …     | …                               |
| ``   | 가장 작은 헤딩                     |

모든 헤딩 태그는 블록 요소입니다.

### 예시

```html

## Main Heading

## Sub Title

### Small Heading

```

## 인라인 요소

인라인 요소는 **새 줄에서 시작하지 않으며** 내용이 차지하는 너비만큼만 공간을 차지합니다.

### 예시

```html

This is a paragraph with **bold** and [a link](#) inline.

```