맨위로가기

HTML 요소

"오늘의AI위키"는 AI 기술로 일관성 있고 체계적인 최신 지식을 제공하는 혁신 플랫폼입니다.
"오늘의AI위키"의 AI를 통해 더욱 풍부하고 폭넓은 지식 경험을 누리세요.

1. 개요

HTML 요소는 HTML 문서를 구성하는 개별 구성 요소로, 문서의 구조와 내용을 정의하는 데 사용된다. HTML 요소는 시작 태그, 내용, 종료 태그로 구성되며, 속성을 통해 동작과 속성을 정의할 수 있다. HTML 요소는 SGML, XML, HTML5 등 다양한 표준에 따라 정의되었으며, 문서 구조, 텍스트, 목록, 이미지, 폼, 표, 프레임 등 다양한 기능을 제공한다. 현재는 내용과 표현의 분리를 통해 CSS와 스크립트를 활용하여 웹 페이지를 구성한다.

더 읽어볼만한 페이지

  • HTML 태그 - 폼 (HTML)
    HTML 폼은 웹 페이지에서 사용자로부터 정보를 수집하여 서버로 전송하는 요소로, 텍스트 입력, 체크 상자, 라디오 버튼 등 다양한 컨트롤을 제공하여 사용자 인터랙션을 가능하게 한다.
  • HTML 태그 - 캔버스 요소
    캔버스 요소는 HTML 내에서 그래픽을 그릴 수 있는 영역으로, 자바스크립트를 사용하여 그림을 그리며, 그래프, 애니메이션, 게임 등에 활용되고 래스터 기반으로 즉시 모드로 그려진다.
  • 웹 1.0 - 전화 접속
    전화 접속은 공중 교환 전화망을 통해 모뎀과 전화선으로 인터넷에 연결하는 방식으로, 1980년대부터 사용되었으나 광대역 인터넷의 등장으로 2000년대 이후 사용이 줄어 현재는 제한적으로 사용되며 사라지는 추세이다.
  • 웹 1.0 - 자바 애플릿
    자바 애플릿은 웹 페이지에서 실행되는 자바 기반 프로그램으로, 웹 상호작용성을 높였으나 기술적 문제와 웹 표준 기술 발전에 따라 쇠퇴하여 사용이 중단되었다.
