본문으로 이동

HTML 요소

위키백과, 우리 모두의 백과사전.

HTML 요소 또는 HTML 엘리먼트(HTML element)는 HTML (하이퍼텍스트 마크업 언어) 문서 구성 요소의 한 유형으로, 여러 HTML 노드 유형 중 하나이다(일반적인 노드 유형으로는 문서, 문서 단편, 속성 노드 등이 있다).[1] 최초로 사용된 HTML 버전은 1993년 팀 버너스리에 의해 작성되었으며 그 이후로 많은 HTML 버전이 등장했다. 현재의 사실상 표준은 산업 단체인 WHATWG가 관리하며 HTML Living Standard로 알려져 있다.

HTML 문서는 텍스트 노드와 같은 단순한 HTML 노드들과 문서의 부분에 의미론과 서식을 추가하는 HTML 요소들의 트리로 구성된다(예: 텍스트를 굵게 만들기, 단락·목록·표로 조직하기, 하이퍼링크와 영상을 삽입하기 등). 각 요소에는 HTML 속성을 지정할 수 있다. 요소는 다른 요소와 텍스트를 포함한 콘텐츠를 가질 수도 있다.

개념

[편집]
Euler diagram of HTML element content categories.
HTML 요소 콘텐츠 카테고리

요소와 태그의 차이

[편집]

일반적으로 이해되는 바와 같이, 요소의 위치는 시작 태그에서 시작하여 종료 태그로 끝나는 범위로 표시된다.[2] 이는 HTML 문서 내의 많은 요소에 해당하지만 모든 요소가 그런 것은 아니다. HTML 4.01 사양에서는 이 차이를 명시적으로 강조한다.[3]

요소는 태그가 아니다. 어떤 사람들은 요소를 태그라고 부른다(예: "P 태그"). 요소는 하나의 사물이며, 태그(시작 태그든 종료 태그든)는 또 다른 사물임을 기억하라. 예를 들어, HEAD 요소는 마크업에서 시작 및 종료 HEAD 태그가 모두 누락되더라도 항상 존재한다.

마찬가지로 W3C 권고안 HTML 5.1 2판에서도 다음과 같이 명시하고 있다.[4]

태그는 마크업에서 요소의 시작과 끝을 구분하는 데 사용된다. [...] 특정 일반 요소의 시작 및 종료 태그는 생략할 수 있다. [...]
요소의 콘텐츠는 시작 태그(특정 경우에는 암시될 수 있음) 바로 뒤와 종료 태그(이 또한 특정 경우에는 암시될 수 있음) 바로 앞에 배치되어야 한다.

그리고 다음과 같이 덧붙인다.[4]

특정 태그는 생략할 수 있다.
참고:
요소의 시작 태그를 생략한다고 해서 [...] 요소가 존재하지 않는다는 의미는 아니다. 그것은 암시된 것이지만 여전히 그곳에 존재한다. 예를 들어, 마크업의 어느 곳에도 <html> 문자열이 나타나지 않더라도 HTML 문서는 항상 루트 <html> 요소를 가진다.

HTML(HTML5 이전)은 SGML을 기반으로 하므로,[5] 구문 분석 또한 문서 형식 정의(DTD), 구체적으로는 HTML DTD(예: HTML 4.01)에 의존한다.[6][note 1] DTD는 어떤 요소 유형이 가능한지(즉, 요소 유형의 집합을 정의함)와 문서에서 나타날 수 있는 유효한 조합을 명시한다. 오직 하나의 유효한 구조만이 가능한 경우(DTD에 따라), 특정 문서에서 이를 명시적으로 진술하는 것은 일반적으로 요구되지 않는다는 것이 일반적인 SGML의 동작이다. 간단한 예로, 단락 요소의 시작을 나타내는 <p> 태그는 끝을 나타내는 </p> 태그로 보완되어야 한다. 그러나 DTD에서 단락 요소는 중첩될 수 없다고 규정하고 있으므로, HTML 문서 단편 <p>Para 1 <p>Para 2 <p>Para 3는 <p>Para 1 </p><p>Para 2 </p><p>Para 3와 동일한 것으로 추론된다. (하나의 단락 요소가 다른 단락 요소를 포함할 수 없다면, 현재 열려 있는 단락은 다른 단락을 시작하기 전에 닫혀야 하기 때문이다.) 이러한 함의는 DTD와 개별 문서의 조합에 근거하기 때문에, 일반적으로 문서 태그만으로 요소를 추론하는 것은 불가능하며 DTD에 대한 지식이 있는 SGML 또는 HTML 인식 파서를 사용해야만 가능하다. HTML5는 어떤 태그를 생략할 수 있는지 정의함으로써 유사한 결과를 만들어낸다.[7]

SGML 대 XML

[편집]

SGML은 복잡하여 널리 이해되고 채택되는 데 한계가 있었다. XML은 더 단순한 대안으로 개발되었다. 두 가지 모두 DTD를 사용하여 지원되는 요소와 허용된 조합을 문서 구조로 지정할 수 있지만, XML 구문 분석은 더 간단하다. 태그에서 요소로의 관계는 항상 문서에 포함된 실제 태그를 파싱하는 것이며, SGML의 일부인 암시적 폐쇄는 존재하지 않는다.[note 2]

현재 웹에서 사용되는 HTML은 XHTML로서 XML로 취급되거나 HTML5로 취급될 가능성이 높다. 어느 경우든 문서 태그를 문서 객체 모델(DOM) 요소로 파싱하는 것은 기존의 HTML 시스템에 비해 단순화되었다. 일단 요소의 DOM을 얻으면 인터페이스의 상위 수준에서의 동작(예: 화면 렌더링)은 동일하거나 거의 유사하다.[note 3]

%block; 대 박스

[편집]

CSS 프레젠테이션 동작의 일부는 "박스 모델"이라는 개념이다. 이는 CSS가 CSS display: block; 선언을 통해 "블록(block)" 요소로 간주하는 요소들에 적용된다.

HTML 또한 다르지만 유사한 개념을 가지고 있으며, 이 둘은 매우 자주 혼동된다. %block;과 %inline;은 HTML DTD 내에서 요소를 "블록 수준(block-level)" 또는 "인라인(inline)"으로 그룹화하는 그룹이다.[9] 이는 중첩 동작을 정의하는 데 사용된다. 블록 수준 요소는 인라인 컨텍스트 안에 배치될 수 없다.[note 4] 이 동작은 변경할 수 없으며 DTD에 고정되어 있다. 블록 및 인라인 요소는 특정 요소 유형에 대한 박스 모델의 관련성을 포함하여 기본적으로 적절하고 상이한 CSS 동작이 연결되어 있다.[9]

그러나 이 CSS 동작은 기본값에서 변경될 수 있으며 실제로 자주 변경된다는 점에 유의하라. <ul><li> ...가 포함된 목록은 %block; 요소이며 기본적으로 블록 요소로 표시된다. 그러나 CSS를 사용하여 이를 인라인 목록으로 표시하도록 설정하는 것은 매우 흔한 일이다.[10]

개요

[편집]

구문

[편집]
HTML 컨테이너 요소의 일부

HTML 구문에서 대부분의 요소는 시작 태그와 종료 태그로 작성되며 그 사이에 콘텐츠가 위치한다. HTML 태그는 요소의 이름과 이를 둘러싼 각괄호로 구성된다. 종료 태그는 시작 태그와 구별하기 위해 여는 각괄호 뒤에 빗금을 추가한다. 예를 들어, <p> 요소로 표현되는 단락은 다음과 같이 작성된다.

<p>HTML 구문에서 대부분의 요소는 다음과 같이 작성된다 ...</p>

그러나 이러한 모든 요소가 시작 태그나 종료 태그의 존재를 반드시 요구하는 것은 아니다.[7] 소위 빈 요소(void elements)라 불리는 일부 요소들은 종료 태그를 가지지 않는다. 대표적인 예로 <br> (강제 줄바꿈) 요소가 있다. 빈 요소의 동작은 미리 정의되어 있으며 콘텐츠나 다른 요소를 포함할 수 없다. 예를 들어, 주소는 다음과 같이 작성될 수 있다.

<p>P. 셔먼<br>월러비 가 42<br>시드니</p>

XHTML을 사용할 때는 빈 요소를 포함한 모든 요소를 열고 닫아야 한다. 이는 시작 태그 바로 뒤에 종료 태그를 배치하여 수행할 수 있지만, HTML 5에서는 이것이 적법하지 않으며 두 개의 요소가 생성되는 결과를 초래한다. XHTML과 HTML 5 모두와 호환되는 빈 요소 지정의 대안적인 방법은 태그의 끝에 /를 넣는 것이다(닫는 태그의 앞에 붙는 /와 구별된다).

<p>P. 셔먼<br />월러비 가 42<br />시드니</p>

HTML 속성은 시작 태그 안에 지정된다. 예를 들어, 준말을 나타내는 <abbr> 요소는 여는 태그 안에 title 속성을 기대한다. 이는 다음과 같이 작성된다.

<abbr title="abbreviation">abbr.</abbr>

비공식적으로 HTML 요소는 때때로 "태그"라고 불리기도 하지만(제유의 예), 많은 이들은 태그라는 용어를 요소의 시작과 끝을 구분하는 마크업만을 지칭하는 것으로 엄격히 제한하여 사용하기를 선호한다.

요소(및 속성) 이름은 HTML에서 대문자와 소문자를 조합하여 쓸 수 있지만, XHTML에서는 반드시 소문자여야 한다.[11] HTML 4까지는 대문자가 표준 형태였고 HTML 사양에서도 사용되었으나, 최근에는 소문자가 더 흔하게 사용된다.

요소의 유형

[편집]

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

일반 요소(Normal elements)는 대개 시작 태그와 종료 태그를 모두 가지지만, 일부 요소는 종료 태그 또는 두 태그 모두를 생략할 수 있다. 다음과 같은 방식으로 구성된다.

  • 임의의 수의 HTML 속성을 포함할 수 있는 요소의 시작을 알리는 시작 태그 (<tag>)
  • 텍스트와 다른 요소를 포함하는 일정량의 콘텐츠
  • 요소 이름 앞에 빗금이 붙는 종료 태그: </tag>

원시 텍스트 요소(Raw text elements, 또는 텍스트 전용 요소)는 다음과 같이 구성된다.

  • 임의의 수의 HTML 속성을 포함할 수 있는 요소의 시작을 알리는 시작 태그 (<tag> 형태)
  • 일정량의 텍스트 콘텐츠(해당 종료 태그를 제외한 모든 태그는 콘텐츠로 해석됨), 요소는 포함될 수 없음
  • 요소 이름 앞에 빗금이 붙는 종료 태그: </tag>. 일부 HTML 버전에서 특정 요소의 종료 태그는 선택 사항이지만, XHTML에서는 필수이다.

대표적인 예로 <title> 요소가 있는데, 이 요소는 다른 요소(텍스트 마크업 포함)를 포함해서는 안 되며 오직 일반 텍스트만 포함해야 한다.

빈 요소(Void elements, 또는 비어 있는 요소, 단일 요소, 자립형 요소)는 오직 HTML 속성을 포함하는 시작 태그(<tag> 형태)만을 가진다. 텍스트나 다른 요소와 같은 자식 요소를 포함할 수 없다. XHTML과의 호환성을 위해 HTML 사양[{{{설명}}}]에서는 선택적인 공백과 빗금을 허용한다(<tag />는 허용됨). 빗금은 XHTML 및 기타 XML 애플리케이션에서 필수이다. 흔히 사용되는 두 가지 빈 요소는 <br />(시나 주소 등에서의 강제 줄바꿈)와 <hr />(주제 분리)이다. 외부 파일을 참조하는 플레이스홀더 요소들도 종종 빈 요소이며, 영상(<img />) 요소가 그 예이다. 요소에 포함된 속성은 해당 외부 파일을 가리킨다. 빈 요소의 또 다른 예는 <link/>이며 구문은 다음과 같다.

<link rel="stylesheet" href="fancy.css" type="text/css">

이 <link /> 요소는 사용자에게 HTML 문서를 표시할 때 사용할 스타일 시트를 브라우저에 알려준다. HTML 구문에서 속성값이 문자, 숫자, 하이픈, 마침표로만 구성된 경우 따옴표를 생략할 수 있다. 반면 XML 구문(XHTML)을 사용할 때는 모든 속성값에 따옴표를 붙여야 하며 마지막 각괄호 앞에 공백이 포함된 빗금을 넣어야 한다.

