> For the complete documentation index, see [llms.txt](https://shhn0509.gitbook.io/html-and-css/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://shhn0509.gitbook.io/html-and-css/html/html-2/undefined-1-1.md).

# 기본 문법

## HTML 기본 문법

* HTML 문서를 작성하는 기본 문법을 배우자
* 웹 페이지는 **헤드(head)** 영역과 **바디(body)** 영역으로 구성된다.

  문서 타이틀(title)은 웹 페이지의 제목으로 브라우저 탭에 표시된다.
* 브라우저는 정해진 규칙에 따라 제작자가 문서를 작성해주면 그 내용을 해석해서 사용자가 보는 화면(UI)에 그것을 처리해 주는 역할을 한다.

### 기본문법

```markup
<여는 태그> 콘텐츠 </닫는 태그>
<태그이름 속성="값"> 콘텐츠 </태그이름>
```

* 여는 태그와 닫는 태그의 이름은 같아야 한다.
* 콘텐츠(content) : 사용자에게 보여지는 중요한 내용

![Element의 구성](https://161134766-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MPKJK-Pogdi-NHl4GxU%2F-MPxE_fAGH-q7wC6FgN1%2F-MPxGJe6i0myYOFpc1eF%2Fimage.png?alt=media\&token=fc7fd647-68c1-44f3-b66a-bb7465e6f2a7)

### HTML 용어

| 용어        | 설명    |
| --------- | ----- |
| element   | 요소    |
| open tag  | 여는 태그 |
| close tag | 닫는 태그 |
| attribute | 속성    |
| value     | 값     |

### 태그? 요소?

요소와 태그는 다르다. 하지만 이를 혼용해서 쓰는 경우가 많다. &#x20;

**요소**는 element 이고 element는 시작하는 태그와 종료하는 태그 영역을 모두 포함하는 하나의 영역단위를 지칭한다. 그 영역 내에서 **시작하는 tag**와 **종료하는 tag**가 포함되는 것이다.

#### **참고**

&#x20;[HTML Tags Vs Elements](https://www.tutorialrepublic.com/html-tutorial/html-elements.php)

### 브라우저 인코딩

* console 패널에서 확인 가능&#x20;

![console 패널에서 인코딩 확인](https://161134766-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MPKJK-Pogdi-NHl4GxU%2F-MPxIJfjjysej1C88Ke7%2F-MPxKVgSNh7co2eZX0Ls%2Fimage.png?alt=media\&token=0c5d950c-6fc0-4a6d-8136-226c28a346c7)

* 문서의 문자 인코딩 설정

  ```markup
  <meta charset="utf-8" />
  ```

##