HTML 요소
HTML 요소 개요
설명HTML (HyperText Markup Language) 문서를 구성하는 개별적인 부품
역할웹 페이지의 구조와 내용을 정의
구조시작 태그, 내용, 종료 태그로 구성됨 (예: <p>내용</p>)
유형블록 레벨 요소
인라인 요소
기본 정보
정의HTML 문서를 구성하는 요소
분류메타데이터 콘텐츠
플로우 콘텐츠
구획 콘텐츠
헤딩 콘텐츠
상호작용 콘텐츠
폼 관련 콘텐츠
임베디드 콘텐츠
스크립트 지원 콘텐츠
내용 모델요소에 따라 다름
태그 생략요소에 따라 다름
포함 가능HTML 요소가 나타날 수 있는 위치는 콘텐츠 모델 및 요소가 속하는 콘텐츠 범주에 따라 다름.
인터페이스HTMLElement
요소 종류
루트 요소<html>: HTML 문서의 루트 (최상위) 요소
문서 메타데이터<head>: HTML 문서의 메타데이터 (제목, 스타일, 스크립트 등)를 정의하는 요소
<title>: HTML 문서의 제목을 정의하는 요소 (브라우저 탭에 표시)
<base>: 문서 내의 모든 상대 URL의 기본 URL을 지정하는 요소
<link>: 외부 리소스 (CSS 스타일 시트, 파비콘 등)와의 관계를 정의하는 요소
<meta>: HTML 문서의 메타데이터 (문자 인코딩, 설명, 키워드 등)를 정의하는 요소
<style>: HTML 문서에 CSS 스타일을 직접 포함하는 요소
구획 루트<body>: HTML 문서의 본문 내용을 담는 요소
콘텐츠 구획<address>: 연락처 정보를 나타내는 요소
<article>: 독립적인 콘텐츠 (기사, 블로그 게시물 등)를 나타내는 요소
<aside>: 주변 콘텐츠와 관련된 추가 정보 (사이드바 등)를 나타내는 요소
<footer>: 문서 또는 섹션의 바닥글을 나타내는 요소
<header>: 문서 또는 섹션의 머리글을 나타내는 요소
<h1>, <h2>, <h3>, <h4>, <h5>, <h6>: 제목을 나타내는 요소 (각각 수준 1~6)
<main>: 문서의 주요 콘텐츠를 나타내는 요소
<nav>: 탐색 링크를 포함하는 요소
<section>: 문서의 섹션을 나타내는 요소
텍스트 콘텐츠<blockquote>: 긴 인용문을 나타내는 요소
<dd>: 설명 목록에서 용어에 대한 설명을 나타내는 요소
<div>: 콘텐츠를 묶는 데 사용되는 일반적인 컨테이너 요소
<dl>: 설명 목록을 나타내는 요소
<dt>: 설명 목록에서 용어를 나타내는 요소
<figcaption>: <figure> 요소의 캡션을 나타내는 요소
<figure>: 그림, 다이어그램, 사진 등을 나타내는 요소
<hr>: 주제의 전환 (수평선)을 나타내는 요소
<li>: 목록의 항목을 나타내는 요소
<menu>: 명령 메뉴를 나타내는 요소
<ol>: 순서가 있는 목록을 나타내는 요소
<p>: 단락을 나타내는 요소
<pre>: 미리 형식이 지정된 텍스트를 나타내는 요소
<ul>: 순서가 없는 목록을 나타내는 요소
인라인 텍스트 의미<a>: 하이퍼링크를 정의하는 요소
<abbr>: 약어를 나타내는 요소
<b>: 텍스트를 굵게 표시하는 요소
<bdi>: 텍스트의 방향을 격리하는 요소
<bdo>: 텍스트의 방향을 재정의하는 요소
<br>: 줄 바꿈을 삽입하는 요소
<cite>: 작품의 제목을 나타내는 요소
<code>: 컴퓨터 코드를 나타내는 요소
<data>: 데이터를 나타내는 요소
<dfn>: 용어를 정의하는 요소를 나타내는 요소
<em>: 텍스트를 강조하는 요소
<i>: 텍스트를 이탤릭체로 표시하는 요소
<kbd>: 키보드 입력을 나타내는 요소
<mark>: 텍스트를 강조 표시하는 요소
<q>: 짧은 인용문을 나타내는 요소
<rp>: <ruby> 요소에서 괄호를 제공하는 요소 (루비 지원 브라우저용)
<rt>: <ruby> 요소에서 루비 텍스트 (발음)을 나타내는 요소
<ruby>: 루비 주석을 나타내는 요소 (동아시아 문자 발음 표시)
<s>: 더 이상 정확하지 않거나 관련 없는 텍스트를 나타내는 요소
<samp>: 프로그램 출력을 나타내는 요소
<small>: 작은 텍스트를 나타내는 요소
<span>: 인라인 콘텐츠를 묶는 데 사용되는 일반적인 컨테이너 요소
<strong>: 텍스트를 강하게 강조하는 요소
<sub>: 아래 첨자를 나타내는 요소
<sup>: 위 첨자를 나타내는 요소
<time>: 날짜 또는 시간을 나타내는 요소
<tt>: 타자기 텍스트를 나타내는 요소 (더 이상 사용되지 않음)
<u>: 텍스트에 밑줄을 표시하는 요소
<var>: 변수를 나타내는 요소
<wbr>: 단어 분리 기회를 나타내는 요소
이미지 및 멀티미디어<area>: 이미지 맵의 영역을 정의하는 요소
<audio>: 오디오 콘텐츠를 포함하는 요소
<img>: 이미지를 삽입하는 요소
<map>: 이미지 맵을 정의하는 요소
<track>: <audio> 또는 <video> 요소의 텍스트 트랙 (자막 등)을 정의하는 요소
<video>: 비디오 콘텐츠를 포함하는 요소
임베디드 콘텐츠<embed>: 외부 애플리케이션 또는 대화형 콘텐츠를 삽입하는 요소
<iframe>: 다른 HTML 페이지를 현재 페이지에 삽입하는 요소
<object>: 외부 리소스 (이미지, 비디오, 오디오, 플러그인 등)를 삽입하는 요소
<param>: <object> 요소에 대한 매개변수를 정의하는 요소
<picture>: 여러 <source> 요소를 사용하여 반응형 이미지를 제공하는 요소
<source>: <picture>, <audio> 또는 <video> 요소에 대한 미디어 리소스를 지정하는 요소
스크립팅<canvas>: 그래픽을 그리는 데 사용되는 요소
<noscript>: 스크립트가 비활성화되었을 때 표시할 콘텐츠를 정의하는 요소
<script>: 클라이언트 측 스크립트 (JavaScript)를 포함하는 요소
편집<del>: 문서에서 삭제된 텍스트를 나타내는 요소
<ins>: 문서에 추가된 텍스트를 나타내는 요소
표 콘텐츠<caption>: 표의 제목을 나타내는 요소
<col>: 표의 열에 대한 속성을 정의하는 요소
<colgroup>: 표의 열 그룹에 대한 속성을 정의하는 요소
<table>: 표를 나타내는 요소
<tbody>: 표의 본문 내용을 나타내는 요소
<td>: 표의 셀을 나타내는 요소
<tfoot>: 표의 바닥글을 나타내는 요소
<th>: 표의 머리글 셀을 나타내는 요소
<thead>: 표의 머리글을 나타내는 요소
<tr>: 표의 행을 나타내는 요소
<button>: 클릭 가능한 버튼을 나타내는 요소
<datalist>: <input> 요소에 대한 미리 정의된 옵션 목록을 제공하는 요소
<fieldset>: 폼 컨트롤을 그룹화하는 데 사용되는 요소
<form>: 사용자 입력을 위한 HTML 폼을 나타내는 요소
<input>: 사용자 입력을 위한 컨트롤을 나타내는 요소 (텍스트 필드, 체크박스, 라디오 버튼 등)
<label>: 폼 컨트롤에 대한 레이블을 정의하는 요소
<legend>: <fieldset> 요소에 대한 캡션을 정의하는 요소
<meter>: 지정된 범위 내의 값을 나타내는 요소
<optgroup>: <select> 요소 내에서 옵션 그룹을 정의하는 요소
<option>: <select>, <optgroup> 또는 <datalist> 요소에서 옵션을 정의하는 요소
<output>: 계산 결과를 나타내는 요소
<progress>: 작업의 진행 상황을 나타내는 요소
<select>: 드롭다운 목록을 나타내는 요소
<textarea>: 여러 줄의 텍스트 입력을 위한 컨트롤을 나타내는 요소
웹 컴포넌트<slot>: 웹 컴포넌트 내에서 콘텐츠를 삽입할 수 있는 자리 표시자를 나타내는 요소
<template>: 클라이언트 측 스크립트에서 사용하기 위한 HTML 템플릿을 정의하는 요소
관련 기술
관련 기술CSS
JavaScript
DOM

2. 개념