<link rel="stylesheet" href="fancy.css" type="text/css" />

속성

[편집]

HTML 속성은 원하는 동작을 정의하거나 추가적인 요소 특성을 나타낸다. 대부분의 속성은 값을 요구한다. HTML에서 속성값에 공백이 포함되지 않은 경우 따옴표를 생략할 수 있고(attribute=value), 작은따옴표나 큰따옴표를 사용할 수 있다(attribute='value' 또는 attribute="value"). XML에서는 따옴표 사용이 필수이다.

반면 불리언 속성은 값을 지정할 필요가 없다. 체크 박스의 checked가 그 예이다.

<input type=checkbox checked>

하지만 XML(및 XHTML) 구문에서는 값이 필수이므로 속성 이름을 값으로 반복해서 사용해야 한다.

<input type="checkbox" checked="checked" />

요소 표준

[편집]

HTML 요소는 1995년 이후 초기에는 IETF에 의해, 이후에는 W3C에 의해 발행된 일련의 자유롭게 이용 가능한 개방형 표준에 정의되어 있다.

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

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

이후 HTML 4.01은 XML 호환 형식인 XHTML 1.0 (확장 가능한 HTML)로 재작성되었다. 각각의 요소들은 동일하며, 대부분의 경우 유효한 XHTML 1.0 문서는 유효하거나 거의 유효한 HTML 4.01 문서가 된다. 이 기사는 별도의 언급이 없는 한 주로 실제 HTML에 초점을 맞추지만, XHTML에도 여전히 적용 가능하다. 두 방식 사이의 사소한 차이점에 대한 논의는 HTML을 참조하라.

요소 상태

[편집]

HTML의 첫 번째 버전 이후 여러 요소가 구식이 되었으며, 이후 표준에서 구식화(deprecated)되거나 아예 나타나지 않게 되었다. 이 경우 해당 요소는 유효하지 않으며, 검증 사용자 에이전트에 의해 유효하지 않은 것으로 판명되거나 표시되지 않을 수 있다.[13]

HTML 4.01 / XHTML 1.0에서 요소의 상태는 세 가지 유형의 문서 형식 정의(DTD)가 존재함에 따라 복잡해진다.

  • Transitional(과도기적): 구식화된 요소를 포함하지만, 저자가 관행을 업데이트할 수 있는 과도기적 기간을 제공하기 위한 목적이다.
  • Frameset(프레임셋): 저자가 프레임셋 문서를 작성할 수 있도록 허용하는 Transitional DTD의 버전이다.
  • Strict(엄격): (1999년 기준) 최신 형태의 HTML이다.

대신 HTML5는 표준화된 규범 콘텐츠와 함께 구식 기능 목록을 제공한다. 이는 구현 지침이 존재하는 "구식이지만 준수하는(obsolete but conforming)" 항목과 교체되어야 하는 "비준수(non-conforming)" 항목으로 나뉜다.[14]

첫 번째 표준(HTML 2.0)은 네 개의 구식화된 요소를 포함했으며, 그중 하나는 HTML 3.2에서 유효하지 않게 되었다. 네 개 모두 HTML 4.01 Transitional에서 유효하지 않으며, 이 버전은 추가로 10개의 요소를 구식화했다. 이 모든 요소와 추가로 2개의 요소는 HTML 4.01 Strict에서 유효하지 않다. 프레임 요소는 Transitional 및 Frameset DTD에 존재한다는 의미에서 여전히 통용되지만, 기능이 대부분 대체되었고 사용자 접근성 측면에서 문제가 많아 향후 표준에서 보존할 계획이 없다.

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

흔한 혼동의 원인은 구식화(deprecated)라는 용어를 구식 상태와 유효하지 않은(invalid) 상태, 그리고 미래에 공식적으로 구식화될 것으로 예상되는 요소들 모두를 지칭하기 위해 느슨하게 사용하는 것이다.

콘텐츠 대 표현 및 동작

[편집]

HTML 4 이후 HTML은 콘텐츠(보이는 텍스트와 영상)를 표현(색상, 글꼴 크기, 레이아웃 등)으로부터 분리하는 데 점점 더 집중해 왔다.[16] 이는 종종 관심사 분리라고 불린다. HTML은 문서의 구조나 콘텐츠를 나타내는 데 사용되며, 그 표현은 오직 CSS 스타일 시트의 책임으로 남는다. 기본 스타일 시트는 CSS 표준의 일부로 제안되어 HTML에 대한 기본 렌더링을 제공한다.[17]

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

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

역사적으로 사용자 에이전트가 항상 이러한 기능을 지원한 것은 아니었다. 1990년대에는 임시방편으로 표현 요소(<b> 및 <i> 등)가 HTML에 추가되었으나, 이는 상호운용성과 사용자 접근성에 문제를 일으키는 대가를 치러야 했다. 현재 이는 구식으로 간주되며 스타일 시트 기반 디자인으로 대체되었다. 대부분의 표현 요소는 이제 구식화되었다.[18]

외부 영상 파일은 <img /> 또는 <object /> 요소를 사용하여 포함된다. (XHTML에서는 SVG 언어를 사용하여 문서 내에 그래픽을 직접 작성할 수도 있지만, 외부 SVG 파일을 링크하는 것이 일반적으로 더 간단하다.)[19] 영상이 순수하게 장식용이 아닌 경우, HTML은 시각장애인용 사용자 에이전트를 위해 유사한 의미적 가치를 가진 대체 콘텐츠를 제공할 수 있도록 허용한다.

HTML 문서는 또한 스크립트를 사용하여 HTML 하이퍼링크와 양식의 능력을 넘어서는 추가적인 동작을 제공하도록 확장될 수 있다.

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

  • 문서 헤드에서 <style /> 및 <script />는 공유 외부 문서로 연결되거나, <style>...</style> 및 <script>...</script>가 직접 임베드된 지침을 포함할 수 있다. (<link> 요소 또한 스타일 시트를 연결하는 데 사용될 수 있다.)
  • <script /> 또는 <script>...</script>는 문서의 어느 지점(헤드 또는 바디)에서나 나타날 수 있다.
  • style 속성은 대부분의 문서 바디 요소(예: <div>)에서 인라인 스타일 지침을 포함하기 위해 유효하게 사용할 수 있다.
  • 스크립트로의 연결을 제공하는 이벤트 처리 속성은 대부분의 요소에서 선택 사항이다.
  • 스크립트를 실행하지 않는 사용자 에이전트를 위해 <noscript>...</noscript> 요소가 적절한 대체 콘텐츠를 제공한다. 다만 이는 문서 헤드와 바디에서 블록 수준 요소로만 사용될 수 있다.

문서 구조 요소

[편집]
<html>...</html>
HTML 문서의 루트 요소이다. 다른 모든 요소는 이 안에 포함된다. HTML 요소는 HTML 문서의 시작과 끝을 구분한다.
시작 태그와 종료 태그 모두 생략할 수 있다(HTML5).[7]
HTML 2.0에서 표준화되었으며 현재도 통용된다.

(자식 요소에 대해서는 문서 헤드 요소 참조.)

HTML 문서에 대한 처리 정보와 메타데이터를 담는 컨테이너이다.
시작 태그와 종료 태그 모두 생략할 수 있으며 자식 요소로부터 추론될 수 있다(HTML5).[7]
HTML 5.0에서 표준화되었으며 현재도 통용된다.
<body></body>

(자식 요소에 대해서는 문서 바디 요소 참조.)

HTML 문서의 표시 가능한 콘텐츠를 담는 컨테이너이다.
시작 태그와 종료 태그 모두 생략할 수 있으며 자식 요소로부터 추론될 수 있다(HTML5).[7]
HTML 2.0에서 표준화되었으며 현재도 통용된다.

문서 헤드 요소

[편집]
<base />
문서 내의 모든 상대적 href 및 기타 링크에 대한 기준 URL을 지정한다. 외부 리소스를 참조하는 요소보다 먼저 나타나야 한다. HTML은 문서당 단 하나의 <base> 요소만을 허용한다. 이 요소는 HTML 속성을 가지지만 콘텐츠는 없다.
이 요소의 개발 버전(BASE로서)은 HTML Tags에서 언급되었으며, HTML 2.0에서 표준화되어 현재도 통용된다.
<basefont /> (deprecated)
문서의 기준 글꼴 크기, 서체, 색상을 지정한다. <font> 요소와 함께 사용된다. 스타일 시트를 사용하는 방식이 권장되면서 구식화되었다.
HTML 3.2에서 표준화되었고, HTML 4.0 Transitional에서 구식화되었으며, HTML 4.0 Strict에서는 유효하지 않다.
네트스케이프 3.0에서 렌더링된 <ISINDEX> 태그.
<isindex /> (deprecated)
<isindex>는 문서 헤드나 바디에 나타날 수 있지만 문서당 한 번만 나타날 수 있다. 이는 텍스트 필드를 표시하며, ?query=string을 보내는 대신 ?string으로 단일 매개변수를 보내 CGI 스크립트에서 더 쉽게 파싱할 수 있게 했다. 양식을 참조하라.
이전 및 다음 링크 또는 대체 버전과 같은 다른 문서로의 링크를 지정한다.[20] 일반적인 용도는 <link rel="stylesheet" type="text/css" href="url" title="description_of_style">와 같은 형식을 사용하여 외부 스타일 시트에 연결하는 것이다.[21] 덜 일반적이지만 중요한 용도는 마이크로포맷을 사용하여 내비게이션 힌트를 일관되게 제공하는 것이다. 몇 가지 일반적인 관계가 정의되어 있으며, 이는 웹 페이지에 직접 나타나기보다는 브라우저 인터페이스를 통해 사용자에게 노출될 수 있다(예: <link rel="next" href="url">). 문서의 <head> 요소는 임의의 수의 <link /> 요소를 포함할 수 있다. 이 요소는 HTML 속성을 가지지만 콘텐츠는 없다.
LINK는 HTML Internet Draft 1.2에 존재했으며, HTML 2.0에서 표준화되어 현재도 통용된다.
<meta />
 이 부분의 본문은 메타 엘리먼트입니다.

작성자, 발행일, 만료일, 언어, 페이지 제목, 페이지 설명, 키워드 또는 다른 헤더 요소 및 HTML 속성을 통해 제공되지 않는 문서에 대한 추가 메타데이터를 지정하는 데 사용될 수 있다. 일반적인 성격 때문에 <meta /> 요소는 연관 키-값 쌍을 지정한다. 일반적으로 메타 요소는 문서에 대한 숨겨진 정보를 전달한다. 여러 메타 태그를 사용할 수 있으며, 모두 head 요소 내에 중첩되어야 한다. 각 <meta /> 요소의 구체적인 목적은 속성에 의해 정의된다. XHTML 이외의 환경에서는 빈 요소임에도 불구하고 종종 빗금 없이(<meta>) 표기된다.

한 가지 형태로서 <meta /> 요소는 실제 콘텐츠 이전에 웹 서버에 의해 전송되어야 하는 HTTP 헤더를 지정할 수 있다. 예를 들어, <meta http-equiv="foo" content="bar" />는 페이지가 bar라는 값을 가진 foo라는 HTTP 헤더와 함께 제공되어야 함을 지정한다.

