최근 수정 시각 : 2024-11-25 23:55:05

HTML/태그


파일:상위 문서 아이콘.svg   상위 문서: HTML
프로그래밍 언어 문법
{{{#!wiki style="margin: -16px -11px; word-break: keep-all" <colbgcolor=#0095c7><colcolor=#fff,#000> 언어 문법 C( 포인터 · 구조체 · size_t) · C++( 자료형 · 클래스 · 이름공간 · 상수 표현식 · 특성) · C# · Java · Python( 함수 · 모듈) · Kotlin · MATLAB · SQL · PHP · JavaScript · Haskell( 모나드)
마크업 문법 HTML · CSS
개념과 용어 함수( 인라인 함수 · 고차 함수 · 람다식) · 리터럴 · 상속 · 예외 · 조건문 · 반복문 · 참조에 의한 호출 · eval · 네임스페이스
기타 #! · == · === · deprecated · NaN · null · undefined · 배커스-나우르 표기법
프로그래밍 언어 예제 · 목록 · 분류 }}}

1. 개요2. 기본 구조3. 텍스트 관련4. 목록 관련5. 링크, 이미지 관련6. 테이블 관련7. 폼8. 멀티미디어9. 외부 페이지 삽입10. 프레임11. 기타12. 시맨틱 태그
12.1. 레이아웃 태그
12.1.1. 예시
12.2. 멀티미디어 태그12.3. 폼 관련12.4. 기타 태그12.5. 용도가 바뀐 태그12.6. 사용 불가 태그
13. 지원이 부실한 태그14. 비권장 태그
14.1. 표준에서 제외된 태그14.2. 그 외 채택이 거부된 태그

1. 개요

  • HTML은 웹 브라우저마다 지원하는 태그가 조금씩 다르며, 같은 태그라도 작동하는 방법이 다르지만 대체로 비슷한 태그를 지원한다.[1]
  • WHATWG HTML Living Standard의 최신 버전을 기준으로 한다.
  • 태그 목록 #

2. 기본 구조

  • <!DOCTYPE>: 마크업 언어용 DTD 태그이다. HTML5의 경우 맨 위에 다음과 같이 써 주면 된다.
    {{{#!syntax xml
<!DOCTYPE html>}}}
  • <html>: HTML이 작용하는 범위를 지정하는 태그로 위의 DTD를 제외한 전체를 이 태그로 둘러싼다.
  • <head>: HTML 문서의 속성 범위를 지정하기 위한 태그이다. 이 태그 안에 타이틀이나 메타 태그 등을 넣는다.
  • <body>: HTML 문서의 본문 범위를 지정하기 위한 태그이다. 표시될 문서의 레이아웃을 이 태그 안에 넣으면 된다. 속성으로 background=배경그림, bgcolor=배경색, text=글자색, link=링크색, vlink=방문링크색, alink=활성링크색 이렇게 6가지가 있었으나 CSS가 도입되면서부터 굳이 body 태그에 직접 속성을 지정해야 할 이유가 사라졌고 HTML5에서부터 지원하지 않게 되었다. 예를 들어, HTML 4.01 시절엔 body 태그를 다음과 같은 형식으로 쓸 수 있었다.
    {{{#!syntax xml
<body bgcolor="pink" text="navy" link="#ff0055" vlink="#5500ff" alink="#ff00ff">}}}
이렇게 쓰면 배경색은 핑크, 글자색은 파랑, 링크색은 진분홍, 방문링크색은 보라, 활성링크색은 자주색으로 표시된다. 하지만 HTML5에서는 이렇게 지정하는 것을 지원하지 않기 때문에 다음과 같이 CSS로 대체해야 한다. 또한, 기존의 <body> 태그의 자체 속성으로는 링크에 마우스 커서를 댔을 때의 색상이나 링크의 밑줄 유무 등의 지정이 불가능하다. 하지만 이것도 CSS의 힘을 빌리면 얼마든지 가능하다.
{{{#!syntax css
body {
background-color: pink;
color: navy;
}
a:link {
color: #ff0055;
text-decoration: none; /* 링크의 밑줄을 없앤다. 이는 body 태그의 자체 속성으로는 불가능하다. */
}
a:visited {
color: #5500ff;
text-decoration: none;
}
a:active {
color: #ff00ff;
text-decoration: none;
}
a:hover {
/* 마우스 커서를 가져다 대면 링크가 짙은 하늘색으로 변하면서 사라졌던 밑줄이 다시 생긴다.
이는 body 태그의 자체 속성으로는 불가능하다. */
color: #0055ff;
text-decoration: underline;
}
}}}
물론 이렇게 하면 body 영역 외에 있는 a태그에도 속성이 적용되지만 눈에 보이는 HTML의 모든 요소는 body 안에 있기 때문에 상관없다.
  • <title>: HTML의 제목을 선언하는 태그.
  • <meta>: HTML의 부가 정보를 선언하는 태그. 예를 들어 charset 속성을 쓰면 인코딩을 선언할 수 있다.
  • <link>: 외부 CSS 파일, 파비콘[2] 등을 연결하는 태그.

