Loading AI tools
웹 마크업 언어 위키백과, 무료 백과사전
하이퍼 텍스트 마크업 언어(영어: Hyper Text Markup Language, HTML, 문화어: 초본문표식달기언어, 하이퍼본문표식달기언어)는 웹 페이지 표시를 위해 개발된 지배적인 마크업 언어다. 또한, HTML은 제목, 단락, 목록 등과 같은 본문을 위한 구조적 의미를 나타내는 것뿐만 아니라 링크, 인용과 그 밖의 항목으로 구조적 문서를 만들 수 있는 방법을 제공한다. 그리고 이미지와 객체를 내장하여 대화형 양식을 생성하는 데 사용될 수 있다. HTML은 웹 페이지 콘텐츠 안의 꺾쇠 괄호에 둘러싸인 "태그"로 되어있는 HTML 요소 형태로 작성한다. HTML은 웹 브라우저와 같은 HTML 처리 장치의 행동에 영향을 주는 자바스크립트, 본문과 그 밖의 항목의 외관과 배치를 정의하는 CSS 같은 스크립트를 포함하거나 불러올 수 있다. HTML과 CSS 표준의 공동 책임자인 W3C는 명확하고 표상적인 마크업을 위하여 CSS의 사용을 권장한다.[1]
개발자 | W3C와 WHATWG |
---|---|
발표일 | 1993년 |
최근 버전 | Living Standard |
최근 버전 출시일 | 2022년 |
웹사이트 | http://www.w3.org/ |
주요 구현체 | |
TEXT/HTML | |
영향을 받은 언어 | |
SGML | |
영향을 준 언어 | |
XHTML |
1980년, 유럽 입자 물리 연구소(CERN)의 계약자였었던 물리학자 팀 버너스리가 HTML의 원형인 인콰이어를 제안하였다. 인콰이어는 CERN의 연구원들이 문서를 이용하고 공유하기 위한 체계였다. 1989년에 팀 버너스리는 인터넷 기반 하이퍼텍스트 체계를 제안하는 메모를 작성했다.[2] 버너스 리는 1990년 말에 HTML을 명시하고, 브라우저와 서버 소프트웨어를 작성했다. 그 해에 버너스리와 CERN 데이터 시스템 엔지니어 로버트 카일리아우와 함께 CERN측에 자금 지원을 요청하였지만, 이 프로젝트는 CERN으로부터 정식으로 채택 받지 못했다. 버너스리의 개인적인 기록[3]에 1990년부터 "하이퍼텍스트가 사용되는 여러 분야의 일부"를 열거했고 백과사전을 그 목록의 첫 번째로 두었다.
HTML 최초의 일반 공개 설명은 1991년 말에 버너스리가 처음으로 인터넷에서 문서를 "HTML 태그"(HTML tag)로 부르면서 시작되었다.[4][5]
그것은 머릿글자로 이루어진 20개의 요소를 기술하였고, 상대적으로 HTML의 단순한 디자인이었다. 하이퍼링크를 제외한 HTML 태그들은 CERN 자체의 SGML 기반 문서화 포맷인 SGML GUID에 강하게 영향을 받았다. 이 요소 중 13개는 HTML 4 버전에서도 여전히 존재한다.[6]
HTML은 동적인 웹 페이지의 웹 브라우저를 통한 문자와 이미지 양식이다. 문자 요소의 대부분은 1988년 ISO 기술 보고서 9537 SGML을 이용한 기법에서 찾을 수 있다. 하지만 SGML 개념의 일반적인 마크업은 단지 개별 효과 보다는 요소 기반이고 또한 구조와 처리의 분리(?)(HTML은 CSS와 함께 이 방향으로 점진적으로 이동해 왔다.)
버너스리는 SGML 응용 프로그램이 되는 HTML을 고안해야 했고 그것은 공식적으로 IETF(국제 인터넷 표준화 기구)에 의하여 1993년 중반, HTML 규격에 대한 최초의 제안을 간행물로 정의했다. (버너스리와 덴 콘놀리에 의한 문법을 규정하는 SGML 문서 형식 정의(SGML DTD)가 포함된 "하이퍼텍스트 마크업 언어(HTML)" 인터넷 초안[7]) 이 초안은 6개월 후 만료된다. 하지만 NCSA 모자이크 브라우저의 인라인 이미지를 내장하는 사용자 정의 태그의 사례는 주목할 만 했고, 성공적인 프로토타입에 대한 표준을 기반한 IETF의 철학을. [8] 마찬가지로 데이브 라그렛의 경쟁 인터넷 초안인 "HTML+ (하이퍼텍스트 마크업 포맷)"은 1993년 말에 테이블과 기입양식 같은 요소들을 이미 구현하여 표준화 제안을 했다.[9]
이후 1994년 초 HTML과 HTML+ 초안은 만료되었고, IETF는 HTML 작업 그룹을 설립해 1995년에 HTML 2.0을 완성한다. 최초의 HTML의 규격은 미래에 수행될 HTML 표준을 기반으로 간주되는 경향이 있었다.[8]RFC 1996년에 HTML 2.0은 HTML과 HTML+ 초안의 아이디어가 포함됐다고 발표했다.[10] HTML 2.0 지정은 이전의 초안들로부터 새로운 버전을 구별하기 위해서였다.[11]
게다가 IETF의 후원하에 개발은 상충하는 이해 관계 때문에 지연되었다. 1996년부터 HTML 규격은 상용 소프트웨어 제작사의 투입으로 월드 와이드 웹 컨소시엄(W3C)에서 유지해 왔다.[12] 하지만 2000년부터 HTML 또한 국제 표준(ISO/IEC 15445:2000)이 되었다. 현재 W3C에 의해 발표된 최신 규격은 1999년 말에 발표된 HTML 4.01 권고안이며 2001년에 문제와 오류들이 수정되어 발표된 안이 최종 승인되었다.
이 W3C 권고안으로 출시되었다. HTML 4.0은 세 가지 문서 형태를 제공한다:
이 버전이 증가되지 않고 조금 수정되어 재발표되었다.
이 W3C 권고안으로 출시되었다. HTML 4.0과 마찬가지로 세 가지 문서 형태를 제공한다. 그리고 2001년 5월 12일에 그것에 대한 최종 오류 수정 사항 이 발표되었다.
[21] ("ISO HTML", HTML 4.01 Strict 기반)이 ISO/IEC 국제 표준과 함께 출시되었다. ISO에서 이 표준안은 ISO/IEC JTC1/SC34 (ISO/IEC 공동 기술 위원회 1, 소위원회 34 - 문서 표현과 처리 언어)의 범위에서 떨어져 나왔다.[20]
XHTML은 XML 1.0을 이용하여 HTML 4.01을 새로 만든 독립된 언어다.
HTML 마크업은 HTML 요소(엘리먼트, Elements)와 그들의 속성(Attributes)과 문자 기반 데이터 형태와 문자 참조와 엔티티 참조를 포함하는 몇 가지 핵심 구성 요소로 이루어져 있다. 또 다른 중요한 구성 요소로는 문서 형식 정의(DTD, Document Type Definition)를 명시하는 문서 형식 선언(document type declaration)이다. 차기 HTML 5에서는 DTD를 지정하지 않아도 되고 오직 레이아웃 모드로 지정된다 .
Hello world 프로그램은 프로그래밍 언어와 스크립트 언어 그리고 마크업 언어를 비교하기 위해 사용되는 일반적인 컴퓨터 프로그램이다. 그리고 HTML에서의 Hello world 프로그램은 단 9줄에 불과하다:
<!doctype html>
<html>
<head>
<title>Hello HTML</title>
</head>
<body>
<p>Hello World!</p>
</body>
</html>
(<html>과 </html>사이의 문자는 웹 페이지를 표현한다. <body>와 </body>사이의 문자는 표시되는 페이지의 내용이며, <head>와 </head>사이의 문자는 눈에는 보이지 않지만 웹 페이지를 표현하기 위해 필요한 해더 정보를 담고 있다.<title>과 </title>사이의 문자는 웹 브라우저의 페이지 제목을 정의하는데 사용된다.)
Hello world 프로그램을 최대로 짧게 만들고 싶다면:
Hello world
이라고 해도 되지만, 웹 표준에 위배된다.이 문서 형식 정의는 HTML 5이다. 만약 <!doctype html>
로 선언하지 않은 경우 대다수의 브라우저는 "쿽스 모드"로 렌더링한다.[32]
HTML 문서는 완전한 HTML 요소로 구성되어 있고, HTML 요소의 가장 보편적인 형태는 세 가지 구성 요소를 가진다: "시작 태그"(Start Tag)와 "종료 태그"(End Tag) 와 같은 태그 한 쌍; 몇 가지 요소 속성은 그 태그들 내에서 특성을 부여한다. 마지막으로 문자와 그래픽 정보 콘텐츠를 화면에 표현한다.
HTML 요소는 태그의 사이와 포함되는 모든 것이다. 태그는 꺾쇠괄호(<>)로 둘러싸인 키워드이다.
<tag>보이는 내용</tag>
HTML 요소의 이름은 태그의 이름이다. 그리고 종료 태그의 이름은 슬래시 문자 ("/")로 시작된다.
<tag attribute1="value1" attribute2="value2">보이는 내용</tag>
속성이 주어지지 않는다면 시작 태그의 기본값을 사용하게 된다.
HTML의 머리부분 (<head>...</head>), 보통 제목은 <head>의 안에 포함된다. 예제:
<head>
<title>제목</title>
</head>
<p>단락 1</p> <p>단락 2</p>
새 줄(<br>), <br> 와 <p> 간의 차이점은 'br'은 페이지의 의미론적 구조를 변경하지 않는 줄바꿈(breaks a line)인 반면 'p'는 단락으로 페이지를 구분한다.
<code><p>이것은 <br /> 줄바꿈을 <br /> 포함하는 <br /> 단락이다. </p></code>
<!--..설명!..-->
주석은 코딩을 이해하는데 도움을 줄 수 있지만 웹 페이지에는 표시되지 않는다.
<h2>골프</h2>
는 "골프"를 두 번째 수준의 제목으로 규정한다. 그리고 그것은 브라우저에서 이 장의 처음에 나오는 HTML 마크업 제목과 유사한 방식으로 해석될 것이다. 구조적 마크업은 어떤 특정한 렌더링을 표시하지 않지만, 대부분의 웹 브라우저는 요소 포맷팅에 대한 기본적인 스타일을 표준화했다. 텍스트는 캐스캐이딩 스타일시트(CSS)로 더 꾸밀 수 있다.<b>굵은 글씨</b>
는 시각적 결과 장치가 굵은 글씨 속에 있는 "boldface"를 해석해야 한다는 것을 지시하지만, 이것을 할 수 있는 장치가 무엇을 해야 할 지(예를 들어 텍스트를 크게 읽어주는 장치와 같은 )에 대한 어떠한 지시도 하지 않는다. <b>굵게</b>
와 <i>이탤릭</i>
과 같은 경우에는 보통 시각적 해석에 필적하는 여러 가지 요소가 있지만, 본래가 더 의미론적이다. 즉, 각각 <strong>strong emphasis</strong>
와 <em>emphasis</em>
같이 할 수 있다. 음성 사용자 에이전트가 어떻게 후자의 두 요소를 해석하는 지 지켜보는 것은 쉽다. 그러나 그것은 그들의 표현 상대와 맞먹지는 않는다. 예를 들자면 책의 이름을 강조하는 것이 스크린을 읽는 유저에게는 바람직하지 않지만, 화면에서 그러한 이름이 이탤릭체로 될 것이다. 대부분의 표현 마크업 요소는 스타일 디자인에 근거한 CSS에 호응해서 HTML 4.0 스펙에서는 받아들여지지 않을 것이다.<a>위키백과</a>
)의 사용을 필요로 한다. 덧붙여, href
속성은 반드시 정확한 URL을 설정해야만 한다. 예를 들어, HTML 마크업인 <a href="https://ko.wikipedia.org/">한국어 위키백과</a>
는 하이퍼링크로써 "한국어 위키백과"처럼 보일 것이다.
<a href="http://example.org"><img src="image.gif" alt="alternative text" width="50" height="50"></a>
<br>
<p>
<hr>
<center>...</center>
<font>...</font>
<ul><li>...<li>...</ul>
<ol><li>...<li>...</ol>
<table></table>
<tr></tr>
<td></td>
<td colspan=숫자></td>
<td rowspan=숫자></td>
대부분의 요소 속성들은 이름-값 형태이고, "="로 구분하고, 요소의 시작 태그 안에서 요소의 이름 다음에 쓰인다. 값은 외따옴표 또는 쌍따옴표로 둘러쌀 수 있다. 비록 어떤 문자로 구성된 값들이 HTML에서 인용부호 없이 사용될 수도 있지만(XHTML에서는 허용되지 않음), 그 값은 따옴표나 쌍따옴표 또는 쌍 인용부호로 둘러쌀 수 있다.[33][34] 인용부호를 사용하지 않고, 속성값을 사용하는 것은 안전하지 않다.[35] 이름값 쌍 속성과 대조하여, 요소 태그의 시작에 단순히 그 존재만으로도 영향을 끼칠 수 있는 태그가 있다.[4][37]
대부분의 요소는 몇 가지 일반적인 속성을 가질 수 있다.
id
속성은 요소에 대한 문서 전체의 고유 식별자를 제공한다. 이것은 스타일시트에 의해 외관적인 특성을 제공하고, 브라우저에 의해 특정 요소를 처리하거나 스크립트에 의해 요소의 내용이나 외관을 바꿀 수 있다. 페이지의 URL에 달려 있는 것처럼, 보통 페이지 다음에 오는 요소에 대한 세계에서 유일한 식별자를 부여한다. 예를 들어, https://en.wikipedia.org/wiki/HTML#Attributes
에 있는 ID 속성과 같다.class
속성은 유사한 요소를 분류하는 방법을 제공한다. 이것은 어휘적 또는 표현적 목적으로 사용될 수 있다. 예를 들어, 어휘적으로 분류는 미세 포맷에 사용된다. 표현적 목적으로 HTML 문서는 class="notation"
과 같은 지정자에서, 이 class 값을 갖는 모든 요소는 문서의 주 텍스트에 종속된다는 것을 지시한다. 이러한 요소는 HTML 소스에서 나타났던 장소에 나타나는 대신에 함께 모여서 페이지에서 각주와 같이 표현된다.style
비 속성 코드를 사용할 것이다. 단순하고, 특정한 또는 특수한 스타일 속성을 가진 애플리케이션에서는 너무 성가시긴 하지만, 스타일시트로 속성을 선택할 때는 요소의 id
나 class
속성을 사용하는 것이 더 낫다고 간주된다.title
속성은 요소에서 숨겨진 뜻을 설명하는 글을 첨부하는 곳에 사용된다. 대부분의 브라우저의 이 속성은 자주 툴팁과 같이 참조하는 것처럼 보인다.단축 요소(abbr
)는 아래와 같이 다양한 속성을 설명하는데 쓰일 수 있다:
<abbr id="anId" class="aClass" style="color:blue;" title="하이퍼텍스트 마크업 언어">HTML</abbr>
이 예제는 대부분의 브라우저에서 HTML처럼 보인다. 이 단축에 커서를 가리키면 그 제목인 "하이퍼텍스트 마크업 언어"가 보일 것이다.
대부분의 요소 또한 언어와 관련된 속성인 lang
과 dir
을 취한다.
HTML은 스크립트 데이터와 스타일시트 데이터, 그리고 ID, 이름, URI, 숫자 길이의 단위, 언어, 미디어 기술자, 색상, 문자 인코딩, 날짜와 시간 등을 포함하는 속성 값의 종류를 위한 몇 가지 데이터 형태를 정의 내린다. 이러한 모든 데이터 형식은 문자 데이터를 최적화하기 위하여 분리되었다.
HTML 문서는 문서 형식 선언 (비공식적으로, "doctype")으로 시작해야 한다. 브라우저에서 doctype의 기능은 렌더링 모드를 지시하는 것이며, 부분적으로는 쿼크 모드를 피하기 위한 목적도 있다.
doctype의 원래의 목적은 문서 형식 정의 (DTD)에 기반한 SGML 도구를 통하여 HTML 문서의 파싱과 유효 여부 확인을 가능하게 하려는 것이었다. DOCTYPE에 대한 DTD는 DTD에 순응하는 문서를 가진 허용 또는 금지된 내용을 지정하고 기계가 읽을 수 있는 문법을 포함하도록 지시한다. 반면 브라우저는 HTML을 SGML의 애플리케이션으로 수행하지 않으며, 결과적으로 DTD를 읽지 않는다. HTML 5는 기술적인 제한으로 인해 DTD를 정의하지 않는다. 그래서 HTML5에서 doctype 선언 <!doctype html>
는 DTD를 참조하지 않는다.
HTML 4 doctype의 예제는 다음과 같다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
이런 선언은 엄격한 HTML 4.01을 만들기 위해 DTD를 참조한다. 이것은 선언적인 요소인 font
같은 요소는 포함하지 않으며, CSS나 span
, div
요소는 유지한다. SGML 기반의 유효 확인자(validator)들은 문서를 적절히 해석하거나, 유효 여부 확인을 실행하기 위해 DTD를 읽는다.
최근의 브라우저에서 이 doctype은 쿼크 모드에 반대되는 표준 모드를 활성화한다.
게다가 HTML 4.01은 임시적이고 프레임 단위의 DTD를 제공한다.
HTML 문서를 다른 컴퓨터 파일과 같은 방법으로 전송할 수 있다. 하지만 HTML 문서들은 대부분 웹 서버에 의한 HTTP나 또는 이메일을 통하여 전송된다.
월드 와이드 웹은 주로 웹 서버에서 하이퍼텍스트 전송 프로토콜 (HTTP)을 이용하는 웹 브라우저로 전송되는 HTML 문서를 위해 고안되었다. 그러나 HTTP는 HTML 이외에도 이미지나 소리, 그리고 기타 내용물을 서비스하는 데 사용된다. 브라우저가 받는 각 문서를 어떻게 다른지 알려주게 하기 위해, 다른 정보가 문서와 함께 전송된다.
이 메타데이터는 보통 MIME 타입 (예, text/html
or application/xhtml+xml
)과 문자 인코딩을 포함한다. (HTML에서 문자 인코팅 참조)
최근의 브라우저에서 HTML 문서와 함께 전송되는 MIN 타입은 문서가 초기에 어떻게 해석해야 하는 지에 대한 영향을 끼칠 것이다. XHTML MIME 타입과 함께 전송된 문서는 잘 구성된 XML로 기대되며, 문법 오류는 브라우저가 그것을 해석하지 못하게 할 것이다. HTML MIME 타입과 함께 전송된 동일 문서가 HTML에 관대한 브라우저에서는 성공적으로 출력될 것이다.
W3C 권고안에서는 권고안 부록 C에 나오는 가이드라인을 따르는 XHTML 1.0 문서는 MIME 타입으로 표시될 것이다.[38] 현재의 XHTML 1.1 작업 초안은 또한 XHTML 1.1 문서는 MIME 타입으로 표시될 것이라고 언급하고 있다.[39][40]
대부분의 그래픽 이메일 클라이언트는 단순 텍스트로는 불가능한 어휘적 마크업과 형식을 제공하기 위해 종종 정의되지 않는 HTML 부분집합 사용을 허용한다. 이것은 색상 제목, 강조, 인용문, 인라인 이미지와 도표와 같은 인쇄정보를 포함한다. 그러한 많은 클라이언트들은 HTML 이메일 메시지를 작성하는 GUI 편집기와 그것을 해석하여 보여주기 위한 렌더링 엔진을 포함한다. 그러나 전자 메일에서 HTML를 포함시키는 것은 호환성 문제와 관련되어 있기 때문에 논쟁의 대상이 된다. 그 이유는 피싱 공격의 은닉을 도와줄 수 있고, 스팸 필터를 혼동시킬 수 있으며, 또한 단순 텍스트보다 크기가 더 커지기 때문이다.
웹 문서의 가장 일반적인 파일 확장자는 .html
이다. 일반적으로 줄여서 .htm
라고도 하며, DOS나 FAT와 같은 초기 운영 체제와 파일 시스템이 파일 확장자를 3자로 제한했기 때문이다.
HTML 애플리케이션 (HTA; 파일 확장자 ".hta")는 애플리케이션의 그래픽 인터페이스를 제공하기 위해 브라우저에서 HTML과 DHTML을 사용하는 윈도우용 애플리케이션이다.
정상적인 HTML 파일은 웹 서버와 통신하면서, 웹페이지 객체와 HTTP 쿠키만 다루는 웹 브라우저의 보안 모델에 제한된다. HTA는 완벽히 신뢰된 애플리케이션으로 동작하기 때문에 파일의 생성/편집/제거와 윈도우 레지스트리 엔트리에 보다 더 많은 특권을 가진다. 그 까닭은 그것은 브라우저의 보안 모델 외부에서 작동하기 때문이다. HTA는 HTTP를 경유하여 실행되지 않지만, 실행 파일과 같이 다운로드가 될 수 있으며, 로컬 파일 시스템에서 실행된다.
몇 가지 위지위그(What You See Is What You Get, WYSIWYG) 편집기는 HTML 문서를 그래픽 사용자 인터페이스를 이용하여 직관적으로 나타내고 편집기가 HTML 문서로 생성하여 더 이상 사용자가 HTML에 대한 광대한 지식을 가질 필요가 없게 되었다.
웹 페이지 편집은 위지위그 편집 방식이 압도적으로 우위에 있었다. 하지만 이 방식은 생성된 코드의 질이 낮았고 위지윔(What Your See IS What You Mean, WYSIWIM)방식으로의 변화를 옹호하는 목소리 늘어났기 때문에 비난을 받았었다.[41][42]
위지위그 편집기는 다음과 같은 결함 때문에 논쟁의 여지가 있는 논제이다.
그럼에도 불구하고 위지위그 편집기가 페이지를 작성하는데 편리함을 제공할 뿐만 아니라 저자들의 HTML에 대한 상세한 전문적 지식을 요구하지 않기 때문에 여전히 위지위그 방식이 웹 저작을 지배하고 있다.
<!DOCTYPE html>
<html>
<head>
<title> Hello World</title>
</head>
<body>
<p> Hello World </p>
</body>
</html>
Hello World를 타이틀, 메인페이지에 출력하기.
Seamless Wikipedia browsing. On steroids.
Every time you click a link to Wikipedia, Wiktionary or Wikiquote in your browser's search results, it will show the modern Wikiwand interface.
Wikiwand extension is a five stars, simple, with minimum permission required to keep your browsing private, safe and transparent.