일반적인 형태로서 <meta /> 요소는 HTML 페이지의 측면을 설명하는 name과 관련 content HTML 속성을 지정한다. 잠재적인 모호성을 방지하기 위해 선택적인 세 번째 속성인 scheme을 제공하여 키와 값의 의미를 정의하는 의미론적 프레임워크를 지정할 수 있다. 예를 들어, <meta name="foo" content="bar" scheme="DC" />에서 <meta /> 요소는 DC 또는 더블린 코어 리소스 기술 프레임워크의 foo 요소를 bar라는 값으로 포함하고 있음을 나타낸다.
HTML 2.0에서 표준화되었으며 현재도 통용된다.
<object>...</object>
문서 헤더 내에 일반 객체를 포함하는 데 사용된다. <head> 요소 내에서는 드물게 사용되지만, 외부 데이터를 추출하여 현재 문서와 연결하는 데 잠재적으로 사용될 수 있다.
HTML 4.0에서 표준화되었으며 현재도 통용된다.
<script>...</script>
스크립트 지침을 위한 컨테이너 역할을 하거나 선택적인 src 속성을 사용하여 외부 스크립트에 연결할 수 있다.[22] 또한 문서 바디에서 블록 또는 인라인 콘텐츠를 동적으로 생성하는 데 사용될 수 있다.
HTML 3.2에서 표준화되었으며 현재도 통용된다.
<style>...</style>
문서에 대한 CSS 스타일을 지정하며, 보통 <style type="text/css"> ... </style> 형식을 취한다. 스타일 지침을 위한 컨테이너 역할을 하거나 외부 스타일 시트에 연결할 수 있다. 예를 들어 CSS에서는 다음과 같은 @import 지침 형식을 사용한다.[23] <style> @import url; </style>
HTML 3.2에서 표준화되었으며 현재도 통용된다.
<title>...</title>
이 태그는 문서 제목을 정의한다. 모든 HTML 및 XHTML 문서에서 필수이다. 사용자 에이전트는 제목을 다양한 방식으로 사용할 수 있다. 예를 들어:
  • 웹 브라우저는 보통 창이 열려 있을 때 창의 제목 표시줄에 표시하고, 창이 최소화되었을 때 (해당하는 경우) 작업 표시줄에 표시한다.
  • 페이지를 저장할 때 기본 파일 이름이 될 수 있다.
  • 웹 페이지에서 <title> 요소는 한 번만 사용할 수 있으며, 다른 페이지를 만들 때는 새로운 제목과 함께 다른 <title> 요소를 다시 사용해야 한다(웹사이트의 모든 제목 태그에 동일한 이름을 사용하지 말 것. 검색 엔진에 문제가 될 수 있다).
  • 검색 엔진 크롤러는 제목에 사용된 단어에 특히 주의를 기울일 수 있다.
<title> 요소는 다른 요소를 포함해서는 안 되며 텍스트만 포함해야 한다. 문서당 단 하나의 <title> 요소만 허용된다.
HTML Tags에 존재했으며, HTML 2.0에서 표준화되어 현재도 통용된다.

문서 바디 요소

[편집]

시각적 브라우저에서 표시 가능한 요소는 블록(block) 또는 인라인(inline)으로 렌더링될 수 있다. 모든 요소는 문서 시퀀스의 일부이지만, 블록 요소는 부모 요소 내에서 다음과 같이 나타난다.

  • 줄이 바뀌지 않는 직사각형 객체로서 나타남
  • 주변 요소와 독립적으로 설정할 수 있는 블록 여백, 너비 및 높이 속성을 가짐

반대로 인라인 요소는 문서 텍스트 흐름의 일부로 취급된다. 여백, 너비 또는 높이를 설정할 수 없으며 줄 바꿈이 적용된다.

블록 요소

[편집]

블록 요소(block-level elements)는 직사각형 구조를 가진다. 기본적으로 이러한 요소는 부모 요소의 전체 너비에 걸쳐지며, 따라서 배치된 곳과 동일한 수평 공간을 다른 요소가 차지하는 것을 허용하지 않는다.

블록 요소의 직사각형 구조는 종종 CSS 박스 모델이라고 불리며 여러 부분으로 구성된다. 각 요소는 다음을 포함한다.

  • 요소의 콘텐츠(content)는 요소의 시작 태그와 종료 태그 사이에 배치된 실제 텍스트(또는 기타 미디어)이다.
  • 요소의 패딩(padding)은 콘텐츠 주변의 공간이지만 여전히 요소의 일부를 형성한다. 패딩은 두 요소 사이의 공백을 만드는 데 사용해서는 안 된다. 배경 이미지나 색상과 같이 요소에 할당된 모든 배경 스타일은 패딩 내에서 볼 수 있다. 요소 패딩의 크기를 늘리면 이 요소가 차지하는 공간의 양이 늘어난다.
  • 요소의 테두리(border)는 요소의 절대적인 끝이며 해당 요소의 둘레를 감싼다. 테두리의 두께는 요소의 크기를 증가시킨다.
  • 요소의 마진(margin)은 요소를 둘러싼 공백이다. 다른 요소의 콘텐츠, 패딩 및 테두리는 고급 CSS 배치를 통해 강제되지 않는 한 이 영역에 들어올 수 없다. 대부분의 표준 DTD를 사용할 때, 서로 다른 요소의 좌우 마진은 서로를 밀어낸다. 반면 요소의 상단 또는 하단 마진은 쌓이지 않고 서로 겹친다. 이는 이러한 요소 사이의 공백이 그들 사이의 더 큰 마진만큼 커진다는 것을 의미한다.

위 섹션은 CSS 렌더링의 세부 구현만을 언급하며 HTML 요소 자체와는 직접적인 관련이 없다.

기본 텍스트

[편집]
<p>...</p>
단락을 생성하며, 아마도 가장 일반적인 블록 수준 요소일 것이다.
P는 HTML Tags에 존재했으며, HTML 2.0에서 표준화되어 현재도 통용된다.
<h1>...</h1>
<h2>...</h2>
<h3>...</h3>
<h4>...</h4>
<h5>...</h5>
<h6>...</h6>
서로 다른 수준의 섹션 제목이다. h1은 최고 수준의 제목을 구분하고, h2는 그 다음 수준(하위 섹션), h3은 그 아래 수준 등을 h6까지 나타낸다. 때때로 이들을 통칭하여 hn 태그라고 부르며, n은 사용 가능한 제목 수준 중 하나를 의미한다. 대부분의 시각적 브라우저는 기본적으로 제목을 크고 굵은 텍스트로 표시하지만, 이는 CSS로 재정의할 수 있다. 제목 요소는 단지 크거나 굵은 텍스트를 만들기 위한 것이 아니다. 사실 텍스트의 명시적인 스타일링을 위해 사용해서는 안 된다. 오히려 문서의 구조와 조직을 설명한다. 일부 프로그램은 이를 사용하여 개요나 목차를 생성한다.
제목 요소들은 HTML Tags에 존재했으며, HTML 2.0에서 표준화되어 현재도 통용된다.

목록

[편집]
<dl>...</dl>
정의 목록은 여기로 연결됩니다. 위키백과의 정의 목록 기사에 대해서는에 대해서는 용어 사전 문서를 참고하십시오.
설명 목록(일명 연관 목록 또는 정의 목록)은 이름-값 그룹으로 구성되며,[24] HTML5 이전에는 정의 목록으로 알려져 있었다.[25] 설명 목록은 "용어와 정의, 메타데이터 주제와 값, 질문과 답변, 또는 기타 이름-값 데이터 그룹"을 위해 의도되었다.[26]
DL은 HTML Tags에 존재했으며, HTML 2.0에서 표준화되어 현재도 통용된다.
<dt>...</dt>
설명 목록에서의 이름(이전의 정의 목록에서의 정의 용어)이다.
DT는 HTML Tags에 존재했으며, HTML 2.0에서 표준화되어 현재도 통용된다.
<dd>...</dd>
설명 목록에서의 값(이전의 정의 목록에서의 정의 데이터)이다.
DD는 HTML Tags에 존재했으며, HTML 2.0에서 표준화되어 현재도 통용된다.
<ol>...</ol>
순서가 있는(번호가 매겨진) 목록이다. type 속성을 사용하여 목록에 사용할 마커의 종류를 지정할 수 있지만, 스타일 시트가 더 많은 제어권을 제공한다. 기본값은 아라비아 숫자이다. HTML 속성에서는 <ol type="foo">, 또는 CSS 선언에서는 ol { list-style-type: foo; }와 같이 사용하며, foo를 다음 중 하나로 바꾼다.
  • A, B, C ... – HTML 값: A; CSS 값: upper-alpha
  • a, b, c ... – HTML 값: a; CSS 값: lower-alpha
  • I, II, III ... – HTML 값: I; CSS 값: upper-roman
  • i, ii, iii ... – HTML 값: i; CSS 값: lower-roman
  • 1, 2, 3 ... – HTML 값: 1; decimal
CSS는 none을 포함하여 순수 HTML 마크업으로는 불가능한 여러 다른 옵션과 CJK, 히브리어, 조지아어, 아르메니아어 문자에 대한 옵션을 제공한다. 이 속성은 HTML 3.2 및 4.01에서 구식화되었으나 HTML 5에서는 그렇지 않다.
OL은 HTML Internet Draft 1.2에 존재했으며, HTML 2.0에서 표준화되어 현재도 통용된다.
<ul>...</ul>
순서가 없는(글머리 기호가 있는) 목록이다. 목록 항목 마커의 유형은 HTML 속성 <ul type="foo"> 또는 CSS 선언 ul { list-style-type: foo; }으로 지정할 수 있으며, foo를 다음 중 하나로 바꾼다(HTML과 CSS에서 동일한 값이 사용됨). disc(기본값), square, circle. HTML5에서는 오직 CSS 방식만 지원된다. 속성은 HTML 3.2 및 4.01에서 구식화되었다. CSS는 또한 none 및 이러한 글머리 기호를 사용자 정의 영상으로 대체하는 기능도 제공한다.
UL은 HTML Tags에 존재했으며, HTML 2.0에서 표준화되어 현재도 통용된다.
<li>...</li>
순서 있는 목록(ol) 또는 순서 없는 목록(ul)의 목록 항목이다.
LI는 HTML Tags에 존재했으며, HTML 2.0에서 표준화되어 현재도 통용된다.
<dir>...</dir> (deprecated)
디렉터리 목록이다. 이 요소의 원래 목적은 널리 지원되지 않았으며, <ul>을 사용하는 방식이 권장되면서 구식화되었다.
DIR은 HTML Tags에 존재했으며, HTML 2.0에서 표준화되었고, HTML 4.0 Transitional에서 구식화되었으며, HTML 4.0 Strict에서는 유효하지 않다.

기타 블록 요소

[편집]
<address>...</address>
문서 작성자에 대한 연락처 정보이다.
ADDRESS는 HTML Tags에 존재했으며, HTML 2.0에서 표준화되어 현재도 통용된다.
<article>...</article>
 이 부분의 본문은 기사 요소입니다.
기사 및 기타 유사한 콘텐츠에 사용된다.
HTML5에서 표준화되었다.
<aside>...</aside>
사이드바나 광고와 같이 주요 페이지 콘텐츠와 분리된 문서의 콘텐츠에 사용된다.
HTML5에서 표준화되었다.
<blockquote>...</blockquote>
 이 부분의 본문은 블록 인용 요소입니다.

인용문에 단락과 같은 블록 수준 요소가 포함될 때 사용하는 블록 수준 인용이다. cite 속성(<cite> 요소와 구별됨)은 출처를 나타낼 수 있으며, 반드시 정규화된 통합 자원 식별자여야 한다.

시각적 브라우저에서 블록 인용의 기본 표시는 대개 양쪽 여백에서 들여쓰는 것이다. 이로 인해 의미론에 관계없이 단락을 들여쓰기 위해 이 요소를 불필요하게 사용하는 경우가 생겼다. 블록 수준 요소를 포함하지 않는 인용에 대해서는 인용문(<q>) 요소를 참조하라.
BLOCKQUOTE는 HTML Internet Draft 1.2에 존재했으며, HTML 2.0에서 표준화되어 현재도 통용된다. 자세한 내용은 블록 인용 요소를 참조하라.
<center>...</center> (deprecated)
블록 수준의 가운데 정렬 구역을 생성한다. <div> 또는 스타일 시트를 사용하여 가운데 정렬이 정의된 다른 요소를 사용하는 방식이 권장되면서 구식화되었다.
HTML 3.2에서 표준화되었고, HTML 4.0에서 구식화되었으며, HTML5에서는 지원되지 않는다.
<del>...</del>
삭제된 콘텐츠 섹션을 표시한다. 이 요소는 인라인으로도 사용될 수 있다.
HTML 4.0에서 표준화되어 현재도 통용된다.
<div>...</div>
 이 부분의 본문은 Div와 span입니다.