3. 텍스트 관련

  • <hgroup>: 제목 태그(<h1>~<h6>)와 <p>를 그룹으로 묶기 위한 태그이다. 대체로 제목과 소제목을 묶는다.
  • <h[1-6]>: 제목(heading)을 표시할 때 사용된다. <h1>이 가장 크고 <h6>이 가장 작다. 크기는 브라우저마다 표시하는 방법이 달라 다르게 나타날 수 있다. CSS를 쓰면 크기, 색상, 폰트 등을 변경할 수 있다. <h1>은 한 문서 안에 하나만 사용하는 것을 권장한다.
    {{{#!syntax xml
<h1>1단계</h1>
<h2>2단계</h2>
<h3>3단계</h3>
<h4>4단계</h4>
<h5>5단계</h5>
<h6>6단계</h6>}}}
1단계
2단계
3단계
4단계
5단계
6단계
  • <p>: 새 문단(paragraph)을 연다. </p>로 닫는다. 극초창기에는 후술할 <br> 태그처럼 닫는 태그가 없고 단순히 문단을 구분하는 역할만 했는데 HTML 2.0에서 닫는 태그가 추가되어 문단을 묶어주는 역할을 하게 되었다. 이 태그를 쓸 경우 기본적으로 문단 하단에 약 1줄 가량의 빈 공간이 생기기 때문에 <br>을 선호하는 경우가 많은데, 문단이라면 <p> 태그로 묶어주는 것이 올바른 사용법이다. 빈 공간은 CSS를 지정해서 없앨 수 있다.
    {{{#!syntax xml
<p>이 밑에 빈 공간이 있습니다.</p>
<p>이 위에 빈 공간이 있습니다.</p>
}}}
이 밑에 빈 공간이 있습니다.
(빈 공간)
이 위에 빈 공간이 있습니다.
  • <b>: 두껍게(bold) 효과를 준다. 그러나 HTML 4.01부터 비권장 태그로 들어갔는데, 이 이유는 이 태그가 비주얼적인 효과를 주기 위한 태그라 비권장으로 지정된 것. 강조의 의미를 줄 때는 <strong> 태그로 대체하고 그 이외에는 CSS의 font-weight: bold; 속성으로 쓸 것을 권장하고 있다.[3] 하지만 HTML5에서 <strong>보다 약한 의미의 강조로 다시 복귀했다.
  • <i>: 텍스트를 기울임꼴(italic)로 표시한다. 기술 용어, 외국어, 일반적으로 기울임꼴로 사용되는 용어 등을 강조한다.
  • <strong>: 포함된 텍스트를 강하게 강조할 때 사용한다.
  • <em>: <strong>보다 약한 강조를 나타낼 때 사용한다.
    {{{#!syntax xml
<b>굵게 표시됩니다.</b>
<i>기울임꼴로 표시됩니다.</i>
<strong>강하게 강조합니다.</strong>
<em>약하게 강조합니다.</em>}}}
굵게 표시됩니다.
기울임꼴로 표시됩니다.
강하게 강조합니다.
약하게 강조합니다.
  • <ins>: 문서에 삽입(insert)된 텍스트, 즉 밑줄을 표시한다.
  • <del>: 문서에서 삭제(delete)된 텍스트, 즉 취소선을 표시한다.
  • <s>: 취소선(strikethough)을 표시한다. HTML 4.01에서 비권장 태그로 되었다가 HTML5에서 <del>보다는 약한 삭제의 의미로 변경되면서 존치되었다.
  • <u>: 밑줄(underline)을 표시한다. HTML 4.01에서 비권장 태그로 되었다가 HTML5에서 <ins>와는 구별되는 의미로 변경되면서 존치되었다. 주로 철자 오류를 지적하는 데 쓴다.
    {{{#!syntax xml
<ins>밑줄이 표시됩니다.</ins>
<del>취소선이 표시됩니다.</del>
<s>나도 취소선</s>
밑줄이 표시<u>됐</u>습니다.}}}
밑줄이 표시됩니다.
취소선이 표시됩니다.
나도 취소선
밑줄이 표시됐습니다.
  • <sup>: 텍스트를 위첨자(superscript)로 표시한다.
  • <sub>: 텍스트를 아래첨자(subscript)로 표시한다.
    {{{#!syntax xml
E=MC<sup>2</sup>
H<sub>2</sub>O는 산소가 아닌 물입니다.
YP<sub>B</sub>P<sub>R</sub>}}}
E=MC2
H2O는 산소가 아닌 물입니다.
YPBPR
  • <small>: 텍스트를 조금 더 작게 표시한다. <big> 태그가 HTML5 규격에서 제외된 것과는 달리 <small> 태그는 존치되어 있다. 주로 저작권 정보나 주석을 조그맣게 다는 데 쓴다.
    {{{#!syntax xml
나무위키는 위키위키입니다.
<small>그렇군요.</small>}}}
나무위키는 위키위키입니다.
그렇군요.
이 밑에 가로줄이 있습니다.
<hr>
이 위에 가로줄이 있습니다.}}}
이 밑에 가로줄이 있습니다.
이 위에 가로줄이 있습니다.
  • <abbr>: 약어를 이 태그로 묶어서 무엇의 약어인지 설명하기 위한 태그이다. <abbr title="약어에 대한 설명">약어</abbr> 식으로 써서 마우스 커서를 대면 설명이 떠서 읽을 수 있게 한다. 사용법은 이 곳을 참고. 원래는 특별한 시각적 효과를 부여하려면 CSS를 사용해야 했지만 구글 크롬과 파이어폭스에서는 언제부터인가 CSS를 지정하지 않더라도 자동으로 점선 밑줄이 생기게 되었다.[5]
  • <wbr>: 글이 길어질 때 띄어쓰기가 없더라도 이 태그가 쓰인 부분에서 자동개행이 이루어진다. 예를 들어, Java<wbr>Programming이라고 쓰면 개행되지 않을 때는 'JavaProgramming'으로 붙어서 나오지만 자동개행시 <wbr> 태그 앞뒤로 위치한 'Java'와 'Programming'이 서로 분리될 수 있다. 원래는 개행을 방지하는 비표준 태그 <nobr> 안애서 <br> 태그와 같은 기능을 하는 태그였으나 HTML5에서 표준으로 채택되면서 기능이 변경된 것. 코더들 사이에서 이 태그와 SHY 중 무엇을 써야 할 지 의견이 분분하다.
    다만 한글은 글자 단위로 개행이 되기 때문에 한글에다가 이 태그를 쓸 필요성은 거의 없다.
  • <blockquote>: 인용구를 기술하는 태그이다. 기본적으로 들여쓰기가 되어 있는데 CSS로 없앨 수 있다.
  • <q>: <blockquote>의 인라인 버전.
  • <dfn>: 후술할 <dl>의 인라인 버전.
  • <pre>: 서식 있는(Preformatted) 텍스트를 넣기 위한 태그이다. 이 태그 안에는 <br> 태그 없이 개행하더라도 개행을 인식하고 공백 문자가 두 개 이상 연속으로 있어도 하나로 취급하지 않고 그대로 표시된다. 또한, 일반적으로 이 태그 안에 들어간 텍스트는 고정폭 글꼴로 표시된다. 이 태그 안에 다른 태그를 넣으면 경우에 따라 의도치 않게 표시될 수도 있으므로 가급적이면 다른 태그를 넣지 않는 것이 좋다.
  • <var>, <samp>, <kbd>, <code>: 변수 등 프로그래밍 언어와의 연계를 위한 태그.
  • <ruby>: 후리가나[6] 표기에 쓰이는 기본 태그. 절대 Ruby를 프로그래밍하기 위한 태그가 아니다!
    • <rp>: 후리가나가 지원되지 않는 환경에서 표기할 텍스트를 지정한다.
    • <rt>: 후리가나를 쓴다.

    {{{#!syntax xml
<ruby>漢字<rp>(</rp><rt>かんじ</rt><rp>)</rp></ruby>
}}}
[ruby(漢字, ruby=かんじ)]

