최근 수정 시각 : 2019-11-14 23:48:43

HTML/태그

파일:나무위키+상위문서.png   상위 문서: HTML
1. 개요2. 기본 구조3. 텍스트 관련4. 목록 관련5. 링크, 이미지 관련6. 테이블 관련7. 폼8. 멀티미디어9. 외부 페이지 삽입10. 프레임11. 기타12. 시맨틱 태그13. 지원이 부실한 태그14. 비권장 태그
14.1. 표준에서 제외된 태그14.2. 그 외 채택이 거부된 태그

1. 개요

  • HTML은 웹 브라우저마다 지원하는 태그가 조금씩 다르며, 같은 태그라도 작동하는 방법이 다르지만 대체로 비슷한 태그를 지원한다. 나무위키에서도 쓸 수 있지만 지원 중단 가능성이 있는 비권장 문법이며, 일부 문법은 오류를 야기하기도 한다. 개발자 namu도 HTML 문법을 나무위키 내에서 사용하지 말라고 공식적으로 얘기했다.
  • W3C HTML 및 WHATWG HTML Living Standard 각각의 최신 버전을 기준으로 하며, 한 쪽이 지원하지 않는 경우는 이를 표시한다.
  • 태그 목록

2. 기본 구조

  • <!DOCTYPE>: 마크업 언어용 DTD 태그이다. HTML5의 경우 맨 위에 다음과 같이 써 주면 된다.
    {{{#!syntax xml
<!DOCTYPE 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;
}
}}}
  • <title>: HTML의 제목을 선언하는 태그.
  • <meta>: HTML의 부가 정보를 선언하는 태그. 예를 들어 charset 속성을 쓰면 인코딩을 선언할 수 있다.
  • <link>: 별도의 CSS 선언 파일, 파비콘[1] 등을 연결하는 태그.

