HTML 요소 문서 원본 보기

{{위키데이터 속성 추적}}
{{HTML}}
'''HTML 요소''' 또는 '''HTML 엘리먼트'''(HTML element)는 [[HTML]] 문서나 [[웹 페이지]]를 이루는 개별적인 요소를 의미하며, [[문서 객체 모델]](DOM)으로 파싱된다. HTML은 [[트리 구조|트리]]나 HTML [[노드]](텍스트 노드 등)로 구성된다. 각 노드는 [[HTML 속성]]을 지정할 수 있다. 노드들은 기타 노드와 텍스트를 포함한 콘텐츠도 소유할 수 있다. 수많은 HTML 노드들은 [[의미론|시맨틱]]이나 의미를 표현한다. 이를테면 <code>title</code> 노드는 문서의 제목을 나타낸다.

== 개념 ==
=== 문서와 DOM ===
HTML 문서들은 "문서"(document)로 전달된다.<ref group="note" >"Document" may refer interchangeably to either a file stored on a computer filesystem, usually on disk, or to a document delivered across the Web by [[HTTP]]. Such documents may equally be copies of disk files stored on the web server, or they may be generated on demand.</ref> 이들은 [[구문 분석]] 과정을 거쳐 웹 브라우저 내에서 [[문서 객체 모델]](DOM) 내부 표현으로 변환된다.{{refn|[[문서 객체 모델|Document Object Model]] is now a formalized specification by the [[W3C]].<ref name="W3C Current DOM version" >{{웹 인용
  |title=Document Object Model (DOM) Current Version
  |date=26 July 2016
  |url=http://www.w3.org/TR/dom
  |publisher=[[W3C]]
}}</ref> 이를 통해 내부 모델 그 자체가 아닌 내부 모델로의 인터페이스를 정의하게 된다. 초기의 웹 브라우저들은 DOM과 관련이 거의 없는 자신들만의 내부 표현을 사용하였다. 문서 트리(document tree)라는 용어 또한 해당된다.<ref>{{웹 인용
  |title=Definitions – Document tree
  |section=3 Conformance: Requirements and Recommendations
  |work=Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification
  |date=7 June 2011
  |url=http://www.w3.org/TR/CSS2/conform.html#doctree
  |publisher=[[W3C]]
}}</ref>
그러나 태그의 문서와 파싱된 요소의 모델 간 차이를 설명할 경우 DOM 스루풋이라는 용어를 사용하는 것이 간편하다. |group=note}}<ref group="note" >The term "web browser" here is used for simplicity. It does of course include other sorts of [[web user agent]], such as search engine [[웹 크롤러|web crawlers]], automatic news-feed retrievers etc.</ref>

화면과 같은 웹 브라우저의 표현이라든지 자바스크립트의 접근은 그 다음에 이 내부 모델에서 수행되며 원래의 문서에서 수행되지는 않는다.

초기의 HTML 문서들은 오늘날 어느 정도는 크게 [[태그 숩|유효하지 않은 HTML]]이었으며 문법 오류 투성이었다. 가능한 이러한 오류를 해결하기 위해 파싱 과정도 필요했다. 그 결과의 모델은 정확하지는 않지만(이를테면 주의깊은 코더가 원래 의도한 바를 표현하지 못하는 등) 적어도 HTMl 표준에 따라 [[유효한 HTML|유효]]하다. 유효한 모델은 제공되는 [[태그 숩]]이 얼마나 나쁜지에 관계 없이 만들어진다. 극소수의 경우에만 파서가 파싱을 포기한다.

=== 요소와 태그 ===
요소와 태그는 널리 혼동되는 용어들이다. HTML 문서들은 태그를 포함하지만 요소를 포함하지는 않는다. 요소는 구문 분석 단계 "이후"에 이 태그들로부터 생성된다.

요소의 위치는 시작 태그로부터 신장되며 일부 차일드 콘텐츠를 포함할 수 있으며 종료 태그로 종료된다.<ref>{{웹 인용
  |title=§3.2.1 Elements
  |section=§3 On SGML and HTML
  |work=HTML 4.01 Specification
  |date=24 December 1999
  |url=http://www.w3.org/TR/1999/REC-html401-19991224/intro/sgmltut.html#h-3.2.1
  |publisher=[[W3C]]
  |확인날짜=2018-02-14
  |보존url=https://web.archive.org/web/20091201031502/http://www.w3.org/TR/1999/REC-html401-19991224/intro/sgmltut.html#h-3.2.1
  |보존날짜=2009-12-01
  |url-status=dead
  }}</ref> HTML 문서 내의 다수의 요소에 해당되지만 모든 요소에 해당되는 것은 아니다.