블록 수준의 논리적 구역이다. 스타일 시트나 DOM 호출에 의해 제어되는 표현이나 동작 등을 위해 문서 섹션을 구분하는 데 사용되는 의미론적 의미가 없는 일반적인 요소이다.
HTML 3.0 Drafts에서 제안되었고, HTML 3.2에서 표준화되어 현재도 통용된다.
<figure>...</figure>
<figcaption>와 함께 영상과 캡션을 그룹화하는 데 사용된다.
HTML5에서 표준화되었다.
<figcaption>...</figcaption>
영상에 대한 캡션이다. 항상 <figure> 요소 내부에 배치된다.
HTML5에서 표준화되었다.
문서 푸터에 사용된다. 작성자나 저작권 정보, 또는 다른 페이지로의 링크를 포함할 수 있다.
HTML5에서 표준화되었다.
문서 헤더에 사용된다. 일반적으로 페이지를 소개하는 콘텐츠를 포함한다.
HTML5에서 표준화되었다.
<hr />
주제적 분리(원래는 수평선)이다. 표현 규칙은 스타일 시트로 그릴 수 있다.
HTML 2.0에서 표준화되어 현재도 통용된다.
<ins>...</ins>
삽입된 콘텐츠 섹션을 표시한다. 이 요소는 인라인으로도 사용될 수 있다.
HTML 4.0에서 표준화되어 현재도 통용된다.
<main>...</main>
문서의 주요 콘텐츠를 포함한다.
HTML 5.1에서 표준화되었다.
HTML 2.0: 메뉴 목록이다. <ul> 목록보다 더 조밀해야 한다.
MENU는 HTML Tags에 존재했으며, HTML 2.0에서 표준화되었고, HTML 4.0 Transitional에서 구식화되었으며, HTML 4.0 Strict에서는 유효하지 않다. 그 후 HTML5에서 재정의되었다가 HTML 5.2에서 제거되었으나, 2019년에 HTML Living Standard에 포함되었다.
기사의 내비게이션 섹션(다른 웹페이지로의 링크를 포함하는 웹페이지 영역)에서 사용된다.
HTML5에서 표준화되었다.
<noscript>...</noscript>
스크립트에 대한 대체 콘텐츠이다. script와 달리 블록 수준 요소로만 사용될 수 있다.
HTML 4.0에서 표준화되어 현재도 통용된다.
<pre>...</pre>
서식이 정해진 텍스트이다. 이 요소 내의 텍스트는 일반적으로 파일에 배치된 그대로 고정 폭 글꼴로 표시된다(아스키 아트 참조). 브라우저가 다른 HTML 요소에 대해서는 공백을 무시하지만, <pre>...</pre> 내에서 공백은 작성된 대로 렌더링되어야 한다. (CSS 속성 { white-space: pre; font-family: monospace; }를 사용하면 다른 요소들도 같은 방식으로 표시될 수 있다.) 이 요소는 <image>, <object>, <big>, <small>, <sup>, <sub>...</sub>를 제외한 모든 인라인 요소를 포함할 수 있다.
PRE는 HTML Internet Draft 1.2에 존재했으며, HTML 2.0에서 표준화되어 현재도 통용된다.
<section>...</section>
문서의 일반적인 섹션에 사용된다. <div>와 다른 점은 오직 페이지의 섹션을 담는 데만 사용된다는 것이며, W3C는 이를 유사한 주제를 가진 콘텐츠 그룹으로 정의한다.
HTML5에서 표준화되었다.
<script>...</script>
문서에 스크립트를 배치한다. 헤드 및 인라인 컨텍스트에서도 사용 가능하다. 스크립트를 로드할 URL을 제공하는 src 속성과 함께 <script />로 사용되거나, 임베드된 스크립트 콘텐츠 주변에 <script>...</script>로 사용될 수 있다. 참고: <script> 자체는 블록 요소도 인라인 요소도 아니다. 그 자체로는 전혀 표시되지 않아야 하지만, 블록 또는 인라인 콘텐츠를 동적으로 생성하는 지침을 포함할 수 있다.
HTML 3.2에서 표준화되어 현재도 통용된다.

인라인 요소

[편집]

인라인 요소는 <body> 요소 내에 직접 배치될 수 없으며, 반드시 블록 수준 요소 내에 완전히 중첩되어야 한다.[27]

앵커

[편집]
<a>...</a>

앵커 요소가 앵커라고 불리는 이유는 웹 디자이너가 이를 사용하여 웹 페이지의 일부 텍스트에 URL을 "고정(anchor)"할 수 있기 때문이다. 사용자가 브라우저에서 웹 페이지를 볼 때 텍스트를 클릭하여 링크를 활성화하고 링크에 있는 URL의 페이지를 방문할 수 있다.[28]

HTML에서 "앵커"는 하이퍼링크의 출발지(앵커 텍스트) 또는 목적지(대상) 끝이 될 수 있다. 출발지로서 href 속성을 설정하면 하이퍼링크가 생성된다.[29] 이는 문서의 다른 부분이나 외부 URL을 사용하는 다른 리소스(예: 웹페이지)를 가리킬 수 있다. 대상으로서 name 또는 id HTML 속성을 설정하면, 해당 요소가 단편 식별자를 통해 URL로부터 링크될 수 있다. 출발지와 앵커라는 두 형태는 동시에 사용될 수 있다.

HTML5에서는 id 속성을 사용하여 모든 요소를 대상으로 만들 수 있으므로,[30] <a name="foo">...</a>를 사용하는 것이 필수적이지는 않으나, 이러한 방식의 앵커 추가는 계속 작동한다.

설명을 위해: example.com 홈페이지의 목차 섹션 헤더를 <h2><a name="contents">Table of contents</a></h2>라고 작성하여 대상으로 만들 수 있다. 이제 섹션이 대상으로 마킹되었으므로, 외부 사이트에서 <a href="http://example.com#contents">see contents</a>와 같은 링크로 참조하거나 동일한 페이지 내에서 <a href="#contents">contents, above</a>와 같은 링크로 참조할 수 있다.

title 속성을 설정하여 링크에 대한 간단한 정보를 줄 수 있다: <a href="URL" title="additional information">link text</a>.

대부분의 그래픽 브라우저에서 커서가 링크 위에 올라가면 커서가 집게손가락을 편 손 모양으로 바뀌고 title 값이 말풍선이나 다른 방식으로 표시된다. 일부 브라우저는 대체 텍스트를 같은 방식으로 렌더링하지만, 이는 사양에서 요구하는 바가 아니다.

A는 HTML Tags에 존재했으며, HTML 2.0에서 표준화되었다.

구문 요소

[편집]

구문 요소는 구문을 마킹하고 텍스트 단편에 구조나 의미론적 의미를 추가하는 데 사용된다. 예를 들어, <em>와 <strong> 태그는 텍스트를 강조하는 데 사용될 수 있다.

일반
[편집]
<abbr>...</abbr>
준말을 표시하며 전체 형태를 제공할 수 있다: <abbr title="abbreviation">abbr.</abbr>
HTML 4.0에서 표준화되어 현재도 통용된다.
<acronym>...</acronym> (deprecated)
<abbr> 요소와 유사하지만 두문자어를 표시한다: <acronym title="Hyper-Text Mark-up Language">HTML</acronym>
HTML 4.0에서 표준화되어 현재도 통용되나 HTML5에서는 지원되지 않는다. 대체재로 abbr 태그 사용이 권장된다.[31]
<dfn>...</dfn>
단일 용어의 인라인 정의이다.
DFN은 HTML Internet Draft 1.2에 존재했으며, HTML 3.2에서 완전히 표준화되어 현재도 통용된다.
<em>...</em>
강조 (관례적으로 이탤릭체로 표시됨)
EM은 HTML Internet Draft 1.2에 존재했으며, HTML 2.0에서 표준화되어 현재도 통용된다.
<strong>...</strong>
중요성. 원래는 강한 강조를 의미했다(관례적으로 굵게 표시됨). 음성 사용자 에이전트는 강조를 위해 다른 목소리를 사용할 수 있다.
STRONG은 HTML Internet Draft 1.2에 존재했으며, HTML 2.0에서 표준화되어 현재도 통용되며, HTML5에서 재정의되었다.
컴퓨터 구문 요소
[편집]

이러한 요소들은 주로 소스 코드(<code>), 변수(<var>), 사용자 입력(<kbd>), 터미널 또는 기타 출력(<samp>)을 차별화하여 컴퓨터 코드 개발 및 사용자 상호작용을 문서화하는 데 유용하다.

<code>...</code>
코드 스니펫(code example)이다. 관례적으로 고정 폭 글꼴로 렌더링된다.
CODE는 HTML Internet Draft 1.2에 존재했으며, HTML 2.0에서 표준화되어 현재도 통용된다.
<kbd>...</kbd>
키보드 – 사용자가 입력할 텍스트(kbd example)이다.
KBD는 HTML Internet Draft 1.2에 존재했으며, HTML 2.0에서 표준화되어 현재도 통용된다.
<samp>...</samp>
샘플 출력 – 프로그램이나 스크립트로부터의 출력(samp example)이다.
SAMP는 HTML Internet Draft 1.2에 존재했으며, HTML 2.0에서 표준화되어 현재도 통용된다.
<var>...</var>
변수(var example)이다.
VAR은 HTML Internet Draft 1.2에 존재했으며, HTML 2.0에서 표준화되어 현재도 통용된다.

표현

[편집]

시각적 표현 마크업은 시각적 브라우저에만 직접 적용되므로 사용이 권장되지 않는다. 대신 스타일 시트를 사용해야 한다. 이러한 요소 중 몇몇은 HTML 4 / XHTML 1.0에서 구식화되었거나 유효하지 않으며, 나머지는 XHTML 2.0 초안에서 유효하지 않다. 그러나 HTML5 초안은 <s>, <u>, <small>를 다시 포함시키고 각각에 새로운 의미론적 의미를 부여했다. HTML5 문서에서 이러한 요소의 사용은 의미론적으로 올바르다면 더 이상 권장되지 않는 것이 아니다.