4. 목록 관련

  • <ul>: 순서 없는 목록(unordered list)을 표시한다.
  • <li>: 목록에서 각 항목(list item)은 <li>와 </li>사이에 넣는다.
    {{{#!syntax xml
<ul>
　　<li>순서가 없는 첫번째 항목입니다.</li>
　　<li>순서가 없는 두번째 항목입니다.</li>
</ul>}}}
* 순서가 없는 첫번째 항목입니다.
* 순서가 없는 두번째 항목입니다.
  • <ol>: 순서 있는 목록(ordered list)을 표시한다. 참고로 이 태그는 단지 비주얼적인 태그라는 이유로 HTML4에서 비권장 태그로 들어갔다가 HTML5에서 <ul> 태그와 구별해서 사용할 필요성이 제기되면서 표준 태그로 재지정되었다.
    {{{#!syntax xml
<ol>
　　<li>순서가 있는 첫번째 항목입니다.</li>
　　<li>순서가 있는 두번째 항목입니다.</li>
</ol>}}}
1. 순서가 있는 첫번째 항목입니다.
1. 순서가 있는 두번째 항목입니다.
  • 참고1: <li>와 </li>사이에 또 목록을 넣으면 하위 목록도 가능하다.
    {{{#!syntax xml
<ul>
　　<li>첫 번째</li>
　　<li>두 번째
　　　　<ul>
　　　　　　<li>두 번째 속 첫 번째</li>
　　　　　　<li>두 번째 속 두 번째</li>
　　　　</ul>
　　</li>
</ul>}}}
* 첫 번째
* 두 번째
* 두 번째 속 첫 번째
* 두 번째 속 두 번째
  • 참고2: <ul> 안에 하위 목록으로 <ol>을 넣을 수도 있다. 물론 반대로 <ol> 안에 하위 목록으로 <ul>을 넣는 것도 가능하다.
    {{{#!syntax xml
<ul>
　　<li>가나다</li>
　　<li>라마바
　　　　<ol>
　　　　　　<li>사아자</li>
　　　　　　<li>차카타</li>
　　　　</ol>
　　</li>
　　<li>파하</li>
</ul>}}}
* 가나다
* 라마바
1. 사아자
1. 차카타
* 파하
  • <dl>: 정의 목록(definition list)을 표시한다.
  • <dt>: 정의 목록의 정의(definition term)를 기술한다.
  • <dd>: 정의 목록의 뜻풀이(definition description)를 기술한다. 기본적으로 들여쓰기가 되어 있는데 CSS로 없앨 수 있다.
  • <menu>: 웹사이트 내의 상호작용하는 메뉴 목록을 위한 태그이다. <ul> 태그와 별반 차이가 없다.

5. 링크, 이미지 관련

  • <a>: 하이퍼링크를 생성하는 태그이다. Anchor의 줄임말이다. href 속성을 써서 <a href="링크할 페이지">내용</a>와 같이 작성한다.
    {{{#!syntax xml
<a href="https://namu.wiki">나무위키:대문</a>}}}
나무위키:대문
주의할 점이라면 <a> 안에 또 <a>를 겹쳐서 넣어서는 안 된다는 점이다. 다음은 <a> 태그의 잘못된 사용 예이다.[7]
{{{#!syntax xml
<a href="https://namu.wiki">나무위키:대문 <a href="https://www.google.com/">구글</a></a>}}}
위 태그를 교정하면 다음과 같다.
{{{#!syntax xml
<a href="https://namu.wiki">나무위키:대문</a> <a href="https://www.google.com/">구글</a>}}}
페이지 내의 책갈피를 위한 속성으로 name이 있었으나, id로 대체 가능하여 HTML5에서는 폐기되었다.
  • 보통 a 태그를 사용하면 페이지가 헤더 등을 남기지 않고 싹 새로 로드되는데, React와 같은 프레임워크를 사용하면 필요한 부분만 새로고칠 수 있다.
  • <img>: 페이지에 이미지를 추가하는 태그이다.
    • src: source의 약자로 이미지파일의 경로를 지정하는 태그 속성이다.
      • http:// 또는 https://: 절대경로 URL로 지정한다.
      • path/to/image/file: 상대경로로 지정한다.
      • data:image/jpeg|png|gif;base64, A1bC2dE3fG...: 파일을 base64로 인코딩한 형태로 지정한다. 작은 여러 개의 파일이 있을 경우 권장하며, 큰 파일은 절대 권장하지 않는다.
    • alt: 이미지를 볼 수 없는 경우[8]에 이미지에 대한 설명을 제공한다.[9] 이 속성값이 없어도 이미지파일의 경로가 유효하다면 표시되기는 하지만 웹표준 검사기에서 걸린다.
    • title: 이미지에 대한 추가 정보를 제공한다. 로고 이미지에 마우스를 갖다대면 말풍선으로 뜨는 것을 확인할 수 있다.
    • height, width: 이미지의 세로, 가로폭을 지정한다. HTML 4.01까지는 그냥 숫자만 쓰면 픽셀로, 뒤에 %를 붙이면 백분율로 지정할 수 있었으나, HTML5에서는 픽셀로만 지정할 수 있게 되었으므로 백분율로 지정하려면 CSS를 이용해야 한다.
      구분 HTML 4.01 HTML5

      width="픽셀"
      height="픽셀"       		지원함 지원함

      width="%"
      height="%"       		지원함 지원안함
      (CSS로 대체)

    {{{#!syntax xml
<img src="/w/파일:나무위키:로고1.png"
alt="파일:나무위키:로고1.png" title="파일:나무위키:로고1.png" width="200px">}}}
파일:나무위키:로고1.png
  • <svg>: 페이지에 SVG 형식의 그래픽을 추가하는 태그이다. SVG 파일은 위의 <img> 태그로 넣어도 되지만 SVG 파일이 XML 형식으로 만들어져 있기에 별도의 SVG 파일을 만들지 않고 직접 코딩해서 넣는 것도 가능하다. 이 때 <svg> 태그를 사용한다.
  • <progress>: 페이지에 진행 상황 막대를 추가하는 태그이다. 예를 들어 <progress value="22" max="100"></progress>와 같이 쓸 경우 22% 진행된 막대가 표시된다. 예시
  • <picture>: 최신 HTML Living Standard에 추가된 이미지 태그로 <audio> 태그와 <video> 태그에 대응한다. 다양한 환경에서 서로 다른 이미지를 띄울 수 있게 한다.