HTML이 [[SGML]]에 기반을 두므로<ref>{{웹 인용
  |title=§3.1 Introduction to SGML
  |section=§3 On SGML and HTML
  |work=HTML 4.01 Specification
  |date=24 December 1999
  |url=http://www.w3.org/TR/1999/REC-html401-19991224/intro/sgmltut.html
  |publisher=[[W3C]]
  |확인날짜=2018-02-14
  |보존url=https://web.archive.org/web/20091201031502/http://www.w3.org/TR/1999/REC-html401-19991224/intro/sgmltut.html
  |보존날짜=2009-12-01
  |url-status=dead
  }}</ref> 구문 분석 또한 [[문서 형식 정의|DTD]], 특히 HTML 4.01의 것과 같은 HTML DTD의 사용에 의존한다.<ref name="W3C, HTML 401 DTD" >{{웹 인용
  |title=HTML 4.01, §21, Document Type Definition
  |date=24 December 1999
  |url=http://www.w3.org/TR/1999/REC-html401-19991224/sgml/dtd.html
  |publisher=[[W3C]]
  |확인날짜=2018-02-14
  |보존url=https://web.archive.org/web/20100104091944/http://www.w3.org/TR/1999/REC-html401-19991224/sgml/dtd.html
  |보존날짜=2010-01-04
  |url-status=dead
  }}</ref><ref group="note" >HTML 4.01 is one of a small number of well-known HTML DTDs. It is chosen here as the best illustrative example, although the same behavior applies to the other W3C-published DTDs for HTML.</ref> DTD는 어느 요소 유형이 가능한지 규정하며(예: HTML을 이루는 요소 유형의 집합을 정의) 문서에서 나타나는 유효한 결합도 규정한다.

HTML의 문서의 일부는
: {{code|lang=html|code=<p>Para 1 <p>Para 2 <p>Para 3 }}
다음과 동등한 것으로 추론한다:
: {{code|lang=html|code=<p>Para 1 </p><p>Para 2 </p><p>Para 3 }}

=== SGML과 XML ===
SGML은 복잡하며 폭넓은 채택과 이해에 제한이 있다. 더 단순한 대안으로 [[XML]]이 개발되었다. XML은 DTD 매커니즘을 사용하여 지원 요소 및 허가된 결합을 문서 구조로 정의한다는 면에서 SGML과 비슷하다. XML 구문 분석은 더 단순하다.

==== <code>%block;</code>과 box ====
CSS 표현 동작의 일부는 [[CSS 박스 모델|박스 모델]]의 개념이다. 이것은 CSS가 블록 요소로 간주되는 요소들에 적용되며 CSS {{code|lang=css|code=display: block;}} 선언을 통해 설정된다.

HTML 또한 차이는 있지만 유사 개념이 있으며 이 둘이 종종 혼동된다. <code>%block;</code>과 <code>%inline;</code>은 "block-level" 또는 "inline"으로 요소들을 묶는 HTML DTD 내의 그룹들이다.<ref name="W3C, HTML 4.01, block and inline" >{{웹 인용
  |title=§7.5.3 Block-level and inline elements
  |section=§7 The global structure of an HTML document
  |work=HTML 4.01 Specification
  |date=24 December 1999
  |url=http://www.w3.org/TR/1999/REC-html401-19991224/struct/global.html#h-7.5.3
  |publisher=[[W3C]]
  |확인날짜=2018-02-14
  |보존url=https://web.archive.org/web/20100107112909/http://www.w3.org/TR/1999/REC-html401-19991224/struct/global.html#h-7.5.3
  |보존날짜=2010-01-07
  |url-status=dead
  }}</ref>
이것을 사용하면 네스팅(nesting) 동작을 정의할 수 있다: block-level 요소들은 inline 컨텍스트에 추가할 수 없다.<ref group="note" >Although see <code>&lt;object&gt;</code> for the inevitable exception.</ref> 이 동작은 변경할 수 없고 DTD 안에 고정된다.