<b>...</b>
HTML 4에서는 가능한 경우 글꼴을 굵게 설정한다. 동일한 CSS: { font-weight: bold; }. HTML 4.01 하에서 <strong> 요소는 시각적 브라우저에서 보통 동일한 효과를 내면서 더 많은 의미론적 의미를 가진다. 그러나 HTML5에서 <b>는 <strong>와 구별되는 고유한 의미를 가진다. 이는 "추가적인 중요성을 전달하지 않고 다른 목소리나 기분을 암시하지 않으면서, 실용적인 목적으로 주의를 끌기 위한 텍스트"를 나타낸다.[32]
B는 HTML Internet Draft 1.2에 존재했으며, HTML 2.0에서 표준화되어 현재도 통용되며, HTML5에서 재정의되었다.
<i>...</i>
HTML 4에서는 가능한 경우 글꼴을 이탤릭체로 설정한다. 동일한 CSS: { font-style: italic; }. HTML 4.01 하에서 <em>...</em>을 사용하면 대부분의 브라우저에서 동일한 시각적 효과를 내면서 강조라는 의미론적 의미를 가진다. (HTML 5는 순수하게 인쇄상의 이탤릭체가 강조 이외의 많은 목적을 가지고 있음을 더 명시적으로 인식했다.) 그러나 HTML5에서 <i>는 <em>와 구별되는 고유한 의미론적 의미를 가진다. 이는 "텍스트의 다른 품질" 또는 "대체 음성이나 기분"을 나타낸다. 예를 들어 생각, 선박 이름, 이명법에 따른 학명, 외국어 구문 등이 있다.[33]
I는 HTML Internet Draft 1.2에 존재했으며, HTML 2.0에서 표준화되어 현재도 통용되며, HTML5에서 재정의되었다.
<u>...</u>
HTML 4에서는 밑줄 쳐진 텍스트이다. 동일한 CSS: { text-decoration: underline; }. HTML 4.01에서 구식화되었다가 HTML5에서 복원되었다. HTML5에서 <u> 요소는 "고유 명사임을 나타내거나 오탈자임을 표시하는 것과 같이, 명시적으로 렌더링되지만 비텍스트적인 주석이 있는 텍스트 범위"를 나타낸다. HTML5 사양은 개발자들에게 <u>보다 더 적절한 요소들이 거의 항상 존재함을 상기시키고, 하이퍼링크와 혼동될 수 있는 곳에 밑줄 친 텍스트를 사용하지 말 것을 경고한다.[34]
U는 HTML Internet Draft 1.2에 존재했고, HTML 3.2에서 표준화되었으나 HTML 4.0 Transitional에서 구식화되었고 HTML 4.0 Strict에서는 유효하지 않았다. HTML5에서 재도입되었다.
<small>...</small>
HTML 4에서는 감소된 글꼴 크기(작은 텍스트)이다. 동일한 CSS: { font-size: smaller; } HTML5에서 <small> 요소는 "작은 글씨와 같은 부수적 주석"을 나타낸다.[35] 이로 인해 <aside>...</aside> 요소와 약간의 혼동이 발생했다.
HTML 3.2에서 표준화되어 현재도 통용된다.
<s>...</s>
HTML 4에서는 취소선 텍스트(취소선)를 나타냈으며 <strike>와 동일했다. HTML5에서 <s> 요소는 "더 이상 정확하지 않거나 더 이상 관련이 없는" 정보를 나타내며, 제거/삭제를 나타내는 <del>와 혼동해서는 안 된다.[36]
S는 HTML 4.0 Transitional에서 구식화되었으며(이전 표준에는 나타나지 않음), HTML 4.0 Strict에서는 유효하지 않았다. HTML5에서 재도입되었으며, 대신 <strike>를 구식화했다.
<big>...</big> (deprecated)
증가된 글꼴 크기(큰 텍스트)이다. 동일한 CSS: { font-size: larger; }
HTML 3.2에서 표준화되었으나 HTML5에서는 지원되지 않는다.
<strike>...</strike> (deprecated)
취소선 텍스트(취소선)이다. (동일한 CSS: { text-decoration: line-through; })
STRIKE는 HTML 3.2에서 표준화되었고, HTML 4.0 Transitional에서 구식화되었으며, HTML 4.0 Strict에서는 유효하지 않다.
<tt>...</tt> (deprecated)
고정 폭 글꼴(타자기 같은 스타일)이며, 전신타자기의 약자인 "tt"로도 알려져 있다. (동일한 CSS: { font-family: monospace; })
TT는 HTML Internet Draft 1.2에 존재했으며, HTML 2.0에서 표준화되었으나 HTML5에서는 지원되지 않는다.[37] 가능한 대체재: 사용자 입력을 마킹하기 위한 <kbd>, 변수를 위한 <var> (보통 이탤릭체로 렌더링되며 고정폭으로 변경되지 않음), 소스 코드를 위한 <code>, 출력을 위한 <samp>.[37]
<font>...</font> (deprecated)
<font [color=<var>color</var>] [size=<var>size</var>] [face=<var>face</var>]>...</font> color 속성으로 글꼴 색상을, face 속성으로 서체를, size 속성으로 절대적 또는 상대적 크기를 지정할 수 있다. 예시(모든 용법은 구식화되었으며, 가능한 경우 CSS 대안을 사용하라):
  • <font color="green">텍스트</font>는 초록색 텍스트를 만든다.
  • <font color="#114499">텍스트</font>는 16진수 색상 #114499의 텍스트를 만든다.
  • <font size="4">텍스트</font>는 크기 4의 텍스트를 만든다. 크기는 1에서 7까지이다. <body>나 다른 태그에서 별도로 지정하지 않는 한 표준 크기는 3이다.
  • <font size="+1">텍스트</font>는 표준보다 1 큰 크기의 텍스트를 만든다. <font size="-1">텍스트</font>는 반대이다.
  • <font face="Courier">텍스트</font>는 Courier 글꼴의 텍스트를 만든다.

글꼴 속성에 대응하는 CSS:

  • <font size="N">는 {font-size: Yunits}에 대응한다(HTML 사양은 크기 N과 단위 크기 Y 사이의 관계를 정의하지 않으며 단위도 정의하지 않는다).
  • <font color="red">는 { color: red; }에 대응한다.
  • <font face="Times New Roman">은 { font-family: 'Times New Roman', Times, serif; }에 대응한다. CSS는 둘 이상의 대체 글꼴을 포함하는 폰트 스택을 지원한다.
HTML 3.2에서 표준화되었고, HTML 4.0 Transitional에서 구식화되었으며, HTML 4.0 Strict에서는 유효하지 않다. HTML5의 일부가 아니다.

Span

[편집]
<span>...</span>
 이 부분의 본문은 Div와 span입니다.
인라인 논리적 구역이다. 스타일 시트나 DOM 호출에 의해 제어되는 표현이나 동작 등을 위해 문서 섹션을 구분하는 데 사용되는 의미론적 의미가 없는 일반적인 요소이다.
HTML 4.0에서 표준화되어 현재도 통용된다.

기타 인라인 요소

[편집]
<br />
강제 줄바꿈이다.
HTML 2.0에서 표준화되어 현재도 통용된다.
<bdi>...</bdi>
방향성을 알 수 없는 사용자 생성 콘텐츠와 같이, 주변의 다른 텍스트와 다른 방향으로 서식이 지정될 수 있는 인라인 텍스트 섹션을 격리한다.
HTML5에서 표준화되었다.
<bdo>...</bdo>
읽기 방향이 부모 요소의 방향과 반대인 인라인 텍스트 섹션을 표시한다.
HTML 4.0에서 표준화되어 현재도 통용된다.
<cite>...</cite>
문서 내의 인용문이나 진술에 대한 인용 또는 참조이다.
CITE는 HTML Internet Draft 1.2에 존재했으며, HTML 2.0에서 표준화되어 현재도 통용된다.
참고: HTML 5 사양은 이 요소를 포함하여 혼란스럽게 포크되었다.[38] HTML 4 및 그 이전 버전에서 <cite>는 특별한 제한이나 요구 사항 없이 "인용 또는 다른 출처에 대한 참조"를 위한 것이었다.[39] W3C HTML 5 사양은 요소가 역사적으로 어떻게 사용되었는지를 반영하여 이 개념을 세분화하여 사용하고 있으나, 이제는 "저작물의 제목 또는 저작자의 이름(개인, 사람들 또는 단체) 또는 URL 참조, 또는 인용 메타데이터 추가를 위해 사용되는 관례에 따른 약어 형태의 참조" 중 적어도 하나를 포함(단 이에 국한되지는 않음)할 것을 요구한다.[40] 그러나 WHATWG 사양은 이 요소를 오직 저작물의 제목 주변에만 사용할 수 있도록 허용한다.[41] W3C 사양은 광범위한 정의로 시작했다가 WHATWG가 이러한 변경을 가한 후 매우 좁은 정의로 전환했다. 그러나 W3C는 2012년에 개발자 커뮤니티의 부정적인 피드백에 대응하여 자사의 변경 사항을 되돌렸다. 이 요소는 광범위한 범위에서 널리 배포되어 사용되고 있었기 때문이다(예: 다양한 블로그 및 포럼 플랫폼은 댓글 작성자의 ID와 이메일 주소를 <cite>...</cite>로 감싸고 있으며, 서지 인용을 위해 요소를 사용하는 사람들은 일상적으로 인용문 전체를 이 요소로 감싸고 있었다). 이 요소의 또 다른 문제는 WHATWG가 (그들의 관점에서) 이것이 오직 출판물 제목만을 위한 것이기 때문에 기본적으로 이탤릭체로 표시할 것을 권장한다는 점이다(따라서 거의 모든 브라우저가 그렇게 한다). 그러나 관례적으로 특정 종류의 제목만 실제로 이탤릭체를 사용하고 다른 것들은 따옴표 안에 넣을 것으로 기대되며, 표준은 출판 문맥과 언어에 따라 실제로 달라질 수 있다. 결과적으로 많은 웹사이트 제작자와 관리자는 이 요소의 자동 이탤릭체 적용을 해제하기 위해 사이트 전체 스타일 시트를 사용한다.
<data>...</data>
인라인 콘텐츠를 기계가 읽을 수 있는 번역과 연결한다.
HTML5에서 표준화되었다.[42]
<del>...</del>
삭제된 텍스트이다. 일반적으로 취소선으로 렌더링된다: 삭제된 텍스트.
HTML 4.0에서 표준화되어 현재도 통용된다.
<ins>...</ins>
삽입된 텍스트이다. 종종 <del> 또는 <s>로 취소된 자료에 대한 대체 텍스트를 마킹하는 데 사용된다. 일반적으로 밑줄로 렌더링된다: 삽입된 텍스트.
HTML 4.0에서 표준화되어 현재도 통용된다.
<ins>와 <del> 요소는 블록 요소로도 사용되어 다른 블록 및 인라인 요소를 포함할 수 있다. 그러나 잘 형성된 HTML 문서를 유지하기 위해 이러한 요소는 여전히 부모 요소 내에 완전히 머물러야 한다. 예를 들어, 한 단락 중간에서 시작하여 여러 다른 단락을 거쳐 마지막 단락에서 끝나는 텍스트를 삭제하려면 세 개의 별도 <del> 요소를 사용해야 한다. 첫 번째와 마지막 단락에서 텍스트 삭제를 나타내기 위해 두 개의 인라인 <del> 요소가 필요하며, 중간 단락에서의 삭제를 나타내기 위해 블록 요소로 사용되는 세 번째 요소가 필요하다.
<mark>...</mark>
인용문에서 관련 텍스트를 하이라이트하거나 마킹하기 위한 용도이다: 하이라이트된 텍스트
HTML5에서 표준화되었다.
<q>...</q>
인라인 인용문이다(블록 수준 인용에 대해서는 <blockquote> 참조). 인용 요소는 중첩될 수 있다. <q>는 스타일 시트와 결합하여 자동으로 따옴표를 생성해야 한다. 브라우저 비준수로 인한 실질적인 우려 때문에 저자들은 해결책을 찾아야 할 수도 있다. cite 속성은 출처를 나타내며 반드시 정규화된 URI여야 한다.
HTML 4.0에서 표준화되어 현재도 통용된다.
<rb>...</rb>
루비 주석의 베이스 구성 요소를 나타낸다.
HTML5에서 표준화되었다.[43]
<rp>...</rp>
루비 주석 지원이 부족한 브라우저를 위해 대체 괄호를 제공한다.
HTML5에서 표준화되었다.[44]
<rt>...</rt>
루비 주석에서 문자의 발음을 나타낸다.
HTML5에서 표준화되었다.[45]
<rtc>...</rtc>
루비 주석에 대한 의미론적 주석이다.
HTML5에서 표준화되었다.[46]
<ruby>...</ruby>
동아시아 문자의 발음을 보여주기 위한 루비 주석을 나타낸다.
HTML5에서 표준화되었다.[47]
<script>...</script>
문서에 스크립트를 배치한다. 헤드 및 블록 컨텍스트에서도 사용 가능하다. 참고: <script> 자체는 블록 요소도 인라인 요소도 아니다. 그 자체로는 전혀 표시되지 않아야 하지만, 블록 또는 인라인 콘텐츠를 동적으로 생성하는 지침을 포함할 수 있다.
HTML 3.2에서 표준화되어 현재도 통용된다.
<sub>...</sub>
<sup>...</sup>
아래 첨자 또는 위 첨자 텍스트를 표시한다. (각각 동일한 CSS: { vertical-align: sub; } 및 { vertical-align: super; }이다.)
둘 다 HTML 3.0 Drafts에서 제안되었고, HTML 3.2에서 표준화되어 현재도 통용된다.
<template>...</template>
스크립트에 의해 복사될 코드 단편이다.
HTML5에서 표준화되었다.[48]
<time>...</time>
24시간제 시간이나 그레고리력 날짜를 나타내며, 선택적으로 시간 및 시간대 정보를 포함한다. 또한 시간과 날짜가 기계가 읽을 수 있는 형식으로 표현될 수 있게 한다.
HTML5에서 표준화되었다.[49]
<wbr />
선택적인 줄 바꿈 기회이다.
마침내 HTML5에서 표준화되기 전까지 비표준임에도 불구하고 1990년대부터 널리 사용되었고(주요 브라우저에 의해 지원됨)[50] 왔다.[51][52]

영상 및 객체