6. 테이블 관련

  • <table>: 테이블을 만드는 태그이다.
  • <tr>: 행(table row)을 시작한다.
  • <td>: 표의 내용(table data), 셀을 표현한다.
    {{{#!syntax xml
<table>
　　<tr>
　　　　<td>A1</td>
　　　　<td>B1</td>
　　　　<td>C1</td>
　　</tr>
　　<tr>
　　　　<td>A2</td>
　　　　<td>B2</td>
　　　　<td>C2</td>
　　</tr>
</table>}}}
A1 B1 C1
A2 B2 C2
  • <th>: 테이블의 행, 열의 머리말(table heading)을 나타낸다. 기본적으로 가운데로 정렬되고 굵은 글씨로 표시된다.
    {{{#!syntax xml
<table>
　　<tr>
　　　　<th>A</th>
　　　　<th>B</th>
　　　　<th>C</th>
　　</tr>
　　<tr>
　　　　<td>A1</td>
　　　　<td>B1</td>
　　　　<td>C1</td>
　　</tr>
</table>}}}
A B C
A1 B1 C1
  • colspan, rowspan속성으로 셀을 병합할 수 있다. colspan은 열 병합, rowspan은 행을 병합한다. 둘 다 써서 행과 열을 함께 병합할 수도 있다.
    {{{#!syntax xml
<table>
　　<tr>
　　　　<th> </th>
　　　　<th>월</th>
　　　　<th>수</th>
　　　　<th>금</th>
　　</tr>
　　<tr>
　　　　<th>1교시</th>
　　　　<td rowspan="2">국어</td>
　　　　<td>수학</td>
　　　　<td>영어</td>
　　</tr>
　　<tr>
　　　　<th>2교시</th>
　　　　<! 병합되었으므로 쓰지 않습니다. >
　　　　<td>과학</td>
　　　　<td>사회</td>
　　</tr>
</table>}}}
월 수 금
1교시 국어 수학 영어
2교시 과학 사회
  • <caption>: 테이블의 제목을 기술한다.
  • <colgroup>, <col>: 테이블 상단에 넣어 테이블의 열 정보를 기술한다. 주로 일괄적으로 셀의 너비를 지정할 때 쓰인다.
  • <thead>, <tbody>, <tfoot>: 테이블의 세부 구조를 기술한다. 각각 표의 상단, 본문, 하단 부분에 대응한다.

7. 폼

CGI( PHP, ASP, JSP 등)와 상호작용하기 위해 입력값을 받는 역할을 한다.
  • <form>: 입력값을 받는 영역을 지정한다. 한 페이지에 여러 개가 들어갈 수는 있지만, 영역 안에 영역이 들어가는 것은 불가능하다.[10]
  • <input>: 입력값 요소를 지정한다. type에 따라 다른 입력값을 취한다.( 해당 사이트(영어)에서 아래의 각종 input요소의 서포트 브라우저 및 실행결과를 볼 수있다.)
    • text: 한 줄 짜리 문자열 값. 기본값이다.
    • number: 숫자.
    • url: 도메인 주소.
    • email: 이메일.
    • tel: 전화번호.
    • search: 검색어.
    • range: 지정한 범위의 숫자.
    • color: 색.
    • date: 날짜.
    • time: 시각.
    • datetime-local: 날짜+시각.
    • checkbox: 선택/해제할 수 있는 항목.
    • radio: 선택/해제할 수 있는 항목이나 중복 선택은 불가능하다. 그리고 해당 항목을 선택할 때는 마음대로이나 해제하는 것은 아니다. 이 속성은 하나의 form 태그 영역 내에서 name 속성이 같은 2개 이상의 <input type="radio">가 있을 경우 선택되지 않은 다른 항목을 누르면 이미 선택되어 있는 것이 해제되는 방식으로 동작한다. 따라서 단독으로 써서는 안 되는 속성이다.
    • button: 누를 수 있는 버튼을 생성한다.
    • submit: 누를 경우 입력값을 전송시키는 버튼을 생성한다.
    • image: submit + <img> 태그.
    • reset: 누를 경우 입력값을 초기화시키는 버튼을 생성한다.
    • hidden: 투명라인(...). 입력값을 수정하지 않고 곧바로 보낼 때 쓰인다. 소스를 열어보지 않으면 사용자에게는 보이지 않는다.[11]
    • file: 파일 업로드에 쓰인다.
  • <textarea>: 여러 줄의 문자열 값을 받는다.
  • <button>: <input type="button">와 대동소이하다. 차이점은 태그 내에도 HTML 지정이 가능해서 표현의 폭이 넓다. type="submit"을 쓰면 <input type="submit">과 같은 기능을 한다.
  • <output>: input 태그처럼 입력값이지만 문자열이라서 수정할 수 없다.
  • <datalist>: 검색어에 들어갈 목록을 지정한다.
  • <select>: 선택 목록.
    • <option>: 선택 목록에 들어갈 항목. <input type="radio">와 대동소이하다.
  • <fieldset>: 폼 요소를 그룹으로 묶어준다. 브라우저에는 이 태그 시작부터 끝까지의 모든 요소를 사각형 박스 안에 묶는 방식으로 렌더링된다.
    • <legend>: 나는 전설이다 <fieldset>으로 묶어준 그룹에 제목을 지정해 준다. 브라우저에서는 사각형 박스 왼쪽 상단에 나타난다.
  • <label>: 해당 요소의 이름을 지정한다. 해당 이름을 클릭하면 요소가 자동으로 선택된다.

8. 멀티미디어

  • <video>: 비디오 재생
  • <audio>: 오디오 재생
  • <canvas>: 스크립트를 통해 그래픽을 그리는 데 사용될 수 있다. 예를 들어, 그래프 그리기, 사진 합성, 애니메이션 제작, 실시간 비디오 처리, 렌더링에 쓰일 수 있다. canvas를 이용한 간단한 도형그리기 예제

9. 외부 페이지 삽입

  • <object>, <embed>: 웹 페이지 또는 외부 프로그램을 임베드한다. HTML 4.01에서 <embed>가 삭제되고 <object>로 대체되었으나 <object> 태그의 사용법이 워낙 복잡하다는 문제점이 있어서 HTML 5 규격에서 다시 표준으로 들어갔다. <embed>의 경우 파이어폭스에서 웹 페이지를 첨부할 수 없는 문제가 있었다.

10. 프레임