== 개요 ==
=== 문법 ===
{{Image frame|caption=HTML 컨테이너 요소의 일부
|content=<math>
\overbrace{
  \overbrace{\mathtt{\color{BrickRed}<\!p\ }\color{Magenta}\underbrace\mathtt{class}_\mathsf{\color{Black}{Attribute \atop name}}\mathtt{= ''}\!\underbrace\mathtt{foo}_\mathsf{\color{White}{Attr} \atop \color{Black}value}''\mathtt{\color{BrickRed}>}}^\mathsf{Start\ tag}
  \overbrace\mathtt{\color{Green}This\ is\ a\ paragraph.}^\mathsf{Content}
  \overbrace\mathtt{\color{BrickRed}<\!/p\!>}^\mathsf{End \atop tag}
}^\mathsf{Element}
</math>
}}
HTML 문법에서 대부분의 요소들은 시작 태그와 종료 태그로 작성되며 그 사이에 내용이 들어간다. HTML 태그는 요소 이름, 또 그 요소를 둘러싸는 [[괄호|꺾쇠괄호]]로 이루어진다. 종료 태그 또한 꺾쇠괄호를 연 뒤 슬래시를 넣어 시작 태그와 구별한다. 이를테면 <code>p</code> 요소로 대표되는 문단은 다음과 같이 작성한다:
<syntaxhighlight lang="html4strict">
<p>In the HTML syntax, most elements are written ...</p>
</syntaxhighlight>
그러나 모든 요소에 종료 태그가 "필수"인 것은 아니며 시작 태그 또한 마찬가지이다. 이른바 빈 요소(empty elements, void elements)로 불리는 일부 요소들은 종료 태그가 없다. 일반적인 예가 <code>br</code> 요소이며, 주소나 시와 같은 곳에서 중요한 [[하드 리턴|줄 나눔]]을 표현한다. 빈 요소의 동작은 미리 정의되므로 어떠한 내용이나 다른 요소가 포함될 수 없다. 이를테면 주소는 다음과 같이 쓸 수 있다:
<syntaxhighlight lang="html4strict">
<p>P. Sherman<br>42 Wallaby Way<br>Sydney</p>
</syntaxhighlight>
[[XHTML]] [[문서 형식 정의|DTD]]를 사용할 때 하나의 태그로 요소를 열고 닫아야 한다. 빈 요소임을 지정하려면 "/"를 태그 끝에 포함시킨다. (닫는 태그의 시작부의 "/"와 혼동하지 말 것)
<syntaxhighlight lang="html4strict">
<p>P. Sherman<br />42 Wallaby Way<br />Sydney</p>
</syntaxhighlight>

[[HTML 속성]]은 시작 태그 안에 지정한다. 이를테면 <code>abbr</code> 요소는 [[축약]]을 의미하며 <code>title</code> 속성이 여는 태그 안에 있을 것이라 예측하는 예는 다음과 같다:
<syntaxhighlight lang="html4strict">
<abbr title="abbreviation">abbr.</abbr>
</syntaxhighlight>

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

'''빈 요소'''는 [[HTML 속성]]만 담고있는 시작 태그만 있다. 텍스트나 다른 요소들과 같은 칠드런은 포함하지 않는다. 그림 ({{tag|img|s}}) 요소와 같은 외부 링크를 참조하는 요소를 위한 플레이스 홀더 역할을 하기도 한다. 요소에 포함되는 속성들은 그 뒤 외부 파일을 가리키게 된다. 빈 요소의 다른 예는 {{tag|link|s}} 요소이며 이를 위한 문법은 다음과 같다:
<syntaxhighlight lang="html4strict">
<link rel="stylesheet" href="fancy.css" type="text/css">
</syntaxhighlight>
이 {{tag|link|s}} 요소는 HTML 문서를 사용자에게 표시할 때 사용하기 위한 [[스타일시트]]의 브라우저를 가리킨다. HTML 문법에서 속성은 특정 문자열(문자, 숫자, 하이픈 마이너스, 마침표)만 구성하고 있다면 인용부호를 사용할 필요가 없다. 한편 [[XML]] 문법([[XHTML]])을 사용할 때 모든 속성은 인용 부호로 감싸야 하며 마지막 꺾쇠 괄호 앞에 [[슬래시]]를 추가해야 한다:
<syntaxhighlight lang="xml">
<link rel="stylesheet" href="fancy.css" type="text/css" />
</syntaxhighlight>