[편집]
<applet>...</applet> (deprecated)
페이지에 자바 애플릿을 임베드한다. 오직 자바 애플릿에서만 사용할 수 있고 접근성 제한이 있어 <object>를 사용하는 방식이 권장되면서 구식화되었다.
HTML 3.2에서 표준화되었고, HTML 4.0 Transitional에서 구식화되었으며, HTML 4.0 Strict에서는 유효하지 않다. HTML5에서는 구식(obsolete)이며 완전히 숨겨져 있다.
<area />
<map> 내에서 포커스 가능한 영역을 지정한다.
HTML 3.2에서 표준화되어 현재도 통용된다.
<audio>...</audio>
페이지에 재생 가능한 HTML5 오디오를 추가한다. 오디오 URL은 src 속성을 사용하여 결정된다. 지원되는 오디오 형식은 브라우저마다 다르다.
HTML5에서 표준화되었다.
<canvas>...</canvas>
 이 부분의 본문은 캔버스 요소입니다.
자바스크립트로 콘텐츠를 편집할 수 있는 캔버스를 추가한다. 온라인 게임에 자주 사용된다.
HTML5에서 표준화되었다.
<embed>...</embed>
비표준 객체(애플릿과 같은)나 외부 콘텐츠(일반적으로 비-HTML)를 문서에 삽입한다.
HTML 4에서 <object>를 사용하는 방식이 권장되면서 구식화되었으나, 그 후 HTML5 사양에 다시 추가되었다.[53]
<img />
시각적 사용자 에이전트에 의해 문서에 영상을 삽입하는 데 사용된다. src 속성은 영상 URL을 지정한다. 필수인 alt 속성은 영상을 표시할 수 없는 경우에 대비한 대체 텍스트를 제공한다.[54] (alt는 대체 텍스트 용도이지만, 마이크로소프트 인터넷 익스플로러 7 이하 버전에서는 title 속성이 주어지지 않은 경우 이를 말풍선으로 렌더링한다.[55] 반면 사파리와 구글 크롬은 alt 속성을 전혀 표시하지 않는다.)[56] <img /> 요소는 마크 앤드리슨에 의해 처음 제안되었고 NCSA 모자이크 웹 브라우저에서 구현되었다.[57]
IMG는 HTML Internet Draft 1.2에 존재했으며, HTML 2.0에서 표준화되어 현재도 통용된다.
<map>...</map>
클라이언트 사이드 이미지 맵을 지정한다.
HTML 3.2에서 표준화되어 현재도 통용된다.
<object>...</object>
type 속성에 의해 지정된 유형의 객체를 페이지에 포함한다. 이는 임베드된 HTML 페이지, 플래시와 같은 플러그인에 의해 처리될 파일, 자바 애플릿, 사운드 파일 등 사용자 에이전트가 이해하는 모든 MIME 유형이 될 수 있다.
HTML 4.0에서 표준화되어 현재도 통용된다.
<param />
원래 <applet>와 함께 도입되었으나, 현재는 <object>와 함께 사용되며 오직 <object>의 자식으로만 나타나야 한다. 객체 유형에 따라 너비, 높이, 글꼴, 배경색 등 객체에 대한 매개변수를 설정하기 위해 HTML 속성을 사용한다. 하나의 객체는 여러 개의 <param /> 요소를 가질 수 있다.
HTML 3.2에서 표준화되어 현재도 통용된다.
<source>...</source>
오디오 또는 비디오를 위한 다양한 소스를 지정한다. <video> 및 <audio> 요소와 유사한 방식으로 src 속성을 사용한다.
HTML5에서 표준화되었다.
<track>...</track>
오디오 및 비디오를 위한 자막이나 캡션과 같은 텍스트 트랙을 제공한다.
HTML5에서 표준화되었다.
<video>...</video>
페이지에 재생 가능한 HTML5 비디오를 추가한다. 비디오 URL은 src 속성을 사용하여 결정된다. 지원되는 비디오 형식은 브라우저마다 다르다.
HTML5에서 표준화되었다.

양식

[편집]

이러한 요소들은 양식으로 결합되거나 일부 사례에서는 사용자 인터페이스 컨트롤로서 별도로 사용될 수 있다. 문서에서 이들은 단순한 HTML이거나 스크립트와 결합되어 사용될 수 있다. HTML 마크업은 양식을 구성하는 요소와 양식이 제출될 방식을 지정한다. 그러나 사용자의 입력이 제출되면 이를 처리하기 위해 어떤 형태의 스크립트(서버 사이드 스크립트, 클라이언트 사이드, 또는 둘 다)가 사용되어야 한다.

(이 요소들은 블록 또는 인라인 요소이지만, 다른 인라인 또는 블록 요소보다 사용이 더 제한적이므로 여기에 모아서 설명한다.)

<form action="url">...</form>
양식을 생성한다. <form> 요소는 필수인 action 속성을 사용하여 양식 영역의 전반적인 동작을 지정하고 운영한다.
HTML 2.0에서 표준화되어 현재도 통용된다.
<button>...</button>
복잡한 단추를 만들기 위해 다른 다양한 요소를 포함할 수 있는 일반적인 양식 단추이다.
HTML 4.0에서 표준화되어 현재도 통용된다.
<datalist>...</datalist>
양식 요소에서 사용하기 위한 option들의 목록이다.
HTML5에서 표준화되었다.
<fieldset>...</fieldset>
양식에 구조를 추가하기 위한 컨테이너이다. 예를 들어, 일련의 관련 컨트롤들을 <fieldset> 내에 그룹화할 수 있으며, 그 기능을 식별하기 위해 <legend>를 추가할 수 있다.
HTML 4.0에서 표준화되어 현재도 통용된다.
<input />
<input> 요소는 다양한 표준 양식 컨트롤이 구현될 수 있도록 한다.
HTML 2.0에서 표준화되어 현재도 통용된다.
입력 유형(Input Types):
 type="checkbox"
체크 상자이다. 체크하거나 체크 해제할 수 있다.
 type="radio"
라디오 단추이다. 여러 라디오 단추에 동일한 이름을 부여하면 사용자는 이 그룹에서 오직 하나만 선택할 수 있다.
 type="button"
범용 단추이다. 클라이언트가 지원하는 경우 더 풍부한 가능성을 제공하는 <button> 요소의 사용이 선호된다.
 type="submit"
제출 단추이다.
 type="image"
영상 단추이다. 영상 URL은 src 속성으로 지정할 수 있다.
 type="reset"
양식을 기본값으로 재설정하기 위한 재설정 단추이다.
 type="text"
한 줄 텍스트 입력 필드이다. size 속성은 문자 너비 단위로 입력창의 기본 너비를 지정한다. max-length는 사용자가 입력할 수 있는 최대 문자 수를 설정한다(이는 size보다 클 수 있다).
검색 바를 생성하는 text의 변형이다.
 type="password"
text의 변형이다. 차이점은 이 필드에 입력된 텍스트가 마스킹된다는 것이다. 문자들은 별표, 점 또는 다른 대체 문자로 표시된다. 비밀번호는 여전히 평문으로 서버에 제출되므로, 기밀성이 우려되는 경우 HTTPS와 같은 보안 통신 프로토콜이 필요하다.
 type="file"
파일 선택 필드(서버로 파일을 업로드하기 위함)이다.
 type="tel"
전화번호를 위한 text의 변형이다.
 type="email"
이메일 주소를 위한 text의 변형이다.
 type="url"
URL을 위한 text의 변형이다.
 type="date"
날짜 선택기이다.
 type="time"
시간 선택기이다.
 type="number"
숫자를 위한 text의 변형이다.
 type="range"
숫자를 반환하는 슬라이더를 생성하지만 숫자가 사용자에게 보이지는 않는다.
 type="color"
색상 선택기이다.
 type="hidden"
hidden 입력은 렌더링된 페이지에서 보이지 않지만, 디자이너가 양식의 일부로서 서버에 제출되어야 하는 데이터의 복사본을 유지할 수 있게 한다. 이는 예를 들어, 현재 양식과 함께 처리되어야 하는 웹 사용자가 이전 양식에서 입력하거나 선택한 데이터가 될 수 있다. 사용자에게 표시되지 않지만 HTML 소스를 편집하여 클라이언트 사이드에서 데이터를 변경할 수 있다.
<isindex /> (deprecated)
<isindex />는 문서 헤드나 바디에 나타날 수 있지만 문서당 한 번만 나타날 수 있다. <isindex />는 원시적인 HTML 검색 양식으로 작동했으나, 1990년대 초중반에 도입된 더 진보된 HTML 양식들에 의해 데 팍토로 구식이 되었다. 기본 URI, 앰퍼샌드 및 더하기표로 구분된 퍼센트 인코딩 키워드로 구성된 하이퍼링크 집합을 나타낸다.
ISINDEX는 HTML Tags에 존재했으며, HTML 2.0에서 표준화되었고, HTML 4.0 Transitional에서 구식화되었으며, HTML 4.0 Strict에서는 유효하지 않다.
<keygen>...</keygen> (deprecated)
키 쌍 생성기이다.
HTML5에서 표준화되었으나 HTML 5.2에서 제거되었다.
<label for="id">...</label>
radio와 같은 양식 입력을 위한 레이블을 생성한다. 레이블을 클릭하면 일치하는 입력에 대한 클릭이 발생한다.
HTML 4.0에서 표준화되어 현재도 통용된다.
<legend>...</legend>
<fieldset>에 대한 범례(캡션)이다.
HTML 4.0에서 표준화되어 현재도 통용된다.
<meter>...</meter>
value 속성이 필요한 미터이다. min, low, high, max를 가질 수도 있다.
HTML5에서 표준화되었다.
<option value="x">...</option>
<select> 목록의 항목을 생성한다.
HTML 2.0에서 표준화되어 현재도 통용된다.
<optgroup>...</optgroup>
<select> 목록 내의 <option> 요소 그룹을 식별한다.
HTML 4.0에서 표준화되어 현재도 통용된다.
<output>...</output>
양식 요소의 값이다.
HTML5에서 표준화되었다.
<progress>...</progress>
동작의 진행 상황을 보여주는 바이다.
HTML5에서 표준화되었다.
<select name="xyz">...</select>
사용자가 단일 옵션을 선택할 수 있는 선택 목록을 생성한다. 드롭다운 목록으로 렌더링될 수 있다.
HTML 2.0에서 표준화되어 현재도 통용된다.
<textarea rows="8">...</textarea>
여러 줄 텍스트 영역이며, 크기는 HTML 속성 cols(한 열은 텍스트의 한 문자 너비)와 rows에 의해 지정된다. 이 요소의 콘텐츠는 평문으로 제한되며, 페이지가 로드될 때 기본 텍스트로서 텍스트 영역에 나타난다.
HTML 2.0에서 표준화되어 현재도 통용된다.

표

[편집]

HTML 표의 형식은 HTML 3.0 Drafts와 이후의 RFC 1942 HTML Tables에서 제안되었다. 이들은 CALS Table Model에서 영감을 얻었다. 이러한 제안 중 일부 요소들은 HTML 3.2에 포함되었으며, 현재 형태의 HTML 표는 HTML 4에서 표준화되었다. (표 내에서 사용되는 많은 요소는 블록 요소도 인라인 요소도 아니다.)