HTML 문서는 "문서"(document)로 전달된다.[83] 이들은 구문 분석 과정을 거쳐 웹 브라우저 내에서 문서 객체 모델(DOM) 내부 표현으로 변환된다.[84][86] 이를 통해 내부 모델 그 자체가 아닌 내부 모델로의 인터페이스를 정의하게 된다. 초기 웹 브라우저들은 DOM과 관련이 거의 없는 자신들만의 내부 표현을 사용하였으며, 문서 트리(document tree)라는 용어가 사용되기도 했다.[85]

화면과 같은 웹 브라우저의 표현이나 자바스크립트의 접근은 원래의 문서가 아닌, 이 내부 모델에서 수행된다.

초기의 HTML 문서들은 오늘날 어느 정도는 크게 유효하지 않은 HTML이었으며 문법 오류 투성이었다. 이러한 오류를 해결하기 위해 파싱 과정이 필요했으며, 그 결과 모델은 정확하지는 않지만 적어도 HTML 표준에 따라 유효하다. 유효한 모델은 제공되는 태그 숩의 상태와 관계 없이 만들어지며, 극소수의 경우에만 파서가 파싱을 포기한다.

HTML 문서들은 태그를 포함하지만 요소를 포함하지는 않는다. 요소는 구문 분석 단계 "이후"에 이 태그들로부터 생성된다.[87]

요소의 위치는 시작 태그로부터 신장되며 일부 차일드 콘텐츠를 포함할 수 있으며 종료 태그로 종료된다.[87] HTML 문서 내의 다수의 요소에 해당되지만 모든 요소에 해당되는 것은 아니다.

HTML이 SGML에 기반을 두므로[88] 구문 분석 또한 DTD, 특히 HTML 4.01의 것과 같은 HTML DTD의 사용에 의존한다.[89][90] DTD는 어느 요소 유형이 가능한지 규정하며(예: HTML을 이루는 요소 유형의 집합을 정의) 문서에서 나타나는 유효한 결합도 규정한다.

일반적으로 이해되는 바와 같이, 요소의 위치는 시작 태그에서 시작하여 종료 태그로 끝나는 것으로 표시됩니다.[1] 이는 HTML 문서 내의 많은 요소에 해당하지만, 모든 요소에 해당하는 것은 아닙니다. 이러한 구분은 ''HTML 4.01 명세''에서 명시적으로 강조됩니다.[1]

W3C 권고안 '''''HTML 5.1 2nd Edition'''''은 다음과 같이 명시하고 있습니다.

'''태그'''는 마크업에서 요소의 시작과 끝을 구분하는 데 사용됩니다. (...) 특정 일반 요소의 시작 및 종료 태그는 생략될 수 있습니다. (...) 요소의 내용은 시작 태그 바로 뒤(특정 경우에 암시될 수 있음)와 종료 태그 바로 앞(다시 말하지만, 특정 경우에 암시될 수 있음) 사이에 배치되어야 합니다.[4]

특정 태그는 '''생략'''될 수 있습니다. 요소의 시작 태그를 생략한다고 해서 요소가 존재하지 않는다는 의미는 아닙니다. 이는 암시되지만 여전히 존재합니다. 예를 들어, HTML 문서는 문자열 ``이 마크업 어디에도 나타나지 않더라도 항상 루트 `` 요소를 갖습니다.

HTML은 (HTML5 이전) SGML을 기반으로 하기 때문에, 구문 분석 또한 DTD (Document Type Definition) 특히 HTML DTD (예: HTML 4.01)에 따라 달라집니다. DTD는 어떤 요소 유형이 가능한지 그리고 문서에서 나타날 수 있는 유효한 조합을 지정합니다. DTD에 따라 유효한 구조가 하나만 가능한 경우, 주어진 문서에서 명시적으로 선언할 필요가 일반적으로 없다는 것은 일반적인 SGML의 동작입니다.

HTML5는 어떤 태그를 생략할 수 있는지 정의함으로써 유사한 결과를 만듭니다.[4]

HTML은 SGML에 기반하고 있다. SGML은 복잡하여 널리 이해되고 채택되는 데 제한이 있었다. 더 단순한 대안으로 XML이 개발되었다. 둘 다 DTD를 사용하여 지원되는 요소와 허용되는 조합을 문서 구조로 지정할 수 있지만, XML 파싱이 더 간단하다. 태그에서 요소로의 관계는 SGML의 일부인 암시적 닫힘 없이, 문서에 포함된 실제 태그를 파싱하는 관계이다.

현재 웹에서 사용되는 HTML은 XHTML이거나 HTML5로 처리되어 XML로 처리될 가능성이 높다. 어느 경우든, 문서 태그를 문서 객체 모델(DOM) 요소로 파싱하는 것은 레거시 HTML 시스템에 비해 단순화되었다.

HTML을 표기하기 위한 구문은 고유한 HTML 구문과 XML 애플리케이션인 XML 구문으로 크게 나뉜다. HTML 구문은 HTML 2~4.01까지 SGML 애플리케이션으로 정의되었다. 그러나 현실적으로는 웹 브라우저의 대부분에서 SGML로 처리되지 않아 SGML임을 포기하고 독자적으로 구문을 정의하게 되었다[65][66]。 다른 한편, XML 구문은 XHTML에서 유래한다.

CSS 표현 동작의 일부는 박스 모델의 개념이다. 이것은 CSS가 블록 요소로 간주되는 요소들에 적용되며 CSS `display: block;` 선언을 통해 설정된다.

HTML 또한 차이는 있지만 유사 개념이 있으며 이 둘이 종종 혼동된다. `%block;`과 `%inline;`은 "block-level" 또는 "inline"으로 요소들을 묶는 HTML DTD 내의 그룹들이다.[91]

이것을 사용하면 네스팅(nesting) 동작을 정의할 수 있다: block-level 요소들은 inline 컨텍스트에 추가할 수 없다.[92] 이 동작은 변경할 수 없고 DTD 안에 고정된다.