'''순수 텍스트 요소'''는 다음으로 구성된다:
* 시작 태그 ({{code|lang=html|code=<tag>}}): 요소의 시작을 알리며 수많은 [[HTML 속성]]을 포함할 수 있다.
* 요소(모든 태그는 콘텐츠로 해석됨)가 없는 어느 정도 분량의 텍스트 내용.
* 종료 태그: 요소 이름은 슬래시로 구분한다({{code|lang=html|code=</tag>}}) 일부 HTML 버전에서 종료 태그는 일부 요소들에게 선택사항이다. 종료 태그는 [[XHTML]]에서는 필수이다.

'''일반 요소'''는 보통 시작 태그와 종료 태그를 갖고 있으나 일부 요소들의 경우 종료 태그 또는 시작 태그와 종료 태그를 둘 다 생략할 수 있다. 비슷한 방식으로 구성되어 있다:
* 시작 태그 ({{code|lang=html|code=<tag>}}): 요소의 시작을 알리며 수많은 [[HTML 속성]]을 포함할 수 있다.
* 텍스트와 기타 요소들을 포함하는 어느 정도 분량의 내용.
* 종료 태그: 요소 이름은 슬래시로 구분한다({{code|lang=html|code=</tag>}})

== HTML 태그 목록 ==
HTML 요소를 표현하기 위한 HTML 태그 목록은 다음과 같다.<ref>출처: http://www.w3schools.com/tags/default.asp</ref>
* <code><nowiki><a></nowiki></code>
* <code><nowiki><abbr></nowiki></code>
* <code><nowiki><acronym></nowiki></code>
* <code><nowiki><address></nowiki></code>
* <code><nowiki><applet></nowiki></code>
* <code><nowiki><area></nowiki></code>
* <code><nowiki><article></nowiki></code>
* <code><nowiki><aside></nowiki></code>
* <code><nowiki><audio></nowiki></code>
* <code><nowiki><b></nowiki></code>
* <code><nowiki><base></nowiki></code>
* <code><nowiki><basefont></nowiki></code>
* <code><nowiki><bdi></nowiki></code>
* <code><nowiki><bdo></nowiki></code>
* <code><nowiki><big></nowiki></code>
* <code><nowiki><blockquote></nowiki></code>
* <code><nowiki><body></nowiki></code>
* <code><nowiki><br></nowiki></code>
* <code><nowiki><canvas></nowiki></code>
* <code><nowiki><caption></nowiki></code>
* <code><nowiki><center></nowiki></code>
* <code><nowiki><cite></nowiki></code>
* <code><nowiki><code></nowiki></code>
* <code><nowiki><col></nowiki></code>
* <code><nowiki><colgroup></nowiki></code>
* <code><nowiki><command></nowiki></code>
* <code><nowiki><datalist></nowiki></code>
* <code><nowiki><dd></nowiki></code>
* <code><nowiki><del></nowiki></code>
* <code><nowiki><details></nowiki></code>
* <code><nowiki><dfn></nowiki></code>
* <code><nowiki><dialog></nowiki></code>
* <code><nowiki><dir></nowiki></code>
* <code><nowiki><div></nowiki></code>
* <code><nowiki><dl></nowiki></code>
* <code><nowiki><dt></nowiki></code>
* <code><nowiki><em></nowiki></code>
* <code><nowiki><embed></nowiki></code>
* <code><nowiki><fieldset></nowiki></code>
* <code><nowiki><figcaption></nowiki></code>
* <code><nowiki><figure></nowiki></code>
* <code><nowiki><font></nowiki></code>
* <code><nowiki><footer></nowiki></code>
* <code><nowiki><form></nowiki></code>
* <code><nowiki><frame></nowiki></code>
* <code><nowiki><frameset></nowiki></code>
* <code><nowiki><h1></nowiki></code> to <nowiki><h6></nowiki></code>
* <code><nowiki><head></nowiki></code>
* <code><nowiki><header></nowiki></code>
* <code><nowiki><hgroup></nowiki></code>
* <code><nowiki><hr></nowiki></code>
* <code><nowiki><html></nowiki></code>
* <code><nowiki><i></nowiki></code>
* <code><nowiki><iframe></nowiki></code>
* <code><nowiki><img></nowiki></code>
* <code><nowiki><input></nowiki></code>
* <code><nowiki><ins></nowiki></code>
* <code><nowiki><kbd></nowiki></code>
* <code><nowiki><keygen></nowiki></code>
* <code><nowiki><label></nowiki></code>
* <code><nowiki><legend></nowiki></code>
* <code><nowiki><li></nowiki></code>
* <code><nowiki><link></nowiki></code>
* <code><nowiki><map></nowiki></code>
* <code><nowiki><mark></nowiki></code>
* <code><nowiki><menu></nowiki></code>
* <code><nowiki><meta></nowiki></code>
* <code><nowiki><meter></nowiki></code>
* <code><nowiki><nav></nowiki></code>
* <code><nowiki><noframes></nowiki></code>
* <code><nowiki><noscript></nowiki></code>
* <code><nowiki><object></nowiki></code>
* <code><nowiki><ol></nowiki></code>
* <code><nowiki><optgroup></nowiki></code>
* <code><nowiki><option></nowiki></code>
* <code><nowiki><output></nowiki></code>
* <code><nowiki><p></nowiki></code>
* <code><nowiki><param></nowiki></code>
* <code><nowiki><pre></nowiki></code>
* <code><nowiki><progress></nowiki></code>
* <code><nowiki><q></nowiki></code>
* <code><nowiki><rp></nowiki></code>
* <code><nowiki><rt></nowiki></code>
* <code><nowiki><ruby></nowiki></code>
* <code><nowiki><s></nowiki></code>
* <code><nowiki><samp></nowiki></code>
* <code><nowiki><script></nowiki></code>
* <code><nowiki><section></nowiki></code>
* <code><nowiki><select></nowiki></code>
* <code><nowiki><small></nowiki></code>
* <code><nowiki><syntaxhighlight></nowiki></code>
* <code><nowiki><span></nowiki></code>
* <code><nowiki><strike></nowiki></code>
* <code><nowiki><strong></nowiki></code>
* <code><nowiki><style></nowiki></code>
* <code><nowiki><sub></nowiki></code>
* <code><nowiki><summary></nowiki></code>
* <code><nowiki><sup></nowiki></code>
* <code><nowiki><table></nowiki></code>
* <code><nowiki><tbody></nowiki></code>
* <code><nowiki><td></nowiki></code>
* <code><nowiki><textarea></nowiki></code>
* <code><nowiki><tfoot></nowiki></code>
* <code><nowiki><th></nowiki></code>
* <code><nowiki><thead></nowiki></code>
* <code><nowiki><time></nowiki></code>
* <code><nowiki><title></nowiki></code>
* <code><nowiki><tr></nowiki></code>
* <code><nowiki><track></nowiki></code>
* <code><nowiki><tt></nowiki></code>
* <code><nowiki><u></nowiki></code>
* <code><nowiki><ul></nowiki></code>
* <code><nowiki><var></nowiki></code>
* <code><nowiki><video></nowiki></code>
* <code><nowiki><wbr></nowiki></code>