3. 텍스트 관련

  • <hgroup>: 제목 태그(<h1>~<h6>)를 그룹으로 묶기 위한 태그이다. 대체로 제목과 소제목을 묶는다. 이 태그는 W3C HTML 스펙에서 제외되었다. hgroup 태그는 현재 브라우저 상에서 아무런 역할을 하지 않고 단지 div 비슷하게 동작하기 때문에, 다른 태그로 대체하여도 크게 상관은 없다. W3C는 header 태그로 대체할 것을 권장하고 있다.
  • <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; 속성으로 쓸 것을 권장하고 있다.[2] 하지만 HTML5에서 <strong>보다 약한 의미의 강조로 다시 복귀했다.
  • <i>: 텍스트를 기울임꼴(italic)로 표시한다. 기술 용어, 외국어, 일반적으로 기울임꼴로 사용되는 용어 등을 강조한다.
  • <strong>: 포함된 텍스트를 강하게 강조할 때 사용한다.
  • <em>: <strong>보다 약한 강조를 나타낼 때 사용한다.
    {{{#!syntax xml
<b>굵게 표시됩니다.</b>
<i>기울임꼴로 표시됩니다.</i>
<strong>강하게 강조합니다.</strong>
<em>약하게 강조합니다.</em>}}}
굵게 표시됩니다.
기울임꼴로 표시됩니다.
강하게 강조합니다.
약하게 강조합니다.

  • <ins>: 문서에 삽입(insert)된 텍스트, 즉 밑줄을 표시한다.
  • <del>: 문서에서 삭제(delete)된 텍스트, 즉 취소선을 표시한다.
  • <s>: 취소선을 표시한다. HTML 4.01에서 비권장 태그로 되었다가 HTML5에서 <del>보다는 약한 삭제의 의미로 변경되면서 존치되었다.
  • <u>: 밑줄을 표시한다. 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를 지정하지 않더라도 자동으로 점선 밑줄이 생기게 되었다.[3]
  • <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>: 후리가나[4] 표기에 쓰이는 기본 태그. 절대 Ruby를 프로그래밍하기 위한 태그가 아니다!
    • <rp>: 후리가나가 지원되지 않는 환경에서 표기할 텍스트를 지정한다.
    • <rt>: 후리가나를 쓴다.
    • <rb>: 합성어 등으로 후리가나가 여러 단어로 이루어지는 경우 등에 후리가나 영역을 지정하는데 쓰인다. W3C HTML 표준이나 WHATWG HTML Living Standard 표준이 아니다.
    • <rtc>: 후리가나의 의미적 주석을 넣는다. W3C HTML 표준이나 WHATWG HTML Living Standard 표준이 아니다.

    {{{#!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>: 웹사이트 내의 상호작용하는 메뉴 목록을 위한 태그이다. <menu>의 경우 본래 <ul> 태그와 별반 차이가 없다는 이유로 폐기되었다가 HTML5.1에서 다시 표준으로 부활하였으나, W3C HTML5.2에서 재차 폐기되었다. 단, WHATWG HTML Living Standard에서는 계속 표준으로 정하고 있다.
    • type: toolbar와 context가 정의되어 있었으나 W3C HTML5.2에서 폐기, WHATWG HTML Living Standard에서도 폐기되었다.
    • label: 메뉴가 중첩된 경우 메뉴 이름을 지정하는 속성이다. W3C HTML5.2에서 폐기, WHATWG HTML Living Standard에서도 폐기되었다.

5. 링크, 이미지 관련

  • <a>: 하이퍼링크를 생성하는 태그이다. href 속성을 써서 <a href="링크할 페이지">내용</a>와 같이 작성한다.
    {{{#!syntax xml
<a href="https://namu.wiki">나무위키:대문</a>}}}
주의할 점이라면 <a> 안에 또 <a>를 겹쳐서 넣어서는 안 된다는 점이다. 다음은 <a> 태그의 잘못된 사용 예이다.
{{{#!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에서는 폐기되었다.

  • <img>: 페이지에 이미지를 추가하는 태그이다.
    • src: 이미지파일의 경로를 지정한다.
      • http:// 또는 https:// : 절대경로 URL로 지정한다.
      • path/to/image/file : 상대경로로 지정한다.
      • data:image/jpeg|png|gif;base64, A1bC2dE3fG... : 파일을 base64로 인코딩한 형태로 지정한다. 작은 여러 개의 파일이 있을 경우 권장하며, 큰 파일은 절대 권장하지 않는다.
    • alt: 이미지를 볼 수 없는 경우[5]에 이미지에 대한 설명을 제공한다.[6] 이 속성값이 없어도 이미지파일의 경로가 유효하다면 표시되기는 하지만 웹표준 검사기에서 걸린다.
    • 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> 태그에 대응한다. 다양한 환경에서 서로 다른 이미지를 띄울 수 있게 한다. W3C HTML 표준에 반영되어 있지 않다.

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>}}}
A1B1C1
A2B2C2

  • <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>}}}
ABC
A1B1C1

  • 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>: 입력값을 받는 영역을 지정한다. 한 페이지에 여러 개가 들어갈 수는 있지만, 영역 안에 영역이 들어가는 것은 불가능하다.
  • <input>: 입력값 요소를 지정한다. type에 따라 다른 입력값을 취한다.
    • text : 한 줄 짜리 문자열 값. 기본값이다.
    • number : 숫자.
    • url : 도메인 주소.
    • email : 이메일.
    • tel : 전화번호.
    • search : 검색어.
    • range : 지정한 범위의 숫자.
    • color : 색.
    • date : 날짜.
    • time : 시각.
    • datetime : 날짜+시각.
    • checkbox : 선택/해제할 수 있는 항목.
    • radio : 선택/해제할 수 있는 항목이나 중복 선택은 불가능하다. 그리고 해당 항목을 선택할 때는 마음대로이나 해제하는 것은 아니다.
    • button : 누를 수 있는 버튼을 생성한다.
    • submit : 누를 경우 입력값을 전송시키는 버튼을 생성한다.
    • image : submit + <img> 태그.
    • reset : 누를 경우 입력값을 초기화시키는 버튼을 생성한다.
    • hidden : 투명라인(...). 입력값을 수정하지 않고 곧바로 보낼 때 쓰인다. 소스를 열어보지 않으면 사용자에게는 보이지 않는다.[7]
    • 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>: 스크립트를 통해 그래픽을 그리는 데 사용될 수 있다. 예를 들어, 그래프 그리기, 사진 합성, 애니메이션 제작, 실시간 비디오 처리, 렌더링에 쓰일 수 있다.