블록 및 인라인 요소는 기본적으로 적절하고 다른 CSS 동작을 가지고 있으며,[6] 특정 요소 유형에 대한 박스 모델의 관련성을 포함한다.

하지만 이러한 CSS 동작은 기본값에서 변경될 수 있으며, 자주 변경된다는 점에 유의해야 한다. `

  • ...`가 포함된 목록은 `%block;` 요소이며 기본적으로 블록 요소로 표시된다. 그러나 CSS를 사용하여 인라인 목록으로 표시되도록 설정하는 것이 매우 일반적이다.[7]

    2. 1. 문서와 DOM

    HTML 문서들은 "문서"(document)로 전달된다.[83] 이들은 구문 분석 과정을 거쳐 웹 브라우저 내에서 문서 객체 모델(DOM) 내부 표현으로 변환된다.[84][86] 이를 통해 내부 모델 그 자체가 아닌 내부 모델로의 인터페이스를 정의하게 된다. 초기 웹 브라우저들은 DOM과 관련이 거의 없는 자신들만의 내부 표현을 사용하였으며, 문서 트리(document tree)라는 용어가 사용되기도 했다.[85]

    화면과 같은 웹 브라우저의 표현이나 자바스크립트의 접근은 원래의 문서가 아닌, 이 내부 모델에서 수행된다.

    초기의 HTML 문서들은 오늘날 어느 정도는 크게 유효하지 않은 HTML이었으며 문법 오류 투성이었다. 이러한 오류를 해결하기 위해 파싱 과정이 필요했으며, 그 결과 모델은 정확하지는 않지만 적어도 HTML 표준에 따라 유효하다. 유효한 모델은 제공되는 태그 숩의 상태와 관계 없이 만들어지며, 극소수의 경우에만 파서가 파싱을 포기한다.

    2. 2. 요소와 태그

    HTML 문서들은 태그를 포함하지만 요소를 포함하지는 않는다. 요소는 구문 분석 단계 "이후"에 이 태그들로부터 생성된다.[87]

    요소의 위치는 시작 태그로부터 신장되며 일부 차일드 콘텐츠를 포함할 수 있으며 종료 태그로 종료된다.[87] HTML 문서 내의 다수의 요소에 해당되지만 모든 요소에 해당되는 것은 아니다.

    HTML이 SGML에 기반을 두므로[88] 구문 분석 또한 DTD, 특히 HTML 4.01의 것과 같은 HTML DTD의 사용에 의존한다.[89][90] DTD는 어느 요소 유형이 가능한지 규정하며(예: HTML을 이루는 요소 유형의 집합을 정의) 문서에서 나타나는 유효한 결합도 규정한다.

    HTML의 문서의 일부는

    ```html

    Para 1

    Para 2

    Para 3

    ```

    다음과 동등한 것으로 추론한다:

    ```html

    Para 1

    Para 2

    Para 3

    ```

    일반적으로 이해되는 바와 같이, 요소의 위치는 시작 태그에서 시작하여 종료 태그로 끝나는 것으로 표시됩니다.[1] 이는 HTML 문서 내의 많은 요소에 해당하지만, 모든 요소에 해당하는 것은 아닙니다. 이러한 구분은 ''HTML 4.01 명세''에서 명시적으로 강조됩니다.[1]

    W3C 권고안 '''''HTML 5.1 2nd Edition'''''은 다음과 같이 명시하고 있습니다.

    '''태그'''는 마크업에서 요소의 시작과 끝을 구분하는 데 사용됩니다. (...) 특정 일반 요소의 시작 및 종료 태그는 생략될 수 있습니다. (...) 요소의 내용은 시작 태그 바로 뒤(특정 경우에 암시될 수 있음)와 종료 태그 바로 앞(다시 말하지만, 특정 경우에 암시될 수 있음) 사이에 배치되어야 합니다.[4]

    특정 태그는 '''생략'''될 수 있습니다. 요소의 시작 태그를 생략한다고 해서 요소가 존재하지 않는다는 의미는 아닙니다. 이는 암시되지만 여전히 존재합니다. 예를 들어, HTML 문서는 문자열 ``이 마크업 어디에도 나타나지 않더라도 항상 루트 `` 요소를 갖습니다.

    HTML은 (HTML5 이전) SGML을 기반으로 하기 때문에, 구문 분석 또한 DTD (Document Type Definition) 특히 HTML DTD (예: HTML 4.01)에 따라 달라집니다. DTD는 어떤 요소 유형이 가능한지 그리고 문서에서 나타날 수 있는 유효한 조합을 지정합니다. DTD에 따라 유효한 구조가 하나만 가능한 경우, 주어진 문서에서 명시적으로 선언할 필요가 일반적으로 없다는 것은 일반적인 SGML의 동작입니다.

    HTML5는 어떤 태그를 생략할 수 있는지 정의함으로써 유사한 결과를 만듭니다.[4]

    2. 3. SGML과 XML

    HTML은 SGML에 기반하고 있다. SGML은 복잡하여 널리 이해되고 채택되는 데 제한이 있었다. 더 단순한 대안으로 XML이 개발되었다. 둘 다 DTD를 사용하여 지원되는 요소와 허용되는 조합을 문서 구조로 지정할 수 있지만, XML 파싱이 더 간단하다. 태그에서 요소로의 관계는 SGML의 일부인 암시적 닫힘 없이, 문서에 포함된 실제 태그를 파싱하는 관계이다.

    현재 웹에서 사용되는 HTML은 XHTML이거나 HTML5로 처리되어 XML로 처리될 가능성이 높다. 어느 경우든, 문서 태그를 문서 객체 모델(DOM) 요소로 파싱하는 것은 레거시 HTML 시스템에 비해 단순화되었다.

    HTML을 표기하기 위한 구문은 고유한 HTML 구문과 XML 애플리케이션인 XML 구문으로 크게 나뉜다. HTML 구문은 HTML 2~4.01까지 SGML 애플리케이션으로 정의되었다. 그러나 현실적으로는 웹 브라우저의 대부분에서 SGML로 처리되지 않아 SGML임을 포기하고 독자적으로 구문을 정의하게 되었다[65][66]。 다른 한편, XML 구문은 XHTML에서 유래한다.

    2. 3. 1. %block;과 box

    CSS 표현 동작의 일부는 박스 모델의 개념이다. 이것은 CSS가 블록 요소로 간주되는 요소들에 적용되며 CSS `display: block;` 선언을 통해 설정된다.

    HTML 또한 차이는 있지만 유사 개념이 있으며 이 둘이 종종 혼동된다. `%block;`과 `%inline;`은 "block-level" 또는 "inline"으로 요소들을 묶는 HTML DTD 내의 그룹들이다.[91]

    이것을 사용하면 네스팅(nesting) 동작을 정의할 수 있다: block-level 요소들은 inline 컨텍스트에 추가할 수 없다.[92] 이 동작은 변경할 수 없고 DTD 안에 고정된다.

    블록 및 인라인 요소는 기본적으로 적절하고 다른 CSS 동작을 가지고 있으며,[6] 특정 요소 유형에 대한 박스 모델의 관련성을 포함한다.

    하지만 이러한 CSS 동작은 기본값에서 변경될 수 있으며, 자주 변경된다는 점에 유의해야 한다. `
    • ...`가 포함된 목록은 `%block;` 요소이며 기본적으로 블록 요소로 표시된다. 그러나 CSS를 사용하여 인라인 목록으로 표시되도록 설정하는 것이 매우 일반적이다.[7]

      2. 4. 문법

      HTML 문법에서 대부분의 요소들은 시작 태그와 종료 태그로 작성되며 그 사이에 내용이 들어간다. HTML 태그는 요소 이름, 또 그 요소를 둘러싸는 꺾쇠괄호로 이루어진다. 종료 태그 또한 꺾쇠괄호를 연 뒤 슬래시를 넣어 시작 태그와 구별한다. 이를테면 `p` 요소로 대표되는 문단은 다음과 같이 작성한다:[4]

      ```html

      In the HTML syntax, most elements are written ...



      ```

      그러나 모든 요소에 종료 태그가 "필수"인 것은 아니며 시작 태그 또한 마찬가지이다. 이른바 빈 요소(empty elements, void elements)로 불리는 일부 요소들은 종료 태그가 없다. 일반적인 예가 `br` 요소이며, 주소나 시와 같은 곳에서 중요한 줄 나눔을 표현한다. 빈 요소의 동작은 미리 정의되므로 어떠한 내용이나 다른 요소가 포함될 수 없다. 이를테면 주소는 다음과 같이 쓸 수 있다:[4]

      ```html

      P. Sherman
      42 Wallaby Way
      Sydney



      ```

      XHTML DTD를 사용할 때 하나의 태그로 요소를 열고 닫아야 한다. 빈 요소임을 지정하려면 "/"를 태그 끝에 포함시킨다. (닫는 태그의 시작부의 "/"와 혼동하지 말 것)[4]

      ```html

      P. Sherman
      42 Wallaby Way
      Sydney



      ```

      HTML 속성은 시작 태그 안에 지정한다. 이를테면 `abbr` 요소는 축약을 의미하며 `title` 속성이 여는 태그 안에 있을 것이라 예측하는 예는 다음과 같다:[4]

      ```html

      abbr.



      ```

      여러 조율의 HTML 요소가 있다: 빈 요소(void elements), 순수 텍스트 요소(raw text elements), 일반 요소(normal elements).

      비공식적으로 HTML 요소는 때때로 "태그"라고도 합니다(환유법의 예). 하지만 많은 사람들이 ''태그''라는 용어를 요소의 시작과 끝을 구분하는 마크업에만 엄격하게 사용하는 것을 선호한다.

      HTML에서는 요소(및 속성) 이름을 대문자와 소문자의 조합으로 작성할 수 있지만, XHTML에서는 소문자로 작성해야 한다.[8] 정식 형식은 HTML 4까지 대문자였으며 HTML 사양에 사용되었지만, 최근에는 소문자가 더 일반적이다.

      예)

      ```html

      강조 부분입니다.

      ```

      요소(element)는 시작 태그(Start-tag)・내용(Content)・종료 태그(End-tag)의 3가지로 구성된다.[64] 요소는 '''<'''와 '''>'''로 둘러싸인 시작 태그로 시작하며, '''</'''와 '''>'''로 둘러싸인 종료 태그로 끝난다. 시작 태그와 종료 태그 사이에 있는 부분이 내용이 된다. 또한 시작 태그 내에는 임의 개수의 속성(attribute)과 속성값(value)의 쌍(HTML 속성(HTML attribute))을 포함할 수 있다.

      "요소"와 "태그"는 이러한 관계에 있으며, 명확하게 구분하고 용어도 명확하게 사용해야 한다.

      또한 XML에서는 시작 태그나 종료 태그와 별도로, 빈 요소(空要素, Empty-Element Tags)를 위한 빈 요소 태그가 규정되어 있다. 빈 요소 태그는 '''<'''와 '''/>'''로 둘러싸이며, 내용을 갖지 않는다. 의미는 '''<elem></elem>'''와 같이 기술된 경우와 기본적으로는 완전히 동일하게 취급된다(도구류의 구현에 따라 내부적으로 식별하는 경우도 있다).

      2. 4. 1. 요소의 종류

      HTML 요소에는 일반 요소, 원시 텍스트 요소, 빈 요소의 세 가지 종류가 있다.

      '''일반 요소'''는 보통 시작 태그와 종료 태그를 모두 가지고 있지만, 일부 요소의 경우 종료 태그 또는 두 태그 모두 생략될 수 있다. 다음과 같은 방식으로 구성된다.

      • 요소의 시작을 나타내는 ''시작 태그''는 임의의 수의 HTML 속성을 포함할 수 있다.
      • 텍스트 및 기타 요소를 포함하는 어느 정도의 ''내용''.
      • 요소 이름 앞에 슬래시가 붙는 ''종료 태그''.


      '''원시 텍스트 요소''' (텍스트 또는 텍스트 전용 요소라고도 함)는 다음과 같이 구성된다.

      • 요소의 시작을 나타내는 ''시작 태그''는 임의의 수의 HTML 속성을 포함할 수 있다.
      • 약간의 텍스트 ''내용''이지만 요소는 없음 (해당 종료 태그를 제외한 모든 태그는 내용으로 해석된다).
      • 요소 이름 앞에 슬래시가 붙는 ''종료 태그''. HTML의 일부 버전에서는 일부 요소에 대해 종료 태그가 선택 사항이다. XHTML에서는 종료 태그가 필수이다.

      예를 들어 title영어 요소는 다른 요소(텍스트 마크업 포함)를 포함할 수 없으며 일반영어 텍스트만 포함해야 한다.

      '''빈 요소''' (비어 있는 요소, 단일 요소 또는 독립형 요소라고도 함)는 시작 태그만 있으며, 여기에는 모든 HTML 속성이 포함된다. 텍스트나 다른 요소와 같은 자식을 포함할 수 없다. XHTML과의 호환성을 위해 HTML 사양은 선택적 공백과 슬래시를 허용한다. 슬래시는 XHTML 및 기타 XML 애플리케이션에 필요하다. 두 가지 일반적인 빈 요소는 br영어 (강제 줄 바꿈, 예를 들어 시 또는 주소) 및 hr영어(주제별 구분)이다. 기타 요소는 이미지(img영어) 요소와 같이 외부 파일을 참조하는 자리 표시자이다. 요소에 포함된 속성은 해당 외부 파일을 가리킨다. 빈 요소의 또 다른 예는 link영어이며, 구문은 다음과 같다.

      link영어 요소는 HTML 문서를 사용자에게 표시할 때 사용할 스타일 시트를 브라우저에 가리킨다. HTML 구문에서 속성은 문자와 숫자, 하이픈 마이너스 및 마침표와 같은 특정 문자로만 구성된 경우 따옴표로 묶을 필요가 없다. 반면에 XML 구문(XHTML)을 사용할 때는 모든 속성을 따옴표로 묶어야 하며, 마지막 꺾쇠 괄호 앞에 공백이 있는 후행 슬래시가 필요하다.

      요소(element)는 시작 태그(Start-tag)・내용(Content)・종료 태그(End-tag)의 3가지로 구성된다.[64] 요소는 '''<'''와 '''>'''로 둘러싸인 시작 태그로 시작하며, '''</'''와 '''>'''로 둘러싸인 종료 태그로 끝난다. 시작 태그와 종료 태그 사이에 있는 부분이 내용이 된다. 또한 시작 태그 내에는 임의 개수의 속성(attribute)과 속성값(value)의 쌍(HTML 속성(HTML attribute))을 포함할 수 있다.

      "요소"와 "태그"는 이러한 관계에 있으며, 명확하게 구분하고 용어도 명확하게 사용해야 한다.

      또한 XML에서는 시작 태그나 종료 태그와 별도로, 빈 요소(空要素, Empty-Element Tags)를 위한 빈 요소 태그가 규정되어 있다. 빈 요소 태그는 '''<'''와 '''/>'''로 둘러싸이며, 내용을 갖지 않는다. 의미는 '''<elem></elem>'''와 같이 기술된 경우와 기본적으로는 완전히 동일하게 취급된다(도구류의 구현에 따라 내부적으로 식별하는 경우도 있다).

      2. 4. 2. 속성




      2. 4. 3. 요소 표준

      HTML 요소는 1995년부터 처음에는 IETF에서, 이후에는 W3C에서 발행한 일련의 자유롭게 이용 가능한 개방형 표준으로 정의된다.

      1990년대의 브라우저 전쟁 동안, 사용자 에이전트 (예: 웹 브라우저) 개발자들은 종종 자체 요소를 개발했으며, 일부는 이후 표준에 채택되었다. 다른 사용자 에이전트는 비표준 요소를 인식하지 못할 수 있으며, 무시되어 페이지가 부적절하게 표시될 수 있다.

      1998년, XML (SGML의 단순화된 형태)은 누구나 자체 요소를 개발하여 XML을 인식하는 사용자 에이전트와 함께 사용하기 위해 XHTML 문서에 통합할 수 있는 메커니즘을 도입했다.[9]

      그 후, HTML 4.01은 XML 호환 형식인 XHTML 1.0 (''확장 가능한 HTML'')으로 다시 작성되었다. 각 요소는 동일하며, 대부분의 경우 유효한 XHTML 1.0 문서는 유효하거나 거의 유효한 HTML 4.01 문서가 된다. 이 문서는 달리 명시되지 않는 한 주로 실제 HTML에 중점을 둔다. 그러나 XHTML에도 적용된다. 두 가지의 사소한 차이점에 대한 논의는 HTML을 참조하십시오.

      2. 4. 4. 요소 상태

      HTML의 첫 번째 버전 이후, 여러 요소가 구식이 되었고, 이후 표준에서 ''폐지''되거나 아예 나타나지 않게 되었다. 이러한 경우 요소는 ''유효하지 않음''으로 간주된다(그리고 유효성 검사 사용자 에이전트에 의해 유효하지 않음으로 간주되고, 표시되지 않을 수 있음).[10]

      HTML 4.01 / XHTML 1.0에서 요소의 상태는 세 가지 유형의 DTD의 존재로 인해 복잡해진다.

      • '''과도기''': 폐지된 요소를 포함하지만, 작성자가 자신의 방식을 업데이트할 수 있는 과도기를 제공하기 위한 것임.
      • '''프레임셋''': 작성자가 '''프레임셋''' 문서를 작성할 수 있도록 허용하는 과도기 DTD의 버전임.
      • '''엄격''': 최신(1999년 기준) 형태의 HTML임.


      HTML5는 대신 '''표준화'''된 규범적 내용과 함께 '''구식''' 기능 목록을 제공한다. 이는 구현 지침이 존재하는 "구식이지만 준수"와 대체되어야 하는 "비준수"로 분류된다.[11]

      최초 표준(HTML 2.0)에는 네 개의 폐지된 요소가 포함되어 있었고, 그 중 하나는 HTML 3.2에서 유효하지 않았다. 네 개의 요소 모두 HTML 4.01 과도기에서 유효하지 않으며, 여기에는 추가로 10개의 요소가 더 폐지되었다. 이들 모두와 다른 두 개의 요소는 HTML 4.01 엄격에서 유효하지 않다. 프레임 요소는 과도기 및 프레임셋 DTD에 존재한다는 의미에서 여전히 유효하지만, 해당 기능이 대부분 대체되었고 사용자 접근성에 매우 문제가 많으므로 향후 표준에서는 보존할 계획이 없다.

      (엄밀히 말하면, 가장 최근의 ''XHTML'' 표준인 XHTML 1.1 (2001)은 프레임을 전혀 포함하지 않는다. 이는 XHTML 1.0 엄격과 거의 동일하지만, '''루비 마크업''' 모듈도 포함한다.)[12]

      일반적인 혼란의 원인은 폐지된 상태와 유효하지 않은 상태 모두를 지칭하고, 미래에 공식적으로 폐지될 것으로 예상되는 요소들을 지칭하기 위해 ''폐지''라는 용어를 느슨하게 사용한다는 것이다.

      2. 4. 5. 내용, 표현, 동작의 분리

      HTML 4 이후로 HTML은 내용(보이는 텍스트 및 이미지)과 표현(색상, 글꼴 크기 및 레이아웃 등)의 분리에 점점 더 집중해 왔다.[13] 이는 종종 관심사 분리라고 불린다. HTML은 문서의 구조 또는 내용을 나타내는 데 사용되며, 표현은 CSS 스타일 시트의 고유한 책임으로 남아 있다. CSS 표준의 일부로 기본 스타일 시트가 제안되어 HTML에 대한 기본 렌더링을 제공한다.[14]

      동작(상호 작용) 또한 내용과 분리되어 있으며, 스크립트에 의해 처리된다. 이미지는 텍스트와 별개로 별도의 그래픽 파일에 포함되지만, 페이지 내용의 일부로 간주될 수도 있다.

      관심사 분리는 문서가 목적과 능력에 따라 다양한 사용자 에이전트에 의해 표시될 수 있도록 한다. 예를 들어, 사용자 에이전트는 모니터에 표시하거나, 종이에 인쇄하거나, 오디오 전용 사용자 에이전트에서 음성 특성을 결정하여 문서를 표시하기 위해 적절한 스타일 시트를 선택할 수 있다. 마크업의 구조적 및 의미적 기능은 각 경우에 동일하게 유지된다.

      역사적으로 사용자 에이전트는 항상 이러한 기능을 지원하지는 않았다. 1990년대에는 임시 방편으로 표현 요소( <b> 및 <i> 와 같은)가 HTML에 추가되었으며, 상호 운용성 및 사용자 접근성에 문제를 야기했다. 이는 이제 구식으로 간주되어 스타일 시트 기반 설계로 대체되었으며, 대부분의 표현 요소는 이제 사용이 중단되었다.[15]

      외부 이미지 파일은 <img> 또는 <object> 요소를 사용하여 통합된다. (XHTML을 사용하면 SVG 언어를 사용하여 문서 내에 그래픽을 작성할 수도 있지만, 일반적으로 외부 SVG 파일에 연결하는 것이 더 간단하다.)[16] 이미지가 순전히 장식적인 것이 아닌 경우, HTML은 비시각적 사용자 에이전트를 위해 유사한 의미 값을 가진 대체 콘텐츠를 제공할 수 있다.

      HTML 문서는 HTML 하이퍼링크 및 양식의 기능을 넘어 추가적인 행동을 제공하기 위해 스크립트를 사용하여 확장할 수도 있다.

      <style> 및 <script> 요소는 관련 HTML 속성과 함께 스타일 시트 및 스크립트를 제공한다.

      • 문서 헤드에서 <style> 및 <script>는 공유된 외부 문서에 연결될 수 있으며, <style> 및 <script>는 포함된 지침을 포함할 수 있다. (<link> 요소는 스타일 시트를 연결하는 데에도 사용할 수 있다.)
      • <script> 또는 <script>는 문서의 어느 지점(헤드 또는 바디)에서든 발생할 수 있다.
      • `style` 속성은 인라인 스타일 지침을 포함하기 위해 대부분의 문서 바디 요소(예: <div style="...">)에서 유효하다.
      • 스크립트에 대한 링크를 제공하는 ''이벤트 처리 속성''은 대부분의 요소에서 선택 사항이다.
      • 스크립트를 작동하지 않는 사용자 에이전트의 경우, <noscript> 요소는 적절한 경우 포함된 대체 콘텐츠를 제공하지만, 문서 헤드와 바디에서 블록 레벨 요소로만 사용할 수 있다.

      3. HTML 문서 구조

      HTML 문서는 ``, ``, `` 요소를 사용하여 기본적인 구조를 정의한다.[93] `` 요소는 HTML 문서의 루트 요소이며, 다른 모든 요소를 포함한다.[4] `` 요소는 HTML 문서의 처리 정보 및 메타데이터를 위한 컨테이너 역할을 한다. `` 요소는 HTML 문서의 표시 가능한 콘텐츠를 담는 컨테이너이다.[4]

      HTML 문서는 헤더 부분과 본문 부분으로 나뉘며, 루트 요소인 `` 요소 바로 아래에는 `` 요소와 `` 요소가 순서대로 위치한다.


      • ``: HTML 문서의 루트(document root element)를 정의한다. 시작 태그와 종료 태그는 생략 가능하다(HTML5).[4] HTML 2.0에서 표준화되었다.
      • ``: HTML 문서의 헤더 부분(document head)을 지정한다. 문서 자체에 관한 정보 (예: 제목, 스타일시트 정보)를 포함할 수 있다. 시작 태그와 종료 태그는 생략 가능하다(HTML5).[4] HTML 5.0에서 표준화되었다.
      • ``: HTML 문서의 본문 부분(document body)을 지정한다. 시작 태그와 종료 태그는 생략 가능하다(HTML5).[4] HTML 2.0에서 표준화되었다.


      HTML 문서의 기본 구조는 다음과 같다:

      ```html





      head 요소 아래에 올 수 있는 요소들.

      title 요소 등을 시작으로 해당 HTML 문서 자체에 관한 정보로 구성된다.





      body 요소 아래에 올 수 있는 요소들.

      HTML 문서의 본문이 되는 정보를 기술한다.




      3. 1. 문서 구조 요소

      HTML 문서는 ``, ``, `` 요소를 사용하여 기본적인 구조를 정의한다.[93] `` 요소는 HTML 문서의 루트 요소이며, 다른 모든 요소를 포함한다.[4] `` 요소는 HTML 문서의 처리 정보 및 메타데이터를 위한 컨테이너 역할을 한다. `` 요소는 HTML 문서의 표시 가능한 콘텐츠를 담는 컨테이너이다.[4]

      HTML 문서는 헤더 부분과 본문 부분으로 나뉘며, 루트 요소인 `` 요소 바로 아래에는 `` 요소와 `` 요소가 순서대로 위치한다.

      • ``: HTML 문서의 루트(document root element)를 정의한다. 시작 태그와 종료 태그는 생략 가능하다(HTML5).[4] HTML 2.0에서 표준화되었다.
      • ``: HTML 문서의 헤더 부분(document head)을 지정한다. 문서 자체에 관한 정보 (예: 제목, 스타일시트 정보)를 포함할 수 있다. 시작 태그와 종료 태그는 생략 가능하다(HTML5).[4] HTML 5.0에서 표준화되었다.
      • ``: HTML 문서의 본문 부분(document body)을 지정한다. 시작 태그와 종료 태그는 생략 가능하다(HTML5).[4] HTML 2.0에서 표준화되었다.


      HTML 문서의 기본 구조는 다음과 같다:

      ```html





      head 요소 아래에 올 수 있는 요소들.

      title 요소 등을 시작으로 해당 HTML 문서 자체에 관한 정보로 구성된다.





      body 요소 아래에 올 수 있는 요소들.

      HTML 문서의 본문이 되는 정보를 기술한다.




      3. 2. 문서 헤드 요소

      HTML 문서의 `` 요소 내에 포함될 수 있는 요소들은 다음과 같다.[93]

      • ``: 문서 내의 모든 상대적인 `href` 및 기타 링크에 대한 기본 URL을 지정한다. 외부 리소스를 참조하는 요소보다 먼저 나타나야 하며, 각 문서에 하나의 `` 요소만 허용된다. 이 요소에는 HTML 속성이 있지만 내용은 없다.[93] 상대 경로의 기준 URL (document base URI)을 `href` 속성으로 지정한다.
      • ``: 이전 및 다음 링크 또는 대체 버전을 포함한 다른 문서에 대한 링크를 지정한다.[17] 일반적인 사용법은 `` 형태를 사용하여 외부 스타일 시트에 연결하는 것이다.[18] 자기 자신과 href 속성으로 지정한 파일과의 관계를 rel 속성으로 정의한다. rel 속성은 HTML4.01에서 유효한 것으로는 ''alternate, stylesheet, start, next, prev, contents, index, glossary, copyright, chapter, section, subsection, appendix, help, bookmark''가 있으며, 그 외에 사용되는 것으로는 ''shortcut icon''이 있다.
      • ``: 저자, 게시 날짜, 만료 날짜, 언어, 페이지 제목, 페이지 설명, 키워드 또는 다른 헤더 요소 및 HTML 속성을 통해 제공되지 않은 기타 정보와 같은 문서에 대한 추가적인 메타데이터를 지정하는 데 사용될수 있다.[93] 일반적인 특성으로 인해 `` 요소는 연관된 키-값 쌍을 지정한다. 일반적으로 메타 요소는 문서에 대한 숨겨진 정보를 전달하며, 여러 개의 메타 태그를 사용 할 수 있다.[93] 문서의 정보 (generic metainformation)를 정의한다.
      • ``: 문서 헤더 내에 일반적인 객체를 포함하는 데 사용된다. `` 요소 내에서 거의 사용되지 않지만, 외부 데이터를 추출하여 현재 문서와 연결하는 데 잠재적으로 사용될 수 있다.[93] 임베디드 객체 (generic embedded object)임을 나타낸다. 대개 인라인 요소로 사용하며, data 속성에 URI、type 속성에 MIME 타입(image/gif 등)을 지정하여 FLASH나 음악 등 다양한 종류의 객체를 출력할 수 있다.
      • `