11. 기타

  • <base>: 상대 링크(relative link) 해석의 기준이 되는 URL을 지정한다. tistory.com에 올라온 HTML 파일에 base href가 "http://cafe.naver.com/cafesupport"로 지정되어 있다면 "joonggonara"라는 링크를 걸었을 때 https://cafe.naver.com/joonggonara로 해석된다.
  • <style>: CSS 사용. 되도록이면 <link> 태그를 쓰기를 권장한다.
  • <script>: 스크립트를 사용한다. <script type="text/javascript"> ... </script> 식으로 스크립트 타입을 지정해서 사용한다. HTML5에서는 type 속성을 생략하면 일반적으로 사용되는 자바스크립트로 인식한다. 인터넷 익스플로러에서는 VB스크립트를 사용할 수도 있었으나 보안 문제로 폐기되었다.
  • <div>: 박스 또는 레이어. 일명 '웹 표준' 개념이 많은 사람들에게 퍼지게 된 이후 테이블 태그 대신 레이아웃을 만드는 데 자주 사용되고 있다. <table> 태그를 디자인에 쓰면 안 되는 이유(영어) 사실 div만 남발하는 것도 올바른 사용법은 아니고, 용도에 따라 여러가지 태그를 적절히 사용하는 것이 중요하다. <div> 이외에도 많은 태그가 <div>와 같은 박스 스타일로 렌더링되기 때문에 CSS만 잘 지정하면 된다.
  • <span>: <div>의 인라인 버전.
  • <figure>, <figcaption>: 그림이 덧붙여지는 내용 작성에 사용한다.

12. 시맨틱 태그

HTML5에서는 시맨틱 웹을 중요시하여 여러가지 태그를 새롭게 만들었다. 이러한 태그들을 시맨틱 태그라고 한다.

사실 기존 HTML 표준에서도 각 태그는 대부분 의미를 가지고 있었다. 그러나 의미를 가진 태그가 부족한 편이었고, 의미가 불명확한 태그나 시대의 흐름에 뒤처진 태그도 있었다. 2000년대 초반까지만 해도 테이블 관련 태그로 웹 페이지를 여러 구획으로 나눠서 레이아웃을 만드는 방식인 테이블 레이아웃(Table Layout)이 일반화되어 있었다.[12] 당시 CSS가 나온지 얼마 되지 않은데다 HTML의 기능이 부족할 때 레이아웃을 짜던 방식이 그대로 이어진 것이 원인이었다. 이에 2000년대 초반부터 시맨틱 웹이 중시되면서 HTML은 문서 구조와 의미, CSS는 디자인으로 확연히 분리되고, 테이블 레이아웃은 박스 모델 레이아웃으로 변화되었다. 그러나 당시 표준이었던 HTML 4.01과 XHTML 1.0으로는 시맨틱 웹을 구현하기가 난점이 있었다. 문서 내에 들어가는 목록이나 강조 등의 미시적인 부분에는 의미가 있었지만, 레이아웃에서 이게 메뉴인지 메인 컨텐츠인지 서브 컨텐츠인지 분류할 수 있는 태그는 없었다. 이 때문에 레이아웃에서 각 영역을 지정하는 태그는 <div>가 대단히 많이 쓰였고, 이 당시 박스 모델을 적용한 HTML 문서는 수십 개로 중첩된 복잡한 <div> 지옥(...)인 경우가 많았다.[13] 이 때문에 HTML5에서 관련 태그를 추가한 것이다.

시맨틱 태그를 사용한 레이아웃은 컴퓨터가 읽어낼 수 있다. 이게 무슨 말이냐면, 검색 사이트에서 어디가 내용인지를 알 수 있어서 검색 노출을 용이하게하고, 궁극적으로 시각장애인에게 사이트의 어디가 본문인지 아닌지 알려줄 수 있다는 장점이 있다.

기존 태그는 일부분을 제외하고는 HTML 4.01에서 사용되던 태그가 거의 그대로 사용된다. 원래 HTML을 표준에 맞게 사용했다면 큰 어려움 없이 HTML5에도 적응할 수 있다.

12.1. 레이아웃 태그

  • <header>
    일반적으로 페이지나 해당 섹션의 가장 윗부분에 위치한다. 페이지 맨 위에 쓸 때는 사이트의 제목이 보통 들어가며, 선택적으로 상단바나 검색창 등이 안에 들어갈 수 있다. <head> 태그랑 헷갈리면 매우 곤란하다. section이나 article, aside 등으로 묶어놓은 섹션 안의 헤더 용도로 사용해도 된다. 이건 아래 footer 태그도 마찬가지다.
  • <nav>
    내비게이션(navigation)의 약자로, 일반적으로 상단바 등 사이트를 안내하는 요소에 사용된다. 보통은 안에 <ul>을 넣어 목록 형태로 사용한다.
  • <main>
    문서의 주된 콘텐츠를 표시한다. 이 태그는 두 개 이상 보여져서는 안 된다. 두 개 이상의 main 요소를 쓸 경우 하나 이외의 전부를 hidden 속성을 써서 가려야 한다. 시맨틱 태그 중에서는 Internet Explorer에서 유일하게 지원되지 않는 태그다.
  • <article>
    웹 페이지의 내용에 사용하는 태그이다. 문서나 페이지, 사이트에서 독립적으로 배포 혹은 재사용(예를 들어 투고 같은)할 수 있는 섹션에 사용한다.
  • <section>
    웹 페이지의 섹션에 사용하는 태그이다. 웹 페이지를 의미적으로 각각의 파트로 구분하기 위해 쓰는 태그이다. 이 태그를 사용하면 검색엔진이 긁어가지 않는다는 이야기가 있는데 루머다. HTML5 표준 문서에 보면 "요소의 내용을 배포(syndicate)해도 이치에 맞다면 section 요소 대신 article 요소를 사용하기를 권합니다."라는 부분이 있는데, 이 부분의 해석이 잘못 퍼진 것으로 추정된다.
  • <aside>
    본문의 주요 부분을 표시하고 남은 부분을 설명하는 태그이다. 특별한 일이 아니면 사이드바나 광고창 등 중요하지 않은 부분에 사용된다.
  • <footer>
    일반적으로 페이지나 해당 파트의 가장 아랫부분에 위치한다. 페이지 맨 아래에 쓸 때는 사이트의 라이선스, 주소, 연락처 등을 넣는다.

12.1.1. 예시

레이아웃 태그를 사용한 HTML5 마크업의 기초 뼈대는 다음과 같다.
파일:html5ex.png 

#!syntax xml
<!DOCTYPE html>
<html lang="ko">
	<head>
		<meta charset="utf-8">
		<title>[페이지 제목]</title>
	</head>
	<body>
		<header>
			<h1>[사이트 제목]</h1>
			<h2>[사이트 부제목]</h2>
			<nav>
				<ul>
					<li>[메뉴1]</li>
					<li>[메뉴2]</li>
					<li>[메뉴3]</li>
				</ul>
			</nav>
		</header>
		<main>
			<article>
				<p>[본문 내용]</p>
			</article>
		</main>
		<aside>
			[사이드바 내용]
		</aside>
		<footer>
			<address>[주소 내용]</address>
		</footer>
	</body>
