# HTML

## HTML

{% hint style="info" %}
[HTML](https://developer.mozilla.org/ko/docs/Glossary/HTML) (Hypertext Markup Language,하이퍼텍스트 마크업 언어)는 프로그래밍 언어는 아니고, 우리가 보는 웹페이지가 어떻게 구조화되어 있는지 브라우저로 하여금 알 수 있도록 하는 마크업 언어입니다. 이는 개발자로 하여금 복잡하게도 간단하게도 프로그래밍 할 수 있습니다. HTML은 [elements](https://developer.mozilla.org/ko/docs/Glossary/Element)로 구성되어 있으며, 이들은 적절한 방법으로 나타내고 실행하기 위해 각 컨텐츠의 여러 부분들을 감싸고 마크업 합니다. [tags](https://developer.mozilla.org/ko/docs/Glossary/Tag) 는 웹 상의 다른 페이지로 이동하게 하는 하이퍼링크 내용들을 생성하거나, 단어를 강조하는 등의 역할을 합니다. 

참조 : [모질라 개발자 포럼 문서](https://developer.mozilla.org/ko/docs/Learn/HTML/Introduction_to_HTML/Getting_started#html%EC%9D%B4%EB%9E%80)
{% endhint %}

### HTML의 구조

HTML은 태그(Tag) 형식으로 구조를 표현한다. 예를 들면 다음과 같다.

```html
오늘 점심 메뉴는 <b>피자</b>입니다!
```

![](/files/VSG8rArI63lH14P705ZH)

태그를 중첩하여 다양한 구조를 표현할 수 있다. HTML은 문서 객체 모델(DOM, Document Object Model) 형태로 표현될 수 있으므로 태그들을 각 계층별로 해석할 수도 있다.

```markup
<table>
    <thead>
        <tr>
            <th>이름</th>
            <th>가격</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>아메리카노</th>
            <th>1500</th>
        </tr>
        <tr>
            <th>카페라떼</th>
            <th>2300</th>
        </tr>
        <tr>
            <th>바닐라쉐이크</th>
            <th>3000</th>
        </tr>
    </tbody>
</table>
```

![(좌) 소스코드 (중) 영역구조 (우) DOM](/files/nqbSTkEY6CvmNVBv4co7)

태그에는 속성(Attribute)을 부여할 수 있다. 이러한 속성들을 이용하여 같은 태그이지만 다른 표현이 가능하다.

```markup
<div align="left">Hello World!</div>
<div align="center">Hello World!</div>
<div align="right">Hello World!</div>
```

즉 HTML을 배운다는 것은 다음을 배우는 것과 같다.

* 각각의 태그 별 효과와 특징
* 각각의 태그에 부여할 수 있는 속성


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.sysout.co.kr/web/develop-page/html.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.