<table>...</table>
표를 식별한다. HTML Transitional에서는 여러 HTML 속성이 가능하지만, 이들 대부분은 HTML Strict에서 유효하지 않으며 스타일 시트로 대체될 수 있다. summary 속성은 접근성 목적을 위해 비공식적으로 요구되지만 그 사용법은 단순하지 않다.
HTML 3.0 Drafts에서 제안되었고, HTML 3.2에서 표준화되어 현재도 통용된다.
<tr>...</tr>
<table> 내의 셀 한 행을 포함한다.
HTML 3.0 Drafts에서 제안되었고, HTML 3.2에서 표준화되어 현재도 통용된다.
<th>...</th>
<table> 헤더 셀이다. 콘텐츠는 관례적으로 굵게 표시되고 가운데 정렬된다. 음성 사용자 에이전트는 이러한 항목들에 대해 더 큰 목소리를 사용할 수 있다.
HTML 3.0 Drafts에서 제안되었고, HTML 3.2에서 표준화되어 현재도 통용된다.
<td>...</td>
<table> 데이터 셀이다.
HTML 3.0 Drafts에서 제안되었고, HTML 3.2에서 표준화되어 현재도 통용된다.
<colgroup>...</colgroup>
<table> 내의 열 그룹을 지정한다.
HTML Tables에서 제안되었고, HTML 4.0에서 표준화되어 현재도 통용된다.
<col>...</col>
<table> 내의 열을 지정한다.
HTML Tables에서 제안되었고, HTML 4.0에서 표준화되어 현재도 통용된다.
<caption>...</caption>
<table>에 대한 캡션을 지정한다.
HTML 3.0 Drafts에서 제안되었고, HTML 3.2에서 표준화되어 현재도 통용된다.
<thead>...</thead>
<table>의 헤더 부분을 지정한다. 표가 인쇄나 다른 페이지 미디어에서 여러 페이지에 걸쳐 나뉠 때 사용자 에이전트에 의해 이 섹션이 반복될 수 있다.
HTML Tables에서 제안되었고, HTML 4.0에서 표준화되어 현재도 통용된다.
<tbody>...</tbody>
<table>에 대한 데이터 바디를 지정한다.
HTML Tables에서 제안되었고, HTML 4.0에서 표준화되어 현재도 통용된다.
<tfoot>...</tfoot>
<table>의 푸터 부분을 지정한다. <thead>와 마찬가지로, 표가 여러 페이지에 걸쳐 나뉠 때 사용자 에이전트에 의해 이 섹션이 반복될 수 있다.
HTML Tables에서 제안되었고, HTML 4.0에서 표준화되어 현재도 통용된다.

프레임

[편집]

프레임은 시각적 HTML 브라우저 창을 여러 구획으로 나눌 수 있게 하며, 각각은 다른 문서를 보여줄 수 있다. 레이아웃의 반복되는 부분은 하나의 프레임에서 사용하고 가변적인 콘텐츠는 다른 프레임에 표시할 수 있으므로 대역폭 사용을 줄일 수 있다. 그러나 별도의 독립된 문서(또는 웹사이트)들이 서로 인접하게 표시되고 동일한 부모 창과 상호작용할 수 있기 때문에, 특히 비시각적 사용자 에이전트에서 특정 사용성 비용이 발생할 수 있다.[58] 이러한 비용 때문에 <iframe> 요소를 제외한 프레임은 HTML 4.01 Frame-set에서만 허용된다. Iframe은 다른 서버에 있는 문서도 가질 수 있다. 이 경우 창들 사이의 상호작용은 브라우저에 의해 차단된다. 페이스북과 트위터와 같은 사이트들은 제3자 웹사이트에 콘텐츠(플러그인)를 표시하기 위해 iframe을 사용한다. 구글 AdSense는 제3자 웹사이트에 배너를 표시하기 위해 iframe을 사용한다.

HTML 4.01에서 문서는 <head>와 <body> 또는 <head>와 <frameset>를 포함할 수 있지만, <body>와 <frameset>를 동시에 포함할 수는 없다. 그러나 <iframe>는 일반적인 문서 바디에서 사용될 수 있다.

<frameset>...</frameset> (deprecated)
문서에 대한 <frame /> 요소들의 집합을 포함한다. 프레임의 레이아웃은 rows 및 cols HTML 속성에서 쉼표로 구분된 목록에 의해 결정된다.
HTML 4.0 Frameset에서 표준화되었으나 HTML5에서는 구식이다.
<frame /> (deprecated)
<frameset> 내의 단일 프레임 또는 영역을 정의한다. 별도의 문서가 <frame /> 요소 내부의 src 속성을 사용하여 프레임에 링크된다.
HTML 4.0 Frameset에서 표준화되었으나 HTML5에서는 구식이다.
<noframes>...</noframes> (deprecated)
<frame /> 요소를 지원하지 않는 사용자 에이전트를 위한 일반 HTML 콘텐츠를 포함한다.
HTML 4.0 Transitional에서 표준화되었으나 HTML5에서는 구식이다.
<iframe>...</iframe>
인라인 프레임은 다른 HTML 문서를 프레임 안에 배치한다. <object /> 요소와 달리 <iframe>는 다른 요소에 의해 정의된 링크의 "대상(target)" 프레임이 될 수 있으며, 인쇄나 소스 보기 등을 위한 포커스 대상으로 사용자 에이전트에 의해 선택될 수 있다. 요소의 콘텐츠는 브라우저가 인라인 프레임을 지원하지 않을 경우 표시될 대체 텍스트로 사용된다. 별도의 문서가 <iframe /> 내부의 src 속성을 사용하여 프레임에 링크되거나, 인라인 HTML 코드가 <iframe /> 요소 내부의 srcdoc 속성을 사용하여 프레임에 임베드된다.
1997년 마이크로소프트 인터넷 익스플로러에 의해 처음 도입되었고, HTML 4.0 Transitional에서 표준화되었으며 HTML5에서 허용된다.

longdesc 속성

[편집]

HTML에서 longdesc는 <img />, <frame />, 또는 <iframe> 요소 내에서 사용되는 속성이다. 이는 해당 영상, 프레임 또는 인라인 프레임에 대한 긴 설명을 제공하는 문서로의 URL[note 5]이어야 한다.[59] 이 속성은 설명 텍스트 자체가 아니라(흔히 하는 실수임) URL을 포함해야 한다.

longdesc는 시각 장애인이나 시각 장애가 있는 컴퓨터 사용자들에게 영상 정보를 표시하기 위해 스크린 리더에 의해 사용되도록 설계되었으며, 웹 브라우저와 스크린 리더 모두에서 널리 구현되어 있다.[60] 일부 개발자들은[61] 이 속성을 사용하는 저자가 상대적으로 적고 그들 중 대부분이 이를 잘못 사용하기 때문에 실제로 이 목적으로 거의 사용되지 않는다고 반론하며, longdesc를 구식화할 것을 권장한다.[62] 출판 업계는 이에 대응하여 longdesc의 유지를 옹호하고 있다.[63]

예시

[편집]
<img src="Hello.jpg" longdesc="description.html">


description.html의 내용:

<br />
<p>이것은 2단 생일 케이크의 영상입니다.</p>
...

텍스트 내의 긴 설명으로 링크하기

[편집]

네이티브하게 링크를 제공하는 것을 지원하는 그래픽 브라우저가 매우 적기 때문에(오페라와 iCab이 예외임), 가능하면 <img /> 요소 근처에 설명 페이지로의 링크를 포함하는 것이 유용하며, 이는 정안인 사용자들에게도 도움이 될 수 있다.

예시
[편집]
<img src="Hello.jpg" longdesc="description.html" /> [<a href=
"description.html" title="long description of the image">D</a>]

역사적 요소

[편집]

다음 요소들은 1989년부터 1991년까지 팀 버너스리가 개발한 초기 HTML의 일부였다. 이들은 HTML Tags에서 언급되었으나 HTML 2.0에서 구식화되었으며 HTML 표준의 일부였던 적이 없다.

<listing>...</listing> (deprecated)
이 요소는 태그 내부의 텍스트를 고정 폭 글꼴로 표시하고 HTML을 해석하지 않았다. HTML 2.0 사양은 이 요소를 한 줄에 최대 132자까지 렌더링할 것을 권장했다.
HTML 3.2에서 구식화되었고 HTML5에서 구식이다.[64]
<plaintext> (deprecated)
<plaintext>은 마크업을 종료하고 문서의 나머지 부분을 마치 평문인 것처럼 파싱하게 하므로 종료 태그가 없다.
<plaintext>은 HTML Tags에 존재했으며, HTML 2.0에서 구식화되었고 HTML 4.0에서 유효하지 않다.
<xmp>...</xmp> (deprecated)
이 요소는 태그 내부의 텍스트를 고정 폭 글꼴로 표시하고 HTML을 해석하지 않았다. HTML 2.0 사양은 이 요소를 한 줄에 80자로 렌더링할 것을 권장했다.
HTML 3.2에서 구식화되었고 HTML5에서 구식이다.[65]
<nextid> (deprecated)
이 요소는 NeXT 웹 디자인 툴이 앵커를 위한 자동 NAME 레이블을 생성할 수 있게 했으며 자체적으로 자동 생성되었다.[64]
<nextid>은 HTML Tags에 존재했으나(구식으로 설명됨), HTML 2.0에서 구식화되었고 HTML 3.2 이후 버전에서 유효하지 않다.

비표준 요소

[편집]
This is the new WikiPedia!
첫 위키백과 편집의 마키(marquee) 텍스트 예시(CSS를 통해 구현됨. <marquee> 태그 자체는 구식화되어 대부분의 브라우저에서 더 이상 작동하지 않음)
UuU
깜빡이는(blinking) 텍스트의 예시(CSS를 통해 구현됨. <blink> 태그 자체는 구식화되어 대부분의 브라우저에서 더 이상 작동하지 않음)와 페이지 링크. UwU와 구별된다. 이 페이지는 영어 위키백과에 남아 있는 가장 이른 시기의 편집을 담고 있다.

이 섹션은 널리 사용되었으나 구식이 된 요소들을 나열한다. 즉 이들은 유효한 코드에서 사용되지 않는다. 모든 사용자 에이전트에서 지원되지 않을 수 있다.

 이 부분의 본문은 깜빡임 요소입니다.
텍스트를 깜빡이게 한다. ANSI 이스케이프 코드를 모방하여 도입되었다. 지원되는 경우 CSS로 구현할 수 있다: {text-decoration: blink} (이 효과는 광과민성 발작이 있는 사람들에게 부정적인 영향을 줄 수 있으므로,[66] 공개 인터넷에서의 사용은 적절한 지침을 따라야 한다.)
<blink>는 네트스케이프 내비게이터에서 유래했으며 파이어폭스를 포함한 그 후손들에 의해 대부분 인식된다. HTML 2.0 이후 버전에서 구식화되었거나 유효하지 않다. 대체하는 CSS 태그는 표준이지만 지원이 필수는 아니다.
<layer>...</layer> (deprecated)
 이 부분의 본문은 레이어 요소입니다.
절대 위치가 지정된 프레임 레이어를 생성한다. 대신 프레임이나 CSS로 구현할 수 있다. ID, LEFT, TOP, PAGEX, PAGEY, SRC, Z-INDEX, ABOVE, WIDTH, HEIGHT, BELOW, CLIP, VISIBILITY 등의 속성이 있다.
<layer>는 네트스케이프 4에서 유래했으며, HTML 4.01 이후 버전에서 구식화되었거나 유효하지 않다.
<marquee>...</marquee> (deprecated)
 이 부분의 본문은 마키 요소입니다.
스크롤되는 텍스트를 생성한다. 대신 스크립트를 사용하여 구현할 수 있다. (이 효과는 광과민성 발작이 있는 사람들에게 부정적인 영향을 줄 수 있으므로,[66] 공개 인터넷에서의 사용은 적절한 지침을 따라야 한다.) Alternate, Scroll, Slide의 세 가지 옵션이 있다. Scrolldelay도 추가될 수 있다.
<marquee>는 마이크로소프트 인터넷 익스플로러에서 유래했으며, HTML 4.01 이후 버전에서 구식화되었거나 유효하지 않다.
<nobr>...</nobr> (deprecated)
텍스트가 줄 끝에서 바뀌지 않게 하여, 텍스트가 감싸는 객체의 너비를 초과할 때 자동 줄 바꿈을 방지한다. 인접한 텍스트는 그 앞뒤에서 바뀔 수 있다. CSS로 구현할 수 있다: {white-space: nowrap;}
<nobr>은 호환성 이유로 대부분의 브라우저에서 인식되는 독점적 요소이다. HTML 2.0 이후 버전에서 구식화되었거나 유효하지 않다.
<noembed>...</noembed> (deprecated)
임베드를 렌더링할 수 없는 경우의 대체 콘텐츠를 지정한다. <embed> 또는 <object> 요소의 콘텐츠로 대체되었다.

주석

[편집]
<!-- 주석 내용 -->

HTML(및 관련 XML, SGML, SHTML)의 주석은 문서 형식에 따라 SGML 주석이나 XML 주석과 동일한 구문을 사용한다.

대부분의 HTML 태그와 달리 주석은 중첩되지 않는다. 보다 일반적으로, 주석 텍스트에 나타나도록 허용되지 않는 일부 문자열이 있다. 이들은 <!--(주석의 시작), -->(주석을 종료하므로 주석 내부에 나타날 수 없음이 당연하게 따름), 그리고 --!>이다. 또한 문자열 >와 ->는 주석의 시작 부분에 나타날 수 없으며 <!-는 끝 부분에 나타날 수 없다.[67]