</html>

12.2. 멀티미디어 태그

  • <audio>
    음성, 음악 파일 등을 재생할 수 있는 태그. 웹 브라우저마다 지원하는 확장자가 달라[14] 멀티브라우저 지원을 위해서는 <source> 태그를 안에 넣어 두가지 이상의 확장자를 가진 음악 파일을 넣어야 한다. 가장 많이 사용하는 조합은 mp3+ ogg.
  • <video>
    영상 파일을 재생할 수 있는 태그. 사실상 HTML5에서 가장 주목받는 태그이다. 별다른 플러그인 없이도 자체 재생이 가능하다는 점이 가장 큰 장점이다. <audio> 태그와 마찬가지로 <source> 태그를 넣어 mp4+ ogv의 조합으로 짜주면 거의 대부분의 브라우저를 지원한다. 뭐 요즘은 어차피 어딜 가든 그냥 유튜브를 걸어버리지만.... 실제로 유튜브에서 소스보기를 해 보면 영상이 나오는 부분에 이 태그를 쓰고 있다.
  • <canvas>
    스크립트를 이용하여 그래픽을 표현하는 태그이다. 일반적으로는 JavaScript를 많이 사용하며, 응용하면 웹에서 게임 앱, 3D 엔진 등을 돌리는 다양한 응용이 가능하다.( 예시)

12.3. 폼 관련

  • <output>
    계산의 결과값을 전송하는 데에 쓰인다.
  • 새로운 <input>의 type 속성 - date, datetime, time, color, range 등
    JavaScript를 통해서만 구현됐던 기능이 내장되었다. 현 시점에서는 크롬이 사실상 전부를 지원한다.
  • <datalist>
    <input>의 type="text"와 같은 속성을 가진 것들에 들어갈 값을 미리 정의하는 태그이다.

12.4. 기타 태그

  • <details>
    보이거나 숨기게 해주는 요약글 형식의 위젯에 사용되는 태그이다. <summary> 태그와 함께 쓰인다.
  • <embed>
    외부 애플리케이션이나 플러그인을 삽입할 때 쓰는 태그이다. 대표적으로 어도비 플래시를 웹페이지에 삽입할 때 이걸 쓴다. 그 외에도 예전에는 IE 전용 태그 중 하나인 <bgsound> 태그를 대체하는 태그로도 쓰인 바 있다. 원래 HTML에 없던 비표준 태그였는데 거의 모든 브라우저가 이 태그를 지원한데다, 기존에 표준으로 존재하던 object 태그보다 사용방법이 간편해서[15] 사실상 표준처럼 쓰이던 태그였고 결국 HTML5 표준에 포함되었다. HTML5 표준에서는 iframe처럼 웹페이지를 표시할 수도 있다.
  • <object>
    외부 문서, 매체, 플러그인 등을 웹페이지에 삽입할 때 쓰는 태그이다.
  • <figure>
    그림, 도표, 다이어그램 등의 글의 이해를 돕기 위한 내용들을 나타내는 태그이다.
  • <figcaption>
    <figure> 태그 안에 사용되는 태그로, <figure> 태그 안에 있는 내용의 설명을 적는 태그이다.
  • <iframe>
    외부 문서를 해당 영역에 삽입하는 태그이다. HTML 5에서 sandbox 속성이 추가되었다.
  • <time>
    기계가 이해하기 쉽게 시간을 표현한다. CSS를 정하지 않았다면 외관상의 변화는 없다.
    <time datetime="2001-05-15 19:00">n시간 전</time> 같이 datetime에 그레고리력 시간을 넣어 태그를 작성해야 기계가 이해하기 쉬워진다.
  • <mark>
    특정한 부분을 형광펜으로 마킹한다.

12.5. 용도가 바뀐 태그

  • <b>
    본래는 굵은 글씨를 표현하는 비주얼적인 요소만 있던 태그였고 HTML 4.01에서 비권장 태그로 들어갔으나, HTML5에서 <strong>보다 약한 강조의 의미를 갖는 태그로 변경되었다. 여전히 별도의 CSS 없이 쓰면 브라우저에서는 굵은 글씨가 나오는 것이 기본값이다.
  • <s>
    더이상 옳지 않은 내용을 나타내는 데에 쓴다. 별도의 CSS 없이 쓰면 브라우저에서는 취소선을 긋는 것이 기본값이다.
  • <u>
    양식상 일반적인 텍스트보다 돋보여야 할때 쓴다. 예를 들어 철자가 틀린 단어나, 중국어로 번역된 고유 명사 등이 있다. 별도의 CSS 없이 쓰면 브라우저에서는 밑줄을 긋는 것이 기본값이다.
  • <i>
    어떠한 이유로 일반적인 텍스트보다 돋보여야 할때 쓴다. 예를 들어 전문 용어, 외국어의 구절 등이 있다. 별도의 CSS 없이 쓰면 브라우저에서는 이탤릭체로 표기하는 것이 기본값이다. font-awesome 같은 글꼴 형태로 된 아이콘이 이 태그를 사용해서 아이콘을 출력한다. 아이콘의 특징이 텍스트보다 돋보여야 하니 사용법이 틀린 것은 아니다.
    더 적절한 시맨틱 태그가 있을 경우 그쪽을 쓴다.
  • <hr>
    원래 단순한 가로줄을 나타내는 태그였으나, 페이지의 주제가 바뀔 때 내용을 분리시키는 의미가 HTML5에서 추가되었다.
  • <wbr>
    원래 <nobr> 태그 안에서 <br> 태그를 대신하여 강제개행 기능을 하는 태그였으나, HTML5 표준으로 편입되면서 띄어쓰기 없이 이 태그를 사용한 부분에서 자동개행을 하는 기능으로 변경되었다.(<nobr> 태그는 CSS로 대체 가능하여 폐기되었다)

12.6. 사용 불가 태그