9. 외부 페이지 삽입

  • <object>, <embed>: 웹 페이지 또는 외부 프로그램을 임베드한다. HTML 4.01에서 <embed>가 삭제되고 <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에서 추가된 태그들이다. 디자인을 할 때 <table> 대신 <div>를 쓸 것을 권장했더니 그 부작용으로 코드가 온통 <div> 투성이라 알아보기 어렵다는 지적이 있었다. 그래서 HTML5에서 나온 것이 시맨틱 태그이다. HTML5 문서 참고.

13. 지원이 부실한 태그

이 분류에는 지원이 부실한 태그를 넣는다.
  • <dialog>: 다이얼로그 상자를 위한 태그이다. 아직은 크롬오페라에서만 지원하며 그마저도 아직 완전하지 않다.

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를 쓰자.
  • <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에 대응한다.
  • <frame>, <frameset>, <noframe>: 프레임(HTML 태그) 참고.
  • <isindex>: 색인 페이지에 검색창을 넣는다. 이미 폼 태그로도 충분히 대체할 수 있어 폐기되었다.
  • <strike>: 취소선을 긋는다. <del> 또는 <s> 태그로 대체 가능하여 폐기되었다.
  • <tt>: 텔레타이프 글꼴로 한다. HTML5에서 사용이 불가하니 더 다양한 글꼴을 표현할 수 있는 CSS를 쓰자. 다만 이와 비슷한 <kbd>, <code>, <samp>[8] 태그는 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> 태그로 대체할 것을 권고한다.


[1] 홈페이지 제목과 같이 나오는 아이콘[2] 이 이외의 HTML 3.2에 들어갔던 이런 비주얼 태그가 4.01에서는 몽땅 비권장으로 들어갔는데, 이것은 HTML 문서에 의미를 부여한다는 W3C의 정책의 영향이다. 이것은 웹 접근성과도 관련이 있는데, 시각 장애인은 비주얼적인 태그가 의미가 없기 때문이다.[3] 점선 밑줄이 생기지 않을 경우 CSS에 abbr[title] {border-bottom: 1px dotted;} 를 추가해야 한다.[4] 루비 문자라고도 한다.[5] 이미지의 링크가 깨졌을 때, 텍스트 전용 브라우저(Lynx 등)로 페이지를 열람할 때, 시각장애로 인해 TTS점자 등 비시각적인 요소에 의존하여야 할 때, 검색 엔진에서 크롤링할 때 등이 이에 속한다.[6] IE 구버전(7 이하)에서는 alt 속성이 title 속성으로 렌더링되는 버그가 있다.[7] 그렇다고 이 데이터를 그대로 믿으면 안된다. 얼마든지 개발자 도구나 프록시 툴 등으로 수정될 수 있다.[8] <kbd>는 키보드 입력을 정의하기 위한 태그, <code> 태그는 컴퓨터 코드를 정의하기 위한 태그, <samp> 태그는 화면 출력 내용을 정의하기 위한 태그.

파일:크리에이티브 커먼즈 라이선스__CC.png 이 문서의 내용 중 전체 또는 일부는 HTML 문서의 r155 판에서 가져왔습니다. 이전 역사 보러 가기