== 주석 처리 ==
{{-}}
;{{code|lang=html|code=<<nowiki />!-- 주석 -->}}

HTML(및 XML, SGML, SHTML)의 [[주석 (프로그래밍)|주석]]은 doctype에 따라 [[SGML]]이나 [[XML]]의 주석과 동일한 문법을 사용한다.

마크업 {{code|lang=html|code=<!<nowiki />--Xbegin<<nowiki />!--Y-->Xend-->}}은 <code>Xbegin&lt;!--Y</code>과 그 뒤에 텍스트 <code>Xend--></code>를 만들어낸다.

주석은 문서 내 어디든 올 수 있으며 doctype 선언 이전에도 올 수 있다.

== 같이 보기 ==
* [[문서 객체 모델]](DOM)
* [[자바스크립트]]

== 각주 ==
{{각주}}
; 내용주
{{각주|group=note}}

== 외부 링크 ==
* HTML 4.01 (Dec 24, 1999): [http://www.w3.org/TR/html401/index/elements.html elements] and [http://www.w3.org/TR/html401/index/attributes.html attributes]
* {{vanchor|HTML5}} (Oct 28, 2014): [http://www.w3.org/TR/html5/index.html elements and attributes]

[[분류:HTML 태그| ]]
[[분류:웹 1.0]]