대개 시맨틱 웹에서 사용을 지양하는 태그라든가, 특정 브라우저에서만 작동하는 태그가 속한다.
  • <font> → CSS가 있기 때문에 폐기되었다. 이미 HTML 4.01에서 비권장으로 분류된 태그였다. CSS의 color, font-family, font-size로 대체된다. 텍스트의 일부분에만 적용하고 싶으면 <span> 태그를 씌우고 위의 CSS를 적용하면 된다.
  • <center> → 가운데 정렬용 태그인데 마찬가지로 CSS로 너무나도 간단하게 대체 가능하기에 폐기되었다. 텍스트 및 인라인 요소 가운데 정렬은 text-align: center;로, 블럭 요소 가운데 정렬은 margin:0 auto;로 대체 가능하다.
  • <basefont> → 말 그대로 기본 폰트를 지정해 주는 태그였다. 하지만 CSS가 있는데 굳이 이걸 쓸 이유가... 결국 IE 9를 끝으로 여러 브라우저에서 더 이상 이 태그를 지원하지 않는 등 존재가 유명무실해진 까닭에 너무나도 당연히 폐기되었다. 모든 태그에 CSS 속성을 적용하는 * 선택자를 이용하여 font-family, font-size로 지정하는 방식으로 대체할 수 있고, 이 태그보다 더욱 다양하게 지정할 수 있다.
  • <applet> → Java Applet을 넣을 때 쓰는 태그였다. <object>, <embed>로 대체한다.
  • <strike> → <del>, <s>로 대체되었다.
  • <frame> → 이것과 함께 쓰이던 <frameset>, <noframes> 태그 역시 함께 사용 불가 태그가 되었다. 또한 이게 없어지면서 frameset 속성의 문서도 없어졌다. HTML5에서 프레임을 가진 문서는 <iframe>이나 <div>를 JavaScript로 업데이트하는 식으로 비슷하게 구현 가능.
  • <acronym> → <abbr>와 의미가 중복되어서 <abbr>로 통합되었다.
  • <dir> → <ul>와 의미가 중복되어서 <ul>로 통합되었다.
  • <nobr> → 이 태그 안에서는 내용이 길어져도 자동개행이 되지 않게 하는 태그였다. CSS에서 white-space: nowrap; 속성을 주는 것으로 이 태그의 기능을 대신할 수 있기에 HTML5 표준으로 채택되지 않았다.
  • <marquee> → 익스플로러에서 전광판처럼 글자가 흐르게 하는 태그였다. JavaScript나 CSS3의 Animation으로 대체할 수 있다.
  • <blink> → 넷스케이프에서 글자를 깜빡이게 하는 태그였다. 이 역시 JavaScript나 CSS3의 Animation으로 대체할 수 있다. 파이어폭스와 오페라에서도 지원하였으나 파이어폭스에서는 22 버전을 끝으로 지원이 중단되고 오페라에서는 12.1 버전을 끝으로 지원이 중단되면서 현재는 <basefont>처럼 모든 브라우저에서 지원이 중단되었다.
  • <bgsound> → 배경음악을 재생시키는 태그인데 익스플로러에서만 돌아가는 비표준 태그이다. 다른 브라우저를 배려하기 위한 차원에서 범용성이 좋은 <embed>로 대체해 가는 추세였으며, HTML5에서 <audio>가 추가되었으므로 더 이상 필요하지 않다.


파일:CC-white.svg 이 문단의 내용 중 전체 또는 일부는 문서의 r256 판에서 가져왔습니다. 이전 역사 보러 가기
파일:CC-white.svg 이 문단의 내용 중 전체 또는 일부는 다른 문서에서 가져왔습니다.
[ 펼치기 · 접기 ]
문서의 r256 판 ( 이전 역사)
문서의 r 판 ( 이전 역사)

13. 지원이 부실한 태그

이 분류에는 지원이 부실한 태그를 넣는다.

14. 비권장 태그

사용하지 않는 것이 권장되는 태그. 이 분류에는 많이 사용하였지만, HTML5에서 제거된 태그 등이 들어간다. 앞으로의 홈페이지 제작에서는 사용하지 않는 것을 추천한다.

14.1. 표준에서 제외된 태그

다음은 다른 태그나 CSS로 대체할 수 있어 폐기되었거나 사용성이나 접근성 등에 문제가 있어 배제된 태그들이다.
  • <acronym>: 두문자어에 대한 설명을 넣기 위한 태그이다. HTML5 규격에서는 <abbr> 태그에 통합되어서 없어졌다.
  • <applet>: Java Applet을 넣기 위한 태그이다. <embed> 또는 <object> 태그로 대체 가능하여 폐기되었다.
  • <basefont>: 페이지의 기본 글꼴을 지정한다. 지정 가능한 범위는 글꼴 색과 모양, 크기였다. 하지만 CSS로 인해 굳이 이 태그를 써야 할 이유가 사라지면서 IE 9를 끝으로 지원 중단됨에 따라 완전히 사장되었다. 당연히 HTML5 규격에서도 없어졌다. 조작할 수 있는 기본 모양이 이 태그보다 압도적으로 많은 CSS를 쓰길 권장한다.
  • <big>: 글꼴 크기를 상대적으로 크게 한다. HTML5에서 없어졌으니 크기를 숫자로 표현 할 수 있는 CSS를 쓰길 권장한다. CSS로 font-size: larger; 속성을 주면 이 태그와 효과가 같아진다. 하지만 반대 기능을 하는 <small>은 존치되어 있다.
  • <center>: 글자를 가운데 정렬한다. 이것도 HTML5에서 없어졌으니 오른쪽 정렬과 왼쪽 정렬 등 다양하게 표현할수 있는 CSS를 쓰자. 인라인 요소에서는 text-align: center;, 블록 요소에서는 margin: 0 auto;로 대체할 수 있다.
  • <dir>: 디렉터리 목록을 만들기 위한 태그로 안에 <li> 태그를 넣어 사용한다. HTML5 규격에서는 <ul> 태그에 통합되어서 없어졌다.
  • <font>: 글꼴 특성을 지정한다. 글꼴 이름이나 크기나 기타 등등. HTML 4.01 비권장 태그이므로 <span style="…">…</span>을 사용하자. 아예 HTML5 규격에서는 없어졌다. CSS를 쓰면 글꼴뿐만 아니라 조작할 수 있는 모양이 압도적으로 많으니 그걸 쓰자. 애초에 CSS가 도입된 이유가 이런 <font> 태그와 같이 HTML 코드에 디자인적인 요소를 욱여넣다 보니 코드가 개판이 되어버리는 상황을 개선하기 위함이었다. HTML 문서에 디자인적인 요소를 직접 사용하는 것을 지양하여야 한다는 기조가 HTML5에서 확립되면서 표준에서 배제된 대표적인 태그로 꼽힌다.
    • color: 글꼴의 색을 지정할 수 있다. 이 속성은 CSS의 color 속성으로 매우 간단하게 대체할 수 있다.
    • face: 글꼴의 이름을 지정할 수 있다. 이 속성은 CSS의 font-family 속성으로 대체할 수 있고 이 태그와는 다르게 복수 지정이 가능하다.
    • size: 1부터 7까지 가능하다. 이 속성은 CSS의 font-size 속성으로 대체할 수 있다. 1번부터 순서대로 각각 x-small(10px), small(13px), medium(16px), large(18px), x-large(24px), xx-large(32px), 48px에 대응한다. 물론 CSS를 쓰면 1보다 더 작거나 7보다 더 크게 설정할 수 있고 더 세밀하게 설정할 수도 있다.
  • <frame>, <frameset>, <noframe>: 프레임(HTML 태그) 참고.
  • <isindex>: 색인 페이지에 검색창을 넣는다. 이미 폼 태그로도 충분히 대체할 수 있어 폐기되었다.
  • <strike>: 취소선을 긋는다. <del> 또는 <s> 태그로 대체 가능하여 폐기되었다.
  • <tt>: 텔레타이프 글꼴로 한다. HTML5에서 사용이 불가하니 더 다양한 글꼴을 표현할 수 있는 CSS를 쓰자. 다만 이와 비슷한 <pre>, <kbd>, <code>, <samp>[16] 태그는 HTML5 규격에 존치되어 있다.