결과적으로 마크업 <!--Xbegin<!--Y-->Xend-->는 잘못 형성된 것이며, 브라우저에 따라 주석 Xbegin<!--Y와 그 뒤의 텍스트 Xend-->, 또는 때로는 그냥 Xend-->를 생성하게 된다.

HTML 파서는 주석이 다른 HTML 태그 구조 내부(예: 속성과 값 옆에는 사용할 수 없음. <span id="x1"<!--for "extension one"--> style="...">는 잘못된 마크업임)에 있지 않는 한 위치에 상관없이 무시해야 하므로, 주석은 문서 어디에서나 나타날 수 있다.

주석은 심지어 doctype 선언 앞에도 나타날 수 있는데, 다른 어떤 태그도 이를 수행할 수 없다.

그러나 모든 브라우저와 HTML 편집기가 HTML 구문 프레임워크를 완전히 준수하는 것은 아니며 일부 구문 조건 하에서 예측할 수 없는 동작을 할 수 있다. 주석 처리의 결함은 사용 중인 모든 브라우저 및 HTML 편집기의 약 5%에만 영향을 미치며, 그 중에서도 특정 버전만이 주석 오처리 문제의 영향을 받는다(인터넷 익스플로러 6가 이 높은 비율의 대부분을 차지한다).

주석과 관련된 몇 가지 호환성 특이점이 있다:

  • doctype 앞에 주석(또는 공백을 제외한 모든 문자)을 배치하면 인터넷 익스플로러 6가 해당 HTML 페이지에 대해 쿼크 모드를 사용하게 된다. doctype 정보가 전혀 처리되지 않게 된다.
  • 1995년 이전의 일부 브라우저와의 호환성을 위해 <style> 및 <script> 요소의 내용은 여전히 종종 주석 구분 기호로 둘러싸여 있으며, CSS 및 스크립트 기능이 있는 브라우저들은 해당 주석 마크업을 실제 주석이 아닌 것으로 특별히 무시하도록 작성되어 있다. 이는 예를 들어 <-- [script]...[/script] -->와 같이 요소 내부를 변경하여 CSS 및 스크립트 마크업을 실제로 주석 처리하려는 시도가 인식되지 않음을 의미한다.
  • BlueGriffon HTML 편집기 1.7.x 버전은 구문 구조에 임베드되지 않은 주석을 생성한다. <style> ... {comment tags} ...</style>가 화면에 나타날 것이다. 다른 HTML 편집기들도 동일한 결함을 가질 수 있다.

같이 보기

[편집]

각주

[편집]
  1. ↑ mozilla.org contributors (2025년 8월 18일). “Node - DOM API” (미국 영어). 《MDN Web Docs》. 2025년 9월 5일에 확인함.
  2. ↑ “§3 On SGML and HTML”. 《HTML 4.01 Specification》. W3C. 1999년 12월 24일. §3.2.1 Elements.
  3. ↑ “On SGML and HTML”. 《www.w3.org》. 2025년 10월 11일에 확인함.
  4. 1 2 “HTML 5.1 2nd Edition § 8.1.2.4. Optional tags”. 《WHATWG》. 2025년 9월 14일. 2025년 9월 14일에 확인함.
  5. ↑ “§3 On SGML and HTML”. 《HTML 4.01 Specification》. W3C. 1999년 12월 24일. §3.1 Introduction to SGML.
  6. ↑ “HTML 4.01, §21, Document Type Definition”. W3C. 1999년 12월 24일.
  7. 1 2 3 4 5 “HTML Standard § Optional tags”. 《WHATWG》. 2019년 3월 22일에 확인함.
  8. ↑ “§1. Document Object Model HTML”. 《Document Object Model (DOM) Level 2 HTML Specification》. W3C. 2003년 1월 9일. §1.3. XHTML and the HTML DOM.
  9. 1 2 “§7 The global structure of an HTML document”. 《HTML 4.01 Specification》. W3C. 1999년 12월 24일. §7.5.3 Block-level and inline elements.
  10. ↑ Mark Newhouse (2002년 9월 27일). “CSS Design: Taming Lists”. A List Apart.
  11. ↑ XHTML 1.0 §4.2
  12. ↑ XML 1.0 (추가 요소를 생성하는 기능은 약어의 eXtensibility(확장성)의 일부이다.)
  13. ↑ XML 1.0 §5.1
  14. ↑ WHATWGLS. § 15
  15. ↑ XHTML 1.1 §A
  16. ↑ “HTML & CSS”. W3C. 2013.
  17. ↑ “Appendix D. Default style sheet for HTML 4”. 《Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification》. W3C. 2011년 6월 7일.
  18. ↑ HTML 4.01 §14.1
  19. ↑ Ferraiolo, J.; Fujisawa, J.; Jackson, D. 편집 (2003년 1월 14일). “§2.3 Options for using SVG in Web pages”. 《Scalable Vector Graphics (SVG) 1.1 Specification》. W3C. 2009년 3월 25일에 확인함.
  20. ↑ HTML 4.01 §12.3
  21. ↑ HTML 4.01 §14.3.2
  22. ↑ HTML 4.01 §18
  23. ↑ CSS §1.1
  24. ↑ “4.4 Grouping content – HTML5”. 《HTML5: A vocabulary and associated APIs for HTML and XHTML – W3C Recommendation》. World Wide Web Consortium. 2014년 10월 28일. §4.4.8 The dl element. 2015년 8월 16일에 확인함.
  25. ↑ “Lists in HTML documents”. 《HTML 4.01 Specification – W3C Recommendation》. World Wide Web Consortium. 1999년 12월 24일. §10.3 Definition lists: the DL, DT, and DD elements. 2015년 5월 2일에 확인함.
  26. ↑ “HTML5: A Vocabulary and Associated APIs for HTML and XHTML, W3C Working Draft”. 《W3C》. 2011년 4월 5일..
  27. ↑ 《HTML 4.01》, W3C, 2012년 3월 26일에 확인함
  28. ↑ Tittel, Ed; Burmeister, Mary C. (2005). 《HTML 4 for dummies》 5판. Hoboken, New Jersey: Wiley. 96쪽. ISBN 978-0-7645-8917-1. 2022년 8월 7일에 확인함.
  29. ↑ “ServerWriter -- /Provider”. 《W3C》.
  30. ↑ “HTML 5.2”. 《W3C》.
  31. ↑ Acronym tag, acronym.
  32. ↑ 《4.6 Text-level semantics — The b element》, Developers.whatwg.org, 2012년 3월 26일에 확인함
  33. ↑ 《4.6 Text-level semantics — The i element》, Developers.whatwg.org, 2012년 3월 26일에 확인함
  34. ↑ 《4.6 Text-level semantics — The u element》, Developers.whatwg.org, 2012년 3월 26일에 확인함
  35. ↑ 《4.6 Text-level semantics — The small element》, Developers.whatwg.org, 2012년 3월 26일에 확인함
  36. ↑ 《4.6 Text-level semantics — The s element》, Developers.whatwg.org, 2012년 3월 26일에 확인함
  37. 1 2 《11 Obsolete features — HTML5》, W3C, 2012년 3월 26일에 확인함
  38. ↑ “HTML5 specification finalized, squabbling over specs continues”. Ars Technica. 2014년 10월 29일. 2014년 10월 29일에 확인함.
  39. ↑ “9.2.1 Phrase elements: EM, STRONG, DFN, CODE, SAMP, KBD, VAR, CITE, ABBR, and ACRONYM”. 《HTML 4.01 Specification》. W3C. 1999년 12월 24일. 2018년 7월 26일에 확인함.
  40. ↑ HTML 5.2 W3C Recommendation, "§4.5.6. The cite element" 참조.
  41. ↑ HTML Living Standard, "§4.5.6 The cite element" 참조.
  42. ↑ “<data>”. 《MDN Web Docs》.
  43. ↑ “HTML <rb> Tag”. 《www.quackit.com》.
  44. ↑ “<rp>: The Ruby Fallback Parenthesis element”. 《MDN Web Docs》.
  45. ↑ “<rt>: The Ruby Text element”. 《MDN Web Docs》.
  46. ↑ “<rtc>: The Ruby Text Container element”. 《MDN Web Docs》.
  47. ↑ “<ruby>”. 《MDN Web Docs》.
  48. ↑ “<template>”. 《MDN Web Docs》.
  49. ↑ “<time>”. 《MDN Web Docs》.
  50. ↑ “<wbr>”. 《Web platform features explorer》. W3C WebDX Community Group. 2025. 2025년 11월 14일에 원본 문서에서 보존된 문서. 2026년 1월 2일에 확인함.
  51. ↑ 당시의 주요 브라우저였던 넷스케이프 1.1(1994) 및 인터넷 익스플로러 2(1995)에 의해 도입되었다. 참조: “<wbr> (Word Break”. 《HTML & XHTML: The Complete Reƒerence》. PINT Inc. & The McGraw-Hill Companies. 2003. 2003년 12월 24일에 원본 문서에서 보존된 문서. 2026년 1월 2일에 확인함.
  52. ↑ “<wbr>”. 《MDN Web Docs》.
  53. ↑ W3Schools about <embed>
  54. ↑ alt 속성의 텍스트는 마크업으로 스타일을 지정할 수 없다. 결과적으로, 사용자의 브라우저에서 영상 기능이 꺼져 있을 때 스타일이 지정된 텍스트가 표시되기를 원하는 코더들의 상황에 맞추기 위해 Fahrner Image Replacement와 같은 다른 대체 텍스트 표시 방법들이 고안되었다.
  55. ↑ “What's New in Internet Explorer 8 – Accessibility and ARIA”. 《MSDN》. Microsoft. 2009년 7월 22일에 확인함.
  56. ↑ 《Bug 5566 – ALT attribute value sometimes not displayed when image is missing》, Bugs.webkit.org, 2012년 3월 26일에 확인함
  57. ↑ 《WWW-Talk Jan-Mar 1993: proposed new tag: IMG》, 1997.webhistory.org, 2012년 3월 26일에 확인함
  58. ↑ “Are frames accessible?”. ...frames do present additional usability challenges that are unique to users with disabilities, particularly those who use screen readers.
  59. ↑ “Objects, Images, and Applets”. W3C. 2008년 12월 20일에 확인함.
  60. ↑ “InState Longdesc”. 2011년 9월 5일에 확인함.
  61. ↑ “Creating Accessible Images”. WebAim. 2008년 12월 20일에 확인함.
  62. ↑ 《Longdesc usage - WHATWG Wiki》, Wiki.whatwg.org, 2012년 3월 26일에 확인함
  63. ↑ “Bug 13461 - Commentary on Issue #30 (longdesc) from the Association of American Publishers”. 2011년 9월 5일에 확인함.
  64. 1 2 “Obsolete – Non-conforming features”. 《HTML Living Standard》. WHATWG. 2022년 7월 22일. 2022년 8월 7일에 확인함.
  65. ↑ “<xmp>”. 《MDN Web Docs》. 2023년 2월 24일.
  66. 1 2 Chisholm, Wendy; Vanderheiden, Gregg; Jacobs, Ian (1999년 5월 5일). “Web Content Accessibility Guidelines 1.0”. World Wide Web Consortium. 2010년 7월 20일에 확인함.
  67. ↑ “HTML standard”. 《html.spec.whatwg.org》.
내용주
  1. ↑ HTML 4.01은 잘 알려진 소수의 HTML DTD 중 하나이다. 다른 W3C 발행 HTML DTD에도 동일한 동작이 적용되지만, 여기서는 가장 설명하기 좋은 예시로 선택되었다.
  2. ↑ DTD의 매크로와 유사한 기능은 XML 내에서 여전히 사용될 수 있다.
  3. ↑ 한 가지 사소한 차이점은 XML이 DOM 인터페이스 이후에도 대소문자를 구분한다는 점이다.[8]
  4. ↑ 그러나 불가피한 예외로 <object>를 참조하라.
  5. ↑ 엄밀히는 URL이 아닌 IRI이지만, URL은 IRI의 하위 집합이다.

외부 링크

[편집]
원본 주소 "https://ko.wikipedia.org/w/index.php?title=HTML_요소&oldid=41408292"