14.2. 그 외 채택이 거부된 태그

다음은 기존의 비표준 태그들로 HTML5에서 표준으로 채택되지 않은 태그들이다.
  • <blink>: 넷스케이프에서 글자를 깜빡이게 하는 비표준 태그였다. 정보적인 기능이 없는 태그인데다가, 광과민성 발작 증세가 있거나 정신이 산만한 사람에게는 접근을 방해하는 장벽으로 작용하여 표준 채택이 거부되었다. 다만, 구태여 이 효과를 쓰고자 한다면 CSS의 애니메이션 기능이나 JavaScript로 대체할 수 있다. 여담으로, 구글 검색창에 'blink tag'라고 쳐 보면 검색 결과에서 'blink', 'tag', '블링크 태그' 등 검색어와 일치하는 부분들이 이 태그를 쓴 것처럼 깜빡이는 이스터 에그가 있다.
  • <bgsound>: 배경음악을 넣는 태그이다. IE 전용 비표준 태그이므로 HTML5에서 추가된 <audio> 등으로 대체하는 것을 추천한다.
  • <marquee>: 글자를 화면 위에 흐르게 한다. <blink>와 같은 이유로 표준으로 채택되지 않았다. 이 태그도 역시 CSS의 애니메이션 기능이나 JavaScript로 대체할 수 있다. <blink> 태그와 마찬가지로 구글 검색창에 'marquee tag'라고 쳐 보면 위쪽의 검색 결과 수와 소요시간을 요약하는 부분이 이 태그를 쓴 것처럼 왼쪽으로 흐르는 이스터 에그가 있다.
  • <multicol>: 글을 다단으로 표시되게 한다. CSS의 Multiple Columns로 대체 가능하여 표준으로 채택되지 않았다.
  • <nobr>: 이 태그 안에서는 줄바꿈이 되지 않는다. 비표준 태그였고 CSS의 white-space: nowrap;으로 대체할 수 있어 표준으로 채택되지 않았다.
  • <noembed>: 위의 <noframe>처럼 <embed> 태그를 지원하지 않는 브라우저에서 메시지를 대신 표시하도록 하는 태그였다. 하지만 <embed> 태그가 HTML5 표준에 포함됨에 따라 존재의 의미가 사라진 관계로 폐기되었다.
  • <xmp>: 이 태그 안에 들어간 텍스트는 보통 텍스트(plain text)로 변하여 안의 태그가 무시된다. HTML5에서는 폐기되었으므로 이와 비슷한 기능을 하는 <pre> 태그로 대체할 것을 권고한다. 단 <pre> 태그는 안에 들어간 HTML 태그를 무시하지 않기 때문에 완전히 같은 기능으로 쓰려면 서버 사이드 스크립트나 JavaScript를 먼저 거쳐서 HTML 태그를 없애서 출력해야 한다.
[1] 나무위키에서도 쓸 수 있지만 지원이 중단될 수 있는 비권장 문법이니 되도록이면 나무위키 엔진에서 사용하는 자체 문법을 사용하는 것이 권장된다. [2] 홈페이지 제목과 같이 나오는 아이콘 [3] 이 이외의 HTML 3.2에 들어갔던 이런 비주얼 태그가 4.01에서는 몽땅 비권장으로 들어갔는데, 이것은 HTML 문서에 의미를 부여한다는 W3C의 정책의 영향이다. 이것은 웹 접근성과도 관련이 있는데, 시각 장애인은 비주얼적인 태그가 의미가 없기 때문이다. [4] 가끔 디시인사이드 같은 사이트에서 복사를 잘못할 시 높은 확률로 볼 수 있다(...) [5] 점선 밑줄이 생기지 않을 경우 CSS에 abbr[title] {border-bottom: 1px dotted;} 를 추가해야 한다. [6] 루비 문자라고도 한다. [7] 다만 Pale Moon 브라우저 기준으로는 정상적으로 렌더링한다. [8] 이미지의 링크가 깨졌을 때, 텍스트 전용 브라우저(Lynx 등)로 페이지를 열람할 때, 시각장애로 인해 TTS나 점자 등 비시각적인 요소에 의존하여야 할 때, 검색 엔진에서 크롤링할 때 등이 이에 속한다. [9] IE 구버전(7 이하)에서는 alt 속성이 title 속성으로 렌더링되는 버그가 있다. [10] Flow content, but with no form element descendants. WHATWG spec, the-form-element [11] 그렇다고 이 데이터를 그대로 믿으면 안된다. 얼마든지 개발자 도구나 프록시 툴 등으로 수정될 수 있다. [12] 대한민국의 유해사이트 차단 사이트인 warning.or.kr 소스를 보면 여전히 테이블레이아웃이다. 정말 body 바로 아래 table태그와 tr태그와 td태그가 전부. [13] 그나마 id나 name 속성을 이용하여 이게 무슨 용도로 사용되는 블럭인지 명시해두는 기법도 있었지만, 닫는 태그쪽은 표시가 안 되기 때문에 역시 문제가 있었다. [14] 이는 이런저런 어른의 사정 때문에 빚어진 현상. video 태그는 더 심하다. [15] <object> 태그는 일일이 외우기도 힘든 형식(classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" 같은 식)으로 된 개체 형식 코드값을 넣어야 했다! 다행히도 HTML5에서는 classid가 삭제되면서 type으로 대체할 수 있게 되었다. [16] <kbd>는 키보드 입력을 정의하기 위한 태그, <code> 태그는 컴퓨터 코드를 정의하기 위한 태그, <samp> 태그는 화면 출력 내용을 정의하기 위한 태그.

분류