HTML/태그

덤프버전 :

분류

파일:나무위키+상위문서.png   상위 문서: HTML



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]
  • W3C HTML 및 WHATWG HTML Living Standard 각각의 최신 버전을 기준으로 하며, 한 쪽이 지원하지 않는 경우는 이를 표시한다.
  • 태그 목록 #

2. 기본 구조[편집]


  • : HTML이 작용하는 범위를 지정하는 태그로 위의 DTD를 제외한 전체를 이 태그로 둘러싼다.
  • : HTML 문서의 속성 범위를 지정하기 위한 태그이다. 이 태그 안에 타이틀이나 메타 태그 등을 넣는다.
  • : HTML 문서의 본문 범위를 지정하기 위한 태그이다. 표시될 문서의 레이아웃을 이 태그 안에 넣으면 된다. 속성으로 background=배경그림, bgcolor=배경색, text=글자색, link=링크색, vlink=방문링크색, alink=활성링크색 이렇게 6가지가 있었으나 CSS가 도입되면서부터 굳이 body 태그에 직접 속성을 지정해야 할 이유가 사라졌고 HTML5에서부터 지원하지 않게 되었다. 예를 들어, HTML 4.01 시절엔 body 태그를 다음과 같은 형식으로 쓸 수 있었다.
이렇게 쓰면 배경색은 핑크, 글자색은 파랑, 링크색은 진분홍, 방문링크색은 보라, 활성링크색은 자주색으로 표시된다. 하지만 HTML5에서는 이렇게 지정하는 것을 지원하지 않기 때문에 다음과 같이 CSS로 대체해야 한다. 또한, 기존의
태그의 자체 속성으로는 링크에 마우스 커서를 댔을 때의 색상이나 링크의 밑줄 유무 등의 지정이 불가능하다. 하지만 이것도 CSS의 힘을 빌리면 얼마든지 가능하다.
물론 이렇게 하면 body 영역 외에 있는 a태그에도 속성이 적용되지만 눈에 보이는 HTML의 모든 요소는 body 안에 있기 때문에 상관없다.
  • </code></pre>: HTML의 제목을 선언하는 태그.</li><li> <pre><code class="plaintext"><meta></code></pre>: HTML의 부가 정보를 선언하는 태그. 예를 들어 charset 속성을 쓰면 <a href="/w/%EC%9D%B8%EC%BD%94%EB%94%A9">인코딩</a>을 선언할 수 있다.</li><li> <pre><code class="plaintext"><link></code></pre>: 외부 <a href="/w/CSS">CSS</a> 파일, <a href="/w/%ED%8C%8C%EB%B9%84%EC%BD%98">파비콘</a><script type="text/javascript"> $(document).ready(function(){ $("#rfn-2").bind("contextmenu",function(e){ $("#Modalrfn-2").attr("style", "display: block;"); return false; }); $("#Modalrfn-2").on("click", function(){ $("#Modalrfn-2").attr("style", "display: none;"); }); $("#rfn-2").bind("touchend", function(){ $("#Modalrfn-2").attr("style", "display: block;"); }); $("#Modalrfn-2").bind("touchstart", function(){ $("#Modalrfn-2").attr("style", "display: none;"); }); }); </script><a id="rfn-2" class="wiki-fn-content" href="#fn-2" title=" 홈페이지 제목과 같이 나오는 아이콘">[2]</a><div class="modal in" id="Modalrfn-2" style="display: none;"><div class="modal-dialog" role="document"><div class="modal-content" style="overflow:hidden;"><div class="modal-body">  홈페이지 제목과 같이 나오는 아이콘</div></div></div></div> 등을 연결하는 태그.</li></ul><br><h2 id="s-3"><a name="s-3" href="#toc">3</a><a name="텍스트 관련"></a>. 텍스트 관련<span style="float: right; font-size: 0.8rem; padding-top: 1rem;"><a href="/edit/HTML/태그/!3">[편집]</a></span></h2><hr><ul><li> <pre><code class="plaintext"><hgroup></code></pre>: 제목 태그(<pre><code class="plaintext"><h1></code></pre>~<pre><code class="plaintext"><h6></code></pre>)를 그룹으로 묶기 위한 태그이다. 대체로 제목과 소제목을 묶는다. <strong>이 태그는 W3C HTML 스펙에서 제외되었다.</strong> hgroup 태그는 현재 브라우저 상에서 아무런 역할을 하지 않고 단지 div 비슷하게 동작하기 때문에, 다른 태그로 대체하여도 크게 상관은 없다. W3C는 header 태그로 대체할 것을 권장하고 있다.</li><li> <pre><code class="plaintext"><h[1-6]></code></pre>: 제목(<u>h</u>eading)을 표시할 때 사용된다. <pre><code class="plaintext"><h1></code></pre>이 가장 크고 <pre><code class="plaintext"><h6></code></pre>이 가장 작다. 크기는 브라우저마다 표시하는 방법이 달라 다르게 나타날 수 있다. CSS를 쓰면 크기, 색상, 폰트 등을 변경할 수 있다. <pre><code class="plaintext"><h1></code></pre>은 한 문서 안에 하나만 사용하는 것을 권장한다.</li></ul><div class="indent"></div><pre><code class="xml<h1>1단계</h1><h2>2단계</h2><h3>3단계</h3><h4>4단계</h4><h5>5단계</h5><br><h6>6단계</h6>"></code></pre><div class="indent"><blockquote class="wiki-quote"><span class="wiki-size size-5">1단계</span><br><span class="wiki-size size-4">2단계</span><br><span class="wiki-size size-3">3단계</span><br><span class="wiki-size size-2">4단계</span><br><span class="wiki-size size-1">5단계</span><br>6단계<br></div><hr></blockquote><ul><li> <pre><code class="plaintext"><p></code></pre>: 새 문단(<u>p</u>aragraph)을 연다. <pre><code class="plaintext"></p></code></pre>로 닫는다. 극초창기에는 후술할 <pre><code class="plaintext"><br></code></pre> 태그처럼 닫는 태그가 없고 단순히 문단을 구분하는 역할만 했는데 HTML 2.0에서 닫는 태그가 추가되어 문단을 묶어주는 역할을 하게 되었다. 이 태그를 쓸 경우 기본적으로 문단 하단에 약 1줄 가량의 빈 공간이 생기기 때문에 <br>을 선호하는 경우가 많은데, 문단이라면 <pre><code class="plaintext"><p></code></pre> 태그로 묶어주는 것이 올바른 사용법이다. 빈 공간은 <a href="/w/CSS">CSS</a>를 지정해서 없앨 수 있다.</li></ul><div class="indent"></div><pre><code class="xml<p>이 밑에 빈 공간이 있습니다.</p><p>이 위에 빈 공간이 있습니다.</p><br>"></code></pre><div class="indent"><blockquote class="wiki-quote">이 밑에 빈 공간이 있습니다.<br><span style="color: #BBB">(빈 공간)</span><br>이 위에 빈 공간이 있습니다.<br></div><hr></blockquote><ul><li> <pre><code class="plaintext"><b></code></pre>: 두껍게(<u>b</u>old) 효과를 준다. 그러나 HTML 4.01부터 비권장 태그로 들어갔는데, 이 이유는 이 태그가 비주얼적인 효과를 주기 위한 태그라 비권장으로 지정된 것. 강조의 의미를 줄 때는 <pre><code class="plaintext"><strong></code></pre> 태그로 대체하고 그 이외에는 <a href="/w/CSS">CSS</a>의 font-weight: bold; 속성으로 쓸 것을 권장하고 있다.<script type="text/javascript"> $(document).ready(function(){ $("#rfn-3").bind("contextmenu",function(e){ $("#Modalrfn-3").attr("style", "display: block;"); return false; }); $("#Modalrfn-3").on("click", function(){ $("#Modalrfn-3").attr("style", "display: none;"); }); $("#rfn-3").bind("touchend", function(){ $("#Modalrfn-3").attr("style", "display: block;"); }); $("#Modalrfn-3").bind("touchstart", function(){ $("#Modalrfn-3").attr("style", "display: none;"); }); }); </script><a id="rfn-3" class="wiki-fn-content" href="#fn-3" title=" 이 이외의 HTML 3.2에 들어갔던 이런 비주얼 태그가 4.01에서는 몽땅 비권장으로 들어갔는데, 이것은 HTML 문서에 의미를 부여한다는 W3C의 정책의 영향이다. 이것은 웹 접근성과도 관련이 있는데, 시각 장애인은 비주얼적인 태그가 의미가 없기 때문이다.">[3]</a><div class="modal in" id="Modalrfn-3" style="display: none;"><div class="modal-dialog" role="document"><div class="modal-content" style="overflow:hidden;"><div class="modal-body">  이 이외의 HTML 3.2에 들어갔던 이런 비주얼 태그가 4.01에서는 몽땅 비권장으로 들어갔는데, 이것은 HTML 문서에 의미를 부여한다는 W3C의 정책의 영향이다. 이것은 웹 접근성과도 관련이 있는데, 시각 장애인은 비주얼적인 태그가 의미가 없기 때문이다.</div></div></div></div> 하지만 HTML5에서 <pre><code class="plaintext"><strong></code></pre>보다 약한 의미의 강조로 다시 복귀했다.</li><li> <pre><code class="plaintext"><i></code></pre>: 텍스트를 기울임꼴(<u>i</u>talic)로 표시한다. 기술 용어, 외국어, 일반적으로 기울임꼴로 사용되는 용어 등을 강조한다.</li><li> <pre><code class="plaintext"><strong></code></pre>: 포함된 텍스트를 강하게 강조할 때 사용한다.</li><li> <pre><code class="plaintext"><em></code></pre>: <pre><code class="plaintext"><strong></code></pre>보다 약한 강조를 나타낼 때 사용한다.</li></ul><div class="indent"></div><pre><code class="xml<b>굵게 표시됩니다.</b><i>기울임꼴로 표시됩니다.</i><strong>강하게 강조합니다.</strong><br><em>약하게 강조합니다.</em>"></code></pre><div class="indent"><blockquote class="wiki-quote"><strong>굵게 표시됩니다.</strong><br><em>기울임꼴로 표시됩니다.</em><br><strong>강하게 강조합니다.</strong><br><em>약하게 강조합니다.</em><br></div><hr></blockquote><ul><li> <pre><code class="plaintext"><ins></code></pre>: 문서에 삽입(<u>ins</u>ert)된 텍스트, 즉 밑줄을 표시한다.</li><li> <pre><code class="plaintext"><del></code></pre>: 문서에서 삭제(<u>del</u>ete)된 텍스트, 즉 취소선을 표시한다.</li><li> <pre><code class="plaintext"><s></code></pre>: 취소선(<u>s</u>trikethough)을 표시한다. HTML 4.01에서 비권장 태그로 되었다가 HTML5에서 <pre><code class="plaintext"><del></code></pre>보다는 약한 삭제의 의미로 변경되면서 존치되었다.</li><li> <pre><code class="plaintext"><u></code></pre>: 밑줄(<u>u</u>nderline)을 표시한다. HTML 4.01에서 비권장 태그로 되었다가 HTML5에서 <pre><code class="plaintext"><ins></code></pre>와는 구별되는 의미로 변경되면서 존치되었다. 주로 철자 오류를 지적하는 데 쓴다.</li></ul><div class="indent"></div><pre><code class="xml<ins>밑줄이 표시됩니다.</ins><del>취소선이 표시됩니다.</del><s>나도 취소선</s><br>밑줄이 표시<u>됐</u>습니다."></code></pre><div class="indent"><blockquote class="wiki-quote"><u>밑줄이 표시됩니다.</u><br><del><span style="color: #000">취소선이 표시됩니다.</span></del><br><del><span style="color: #000">나도 취소선</span></del><br>밑줄이 표시<u>됐</u>습니다.<br></div><hr></blockquote><ul><li> <pre><code class="plaintext"><sup></code></pre>: 텍스트를  <sup>위첨자</sup>(<u>sup</u>erscript)로 표시한다.</li><li> <pre><code class="plaintext"><sub></code></pre>: 텍스트를 <sub>아래첨자</sub>(<u>sub</u>script)로 표시한다.</li></ul><div class="indent"></div><pre><code class="xmlE=MC<sup>2</sup>H<sub>2</sub>O는 산소가 아닌 물입니다.<br>YP<sub>B</sub>P<sub>R</sub>"></code></pre><div class="indent"><blockquote class="wiki-quote">E=MC<sup style="top: 0.4em">2</sup><br>H<sub>2</sub>O는 산소가 아닌 물입니다.<br><a href="/w/%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8">YP<sub>B</sub>P<sub>R</sub></a><br></div><hr></blockquote><ul><li> <pre><code class="plaintext"><small></code></pre>: 텍스트를 조금 더 작게 표시한다. <pre><code class="plaintext"><big></code></pre> 태그가 HTML5 규격에서 제외된 것과는 달리 <pre><code class="plaintext"><small></code></pre> 태그는 존치되어 있다. 주로 저작권 정보나 주석을 <span style="font-size: smaller;">조그맣게</span> 다는 데 쓴다.</li></ul><div class="indent"></div><pre><code class="xml나무위키는 위키위키입니다.<br><small>그렇군요.</small>"></code></pre><div class="indent"><blockquote class="wiki-quote"> 나무위키는 위키위키입니다.<br> <span style="font-size: smaller;">그렇군요.</span><br></div><hr></blockquote><ul><li> <pre><code class="plaintext"><br></code></pre>: 문단 내 줄바꿈(line <u>br</u>eak). <a href="/w/%EA%B0%95%EC%A0%9C%EA%B0%9C%ED%96%89">강제개행</a>을 하는 태그이다. 문단의 흐름을 해치기 때문에 권장되는 태그는 아니다.<script type="text/javascript"> $(document).ready(function(){ $("#rfn-4").bind("contextmenu",function(e){ $("#Modalrfn-4").attr("style", "display: block;"); return false; }); $("#Modalrfn-4").on("click", function(){ $("#Modalrfn-4").attr("style", "display: none;"); }); $("#rfn-4").bind("touchend", function(){ $("#Modalrfn-4").attr("style", "display: block;"); }); $("#Modalrfn-4").bind("touchstart", function(){ $("#Modalrfn-4").attr("style", "display: none;"); }); }); </script><a id="rfn-4" class="wiki-fn-content" href="#fn-4" title=" 가끔 디시인사이드 같은 사이트에서 복사를 잘못할 시 높은 확률로 볼 수 있다(...)">[4]</a><div class="modal in" id="Modalrfn-4" style="display: none;"><div class="modal-dialog" role="document"><div class="modal-content" style="overflow:hidden;"><div class="modal-body">  가끔 디시인사이드 같은 사이트에서 복사를 잘못할 시 높은 확률로 볼 수 있다(...)</div></div></div></div></li><li> <pre><code class="plaintext"><hr></code></pre>: 가로줄(<u>h</u>orizontal <u>r</u>ule)을 넣는다. <a href="https://developer.mozilla.org/ko/docs/Web/HTML/Element/hr" class="wiki-link-external" target="_blank">HTML5에서는 주제 분리 요소 기능이 더해졌지만</a>,  시각적으로는 차이가 없다.</li></ul><div class="indent"></div><pre><code class="xml이 밑에 가로줄이 있습니다.<hr><br>이 위에 가로줄이 있습니다."></code></pre><div class="indent"><blockquote class="wiki-quote">이 밑에 가로줄이 있습니다.<br><del></del><br>이 위에 가로줄이 있습니다.<br></div><hr></blockquote><ul><li> <pre><code class="plaintext"><abbr></code></pre>: 약어를 이 태그로 묶어서 무엇의 약어인지 설명하기 위한 태그이다. <pre><code class="plaintext"><abbr title="약어에 대한 설명">약어</abbr></code></pre> 식으로 써서 마우스 커서를 대면 설명이 떠서 읽을 수 있게 한다. 사용법은 <a href="http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_abbr_test" class="wiki-link-external" target="_blank">이 곳</a>을 참고. 원래는 특별한 시각적 효과를 부여하려면 CSS를 사용해야 했지만 구글 크롬과 파이어폭스에서는 언제부터인가 CSS를 지정하지 않더라도 자동으로 점선 밑줄이 생기게 되었다.<script type="text/javascript"> $(document).ready(function(){ $("#rfn-5").bind("contextmenu",function(e){ $("#Modalrfn-5").attr("style", "display: block;"); return false; }); $("#Modalrfn-5").on("click", function(){ $("#Modalrfn-5").attr("style", "display: none;"); }); $("#rfn-5").bind("touchend", function(){ $("#Modalrfn-5").attr("style", "display: block;"); }); $("#Modalrfn-5").bind("touchstart", function(){ $("#Modalrfn-5").attr("style", "display: none;"); }); }); </script><a id="rfn-5" class="wiki-fn-content" href="#fn-5" title=" 점선 밑줄이 생기지 않을 경우 CSS에 abbr[title] {border-bottom: 1px dotted;}를 추가해야 한다.">[5]</a><div class="modal in" id="Modalrfn-5" style="display: none;"><div class="modal-dialog" role="document"><div class="modal-content" style="overflow:hidden;"><div class="modal-body">  점선 밑줄이 생기지 않을 경우 CSS에 abbr[title] {border-bottom: 1px dotted;}를 추가해야 한다.</div></div></div></div></li><li> <pre><code class="plaintext"><wbr></code></pre>: 글이 길어질 때 띄어쓰기가 없더라도 이 태그가 쓰인 부분에서 자동개행이 이루어진다. 예를 들어, <pre><code class="plaintext">Java<wbr>Programming</code></pre>이라고 쓰면 개행되지 않을 때는 'JavaProgramming'으로 붙어서 나오지만 자동개행시 <pre><code class="plaintext"><wbr></code></pre> 태그 앞뒤로 위치한 'Java'와 'Programming'이 서로 분리될 수 있다. 원래는 개행을 방지하는 비표준 태그 <pre><code class="plaintext"><nobr></code></pre> 안애서 <pre><code class="plaintext"><br></code></pre> 태그와 같은 기능을 하는 태그였으나 HTML5에서 표준으로 채택되면서 기능이 변경된 것. 코더들 사이에서 이 태그와 <a href="/w/Soft%20Hyphen">SHY</a> 중 <a href="http://stackoverflow.com/questions/226464/soft-hyphen-in-html-wbr-vs-shy" class="wiki-link-external" target="_blank">무엇을 써야 할 지 의견이 분분하다</a>.</li></ul><div class="indent">다만 한글은 글자 단위로 개행이 되기 때문에 한글에다가 이 태그를 쓸 필요성은 거의 없다.<br></div><ul><li> <pre><code class="plaintext"><blockquote></code></pre>: <a href="/w/%EC%9D%B8%EC%9A%A9">인용구</a>를 기술하는 태그이다. 기본적으로 들여쓰기가 되어 있는데 <a href="/w/CSS">CSS</a>로 없앨 수 있다.</li><li> <pre><code class="plaintext"><q></code></pre>: <pre><code class="plaintext"><blockquote></code></pre>의 인라인 버전.</li><li> <pre><code class="plaintext"><dfn></code></pre>: 후술할 <pre><code class="plaintext"><dl></code></pre>의 인라인 버전.</li><li> <pre><code class="plaintext"><pre></code></pre>: 서식 있는(Preformatted) 텍스트를 넣기 위한 태그이다. 이 태그 안에는 <pre><code class="plaintext"><br></code></pre> 태그 없이 개행하더라도 개행을 인식하고 공백 문자가 두 개 이상 연속으로 있어도 하나로 취급하지 않고 그대로 표시된다. 또한, 일반적으로 이 태그 안에 들어간 텍스트는 고정폭 글꼴로 표시된다. 이 태그 안에 다른 태그를 넣으면 경우에 따라 의도치 않게 표시될 수도 있으므로 가급적이면 다른 태그를 넣지 않는 것이 좋다.</li><li> <pre><code class="plaintext"><var></code></pre>, <pre><code class="plaintext"><samp></code></pre>, <pre><code class="plaintext"><kbd></code></pre>, <pre><code class="plaintext"><code></code></pre>: 변수 등 <a href="/w/%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%B0%8D%20%EC%96%B8%EC%96%B4">프로그래밍 언어</a>와의 연계를 위한 태그.</li><li> <pre><code class="plaintext"><ruby></code></pre>: <a href="/w/%ED%9B%84%EB%A6%AC%EA%B0%80%EB%82%98">후리가나</a><script type="text/javascript"> $(document).ready(function(){ $("#rfn-6").bind("contextmenu",function(e){ $("#Modalrfn-6").attr("style", "display: block;"); return false; }); $("#Modalrfn-6").on("click", function(){ $("#Modalrfn-6").attr("style", "display: none;"); }); $("#rfn-6").bind("touchend", function(){ $("#Modalrfn-6").attr("style", "display: block;"); }); $("#Modalrfn-6").bind("touchstart", function(){ $("#Modalrfn-6").attr("style", "display: none;"); }); }); </script><a id="rfn-6" class="wiki-fn-content" href="#fn-6" title=" 루비 문자라고도 한다.">[6]</a><div class="modal in" id="Modalrfn-6" style="display: none;"><div class="modal-dialog" role="document"><div class="modal-content" style="overflow:hidden;"><div class="modal-body">  루비 문자라고도 한다.</div></div></div></div> 표기에 쓰이는 기본 태그. 절대 <a href="/w/Ruby">Ruby</a>를 프로그래밍하기 위한 태그가 아니다!<ul><li> <pre><code class="plaintext"><rp></code></pre>: 후리가나가 지원되지 않는 환경에서 표기할 텍스트를 지정한다.</li><li> <pre><code class="plaintext"><rt></code></pre>: 후리가나를 쓴다.</li><li> <pre><code class="plaintext"><rb></code></pre>: 합성어 등으로 후리가나가 여러 단어로 이루어지는 경우 등에 후리가나 영역을 지정하는데 쓰인다. W3C HTML 표준이나 <strong>WHATWG HTML Living Standard 표준이 아니다.</strong></li><li> <pre><code class="plaintext"><rtc></code></pre>: 후리가나의 의미적 주석을 넣는다. W3C HTML 표준이나 <strong>WHATWG HTML Living Standard 표준이 아니다.</strong></li></ul></li></ul><div class="indent"></div><pre><code class="xml<ruby>漢字<rp>(</rp><rt>かんじ</rt><rp>)</rp></ruby><br>"></code></pre><div class="indent"><blockquote class="wiki-quote"><ruby><rb>漢字</rb><rp>(</rp><rt>かんじ</rt></ruby><br></div><br><br><h2 id="s-4"><a name="s-4" href="#toc">4</a><a name="목록 관련"></a>. 목록 관련<span style="float: right; font-size: 0.8rem; padding-top: 1rem;"><a href="/edit/HTML/태그/!4">[편집]</a></span></h2><hr></blockquote><ul><li> <pre><code class="plaintext"><ul></code></pre>: 순서 없는 목록(<u>u</u>nordered <u>l</u>ist)을 표시한다.</li><li> <pre><code class="plaintext"><li></code></pre>: 목록에서 각 항목(<u>l</u>ist <u>i</u>tem)은 <pre><code class="plaintext"><li></code></pre>와 <pre><code class="plaintext"></li></code></pre>사이에 넣는다. </li></ul><div class="indent"></div><pre><code class="xml<ul>  <li>순서가 없는 첫번째 항목입니다.</li>  <li>순서가 없는 두번째 항목입니다.</li><br></ul>"></code></pre><div class="indent"><blockquote class="wiki-quote"> * 순서가 없는 첫번째 항목입니다.<br> * 순서가 없는 두번째 항목입니다.<br></div><hr></blockquote><ul><li> <pre><code class="plaintext"><ol></code></pre>: 순서 있는 목록(<u>o</u>rdered <u>l</u>ist)을 표시한다. 참고로 이 태그는 단지 비주얼적인 태그라는 이유로 HTML4에서 비권장 태그로 들어갔다가 HTML5에서 <pre><code class="plaintext"><ul></code></pre> 태그와 구별해서 사용할 필요성이 제기되면서 표준 태그로 재지정되었다.</li></ul><div class="indent"></div><pre><code class="xml<ol>  <li>순서가 있는 첫번째 항목입니다.</li>  <li>순서가 있는 두번째 항목입니다.</li><br></ol>"></code></pre><div class="indent"><blockquote class="wiki-quote"> 1. 순서가 있는 첫번째 항목입니다.<br> 1. 순서가 있는 두번째 항목입니다.<br></div><br><hr></blockquote><ul><li> 참고1: <pre><code class="plaintext"><li></code></pre>와 <pre><code class="plaintext"></li></code></pre>사이에 또 목록을 넣으면 하위 목록도 가능하다.</li></ul><div class="indent"></div><pre><code class="xml<ul>  <li>첫 번째</li>  <li>두 번째    <ul>      <li>두 번째 속 첫 번째</li>      <li>두 번째 속 두 번째</li>    </ul>  </li><br></ul>"></code></pre><div class="indent"><blockquote class="wiki-quote"> * 첫 번째<br> * 두 번째<br>  * 두 번째 속 첫 번째<br>  * 두 번째 속 두 번째<br></div><hr></blockquote><ul><li> 참고2: <pre><code class="plaintext"><ul></code></pre> 안에 하위 목록으로 <pre><code class="plaintext"><ol></code></pre>을 넣을 수도 있다. 물론 반대로 <pre><code class="plaintext"><ol></code></pre> 안에 하위 목록으로 <pre><code class="plaintext"><ul></code></pre>을 넣는 것도 가능하다.</li></ul><div class="indent"></div><pre><code class="xml<ul>  <li>가나다</li>  <li>라마바    <ol>      <li>사아자</li>      <li>차카타</li>    </ol>  </li>  <li>파하</li><br></ul>"></code></pre><div class="indent"><blockquote class="wiki-quote"> * 가나다<br> * 라마바<br>  1. 사아자<br>  1. 차카타<br> * 파하<br></div><hr></blockquote><ul><li> <pre><code class="plaintext"><dl></code></pre>: 정의 목록(<u>d</u>efinition <u>l</u>ist)을 표시한다. </li><li> <pre><code class="plaintext"><dt></code></pre>: 정의 목록의 정의(<u>d</u>efinition <u>t</u>erm)를 기술한다. </li><li> <pre><code class="plaintext"><dd></code></pre>: 정의 목록의 뜻풀이(<u>d</u>efinition <u>d</u>escription)를 기술한다. 기본적으로 들여쓰기가 되어 있는데 <a href="/w/CSS">CSS</a>로 없앨 수 있다.</li><li> <pre><code class="plaintext"><menu></code></pre>: 웹사이트 내의 상호작용하는 메뉴 목록을 위한 태그이다. <pre><code class="plaintext"><menu></code></pre>의 경우 본래 <pre><code class="plaintext"><ul></code></pre> 태그와 별반 차이가 없다는 이유로 폐기되었다가 HTML5.1에서 다시 표준으로 부활하였으나, <strong>W3C HTML5.2에서 재차 폐기되었다.</strong> 단, WHATWG HTML Living Standard에서는 계속 표준으로 정하고 있다.<ul><li> type: toolbar와 context가 정의되어 있었으나 <strong>W3C HTML5.2에서 폐기, WHATWG HTML Living Standard에서도 폐기되었다.</strong></li><li> label: 메뉴가 중첩된 경우 메뉴 이름을 지정하는 속성이다. <strong>W3C HTML5.2에서 폐기, WHATWG HTML Living Standard에서도 폐기되었다.</strong></li></ul></li></ul><br><h2 id="s-5"><a name="s-5" href="#toc">5</a><a name="링크, 이미지 관련"></a>. 링크, 이미지 관련<span style="float: right; font-size: 0.8rem; padding-top: 1rem;"><a href="/edit/HTML/태그/!5">[편집]</a></span></h2><hr><ul><li> <pre><code class="plaintext"><a></code></pre>: 하이퍼링크를 생성하는 태그이다. Anchor의 줄임말이다. href 속성을 써서 <pre><code class="plaintext"><a href="링크할 페이지">내용</a></code></pre>와 같이 작성한다.</li></ul><div class="indent"></div><pre><code class="xml<br><a href="https://namu.wiki">나무위키:대문</a>"></code></pre><div class="indent"><blockquote class="wiki-quote"><a href="/w/%EB%82%98%EB%AC%B4%EC%9C%84%ED%82%A4:%EB%8C%80%EB%AC%B8">나무위키:대문</a><br></blockquote>주의할 점이라면 <pre><code class="plaintext"><a></code></pre> 안에 또 <pre><code class="plaintext"><a></code></pre>를 겹쳐서 넣어서는 안 된다는 점이다. 다음은 <pre><code class="plaintext"><a></code></pre> 태그의 잘못된 사용 예이다.<script type="text/javascript"> $(document).ready(function(){ $("#rfn-7").bind("contextmenu",function(e){ $("#Modalrfn-7").attr("style", "display: block;"); return false; }); $("#Modalrfn-7").on("click", function(){ $("#Modalrfn-7").attr("style", "display: none;"); }); $("#rfn-7").bind("touchend", function(){ $("#Modalrfn-7").attr("style", "display: block;"); }); $("#Modalrfn-7").bind("touchstart", function(){ $("#Modalrfn-7").attr("style", "display: none;"); }); }); </script><a id="rfn-7" class="wiki-fn-content" href="#fn-7" title=" 다만 Pale Moon 브라우저 기준으로는 정상적으로 렌더링한다.">[7]</a><div class="modal in" id="Modalrfn-7" style="display: none;"><div class="modal-dialog" role="document"><div class="modal-content" style="overflow:hidden;"><div class="modal-body">  다만 Pale Moon 브라우저 기준으로는 정상적으로 렌더링한다.</div></div></div></div><br></div><pre><code class="xml<br><a href="https://namu.wiki">나무위키:대문 <a href="https://www.google.com/">구글</a></a>"></code></pre><div class="indent">위 태그를 교정하면 다음과 같다.<br></div><pre><code class="xml<br><a href="https://namu.wiki">나무위키:대문</a> <a href="https://www.google.com/">구글</a>"></code></pre><div class="indent">페이지 내의 책갈피를 위한 속성으로 name이 있었으나, id로 대체 가능하여 HTML5에서는 폐기되었다.<br></div><br><ul><li> 보통 <pre><code class="plaintext">a</code></pre> 태그를 사용하면 페이지가 헤더 등을 남기지 않고 싹 새로 로드되는데, <a href="/w/React">React</a>와 같은 프레임워크를 사용하면 필요한 부분만 새로고칠 수 있다.</li></ul><hr><ul><li> <pre><code class="plaintext"><img></code></pre>: 페이지에 이미지를 추가하는 태그이다.<ul><li> src: source의 약자로 이미지파일의 경로를 지정하는 태그 속성이다.<ul><li> http:// 또는 https://: 절대경로 URL로 지정한다.</li><li> path/to/image/file: 상대경로로 지정한다.</li><li> data:image/jpeg|png|gif;base64, A1bC2dE3fG...: 파일을 base64로 인코딩한 형태로 지정한다. 작은 여러 개의 파일이 있을 경우 권장하며, 큰 파일은 절대 권장하지 않는다.</li></ul></li><li> alt: 이미지를 볼 수 없는 경우<script type="text/javascript"> $(document).ready(function(){ $("#rfn-8").bind("contextmenu",function(e){ $("#Modalrfn-8").attr("style", "display: block;"); return false; }); $("#Modalrfn-8").on("click", function(){ $("#Modalrfn-8").attr("style", "display: none;"); }); $("#rfn-8").bind("touchend", function(){ $("#Modalrfn-8").attr("style", "display: block;"); }); $("#Modalrfn-8").bind("touchstart", function(){ $("#Modalrfn-8").attr("style", "display: none;"); }); }); </script><a id="rfn-8" class="wiki-fn-content" href="#fn-8" title=" 이미지의 링크가 깨졌을 때, 텍스트 전용 브라우저(Lynx 등)로 페이지를 열람할 때, 시각장애로 인해 TTS나 점자 등 비시각적인 요소에 의존하여야 할 때, 검색 엔진에서 크롤링할 때 등이 이에 속한다.">[8]</a><div class="modal in" id="Modalrfn-8" style="display: none;"><div class="modal-dialog" role="document"><div class="modal-content" style="overflow:hidden;"><div class="modal-body">  이미지의 링크가 깨졌을 때, 텍스트 전용 브라우저(Lynx 등)로 페이지를 열람할 때, 시각장애로 인해 TTS나 점자 등 비시각적인 요소에 의존하여야 할 때, 검색 엔진에서 크롤링할 때 등이 이에 속한다.</div></div></div></div>에 이미지에 대한 설명을 제공한다.<script type="text/javascript"> $(document).ready(function(){ $("#rfn-9").bind("contextmenu",function(e){ $("#Modalrfn-9").attr("style", "display: block;"); return false; }); $("#Modalrfn-9").on("click", function(){ $("#Modalrfn-9").attr("style", "display: none;"); }); $("#rfn-9").bind("touchend", function(){ $("#Modalrfn-9").attr("style", "display: block;"); }); $("#Modalrfn-9").bind("touchstart", function(){ $("#Modalrfn-9").attr("style", "display: none;"); }); }); </script><a id="rfn-9" class="wiki-fn-content" href="#fn-9" title=" IE 구버전(7 이하)에서는 alt 속성이 title 속성으로 렌더링되는 버그가 있다.">[9]</a><div class="modal in" id="Modalrfn-9" style="display: none;"><div class="modal-dialog" role="document"><div class="modal-content" style="overflow:hidden;"><div class="modal-body">  IE 구버전(7 이하)에서는 alt 속성이 title 속성으로 렌더링되는 버그가 있다.</div></div></div></div> 이 속성값이 없어도 이미지파일의 경로가 유효하다면 표시되기는 하지만 웹표준 검사기에서 걸린다.</li><li> title: 이미지에 대한 추가 정보를 제공한다. 로고 이미지에 마우스를 갖다대면 말풍선으로 뜨는 것을 확인할 수 있다.</li><li> height, width: 이미지의 세로, 가로폭을 지정한다. HTML 4.01까지는 그냥 숫자만 쓰면 픽셀로, 뒤에 %를 붙이면 백분율로 지정할 수 있었으나, HTML5에서는 픽셀로만 지정할 수 있게 되었으므로 백분율로 지정하려면 CSS를 이용해야 한다.</li></ul></li></ul><div class="indent"><div class="wiki-table-wrap" style="overflow-x:auto"><table class="wiki-table" style="overflow:hidden"><tr><td style="text-align:center">구분 <br></td><td style="text-align:center">HTML 4.01 <br></td><td style="text-align:center">HTML5 <br></td></tr></table></div><div class="wiki-table-wrap" style="overflow-x:auto"><table class="wiki-table" style="overflow:hidden"><tr><td style="text-align:center">width="픽셀"<br>height="픽셀" <br></td><td style="text-align:center">지원함 <br></td><td style="text-align:center">지원함 <br></td></tr></table></div><div class="wiki-table-wrap" style="overflow-x:auto"><table class="wiki-table" style="overflow:hidden"><tr><td style="text-align:center">width="%"<br>height="%" <br></td><td style="text-align:center">지원함 <br></td><td style="text-align:center">지원안함<br>(CSS로 대체) <br></td></tr></table></div></div><pre><code class="xml<img src="/w/파일:나무위키:로고1.png"<br>alt="파일:나무위키:로고1.png" title="파일:나무위키:로고1.png" width="200px">"></code></pre><div class="indent"><blockquote class="wiki-quote"><img loading="lazy" src="//obj-sg.the1.wiki/d/e6/bc/af0ac29096570bd87611f0770f55e8a1add87c439f8d361d04885db2576f3ddf.png" twidth="200px" class="lazyimage" alt="파일:나무위키:로고1.png"><br></div><hr></blockquote><ul><li> <pre><code class="plaintext"><svg></code></pre>: 페이지에 <a href="/w/SVG">SVG</a> 형식의 그래픽을 추가하는 태그이다. SVG 파일은 위의 <pre><code class="plaintext"><img></code></pre> 태그로 넣어도 되지만 SVG 파일이 <a href="/w/XML">XML</a> 형식으로 만들어져 있기에 별도의 SVG 파일을 만들지 않고 직접 코딩해서 넣는 것도 가능하다. 이 때 <pre><code class="plaintext"><svg></code></pre> 태그를 사용한다.</li><li> <pre><code class="plaintext"><progress></code></pre>: 페이지에 진행 상황 막대를 추가하는 태그이다. 예를 들어 <pre><code class="plaintext"><progress value="22" max="100"></progress></code></pre>와 같이 쓸 경우 22% 진행된 막대가 표시된다. <a href="https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_progress" class="wiki-link-external" target="_blank">예시</a></li><li> <pre><code class="plaintext"><picture></code></pre>: 최신 HTML Living Standard에 추가된 이미지 태그로 <pre><code class="plaintext"><audio></code></pre> 태그와 <pre><code class="plaintext"><video></code></pre> 태그에 대응한다. 다양한 환경에서 서로 다른 이미지를 띄울 수 있게 한다. <strong>W3C HTML 표준에 반영되어 있지 않다.</strong></li></ul><br><br><h2 id="s-6"><a name="s-6" href="#toc">6</a><a name="테이블 관련"></a>. 테이블 관련<span style="float: right; font-size: 0.8rem; padding-top: 1rem;"><a href="/edit/HTML/태그/!6">[편집]</a></span></h2><hr><ul><li> <pre><code class="plaintext"><table></code></pre>: 테이블을 만드는 태그이다.</li><li> <pre><code class="plaintext"><tr></code></pre>: 행(<u>t</u>able <u>r</u>ow)을 시작한다.</li><li> <pre><code class="plaintext"><td></code></pre>: 표의 내용(<u>t</u>able <u>d</u>ata), 셀을 표현한다.</li></ul><div class="indent"></div><pre><code class="xml<table>  <tr>    <td>A1</td>    <td>B1</td>    <td>C1</td>  </tr>  <tr>    <td>A2</td>    <td>B2</td>    <td>C2</td>  </tr><br></table>"></code></pre><div class="indent"><blockquote class="wiki-quote">||A1||B1||C1||<br>||A2||B2||C2||<br></div><hr></blockquote><ul><li> <pre><code class="plaintext"><th></code></pre>: 테이블의 행, 열의 머리말(<u>t</u>able <u>h</u>eading)을 나타낸다. 기본적으로 가운데로 정렬되고 굵은 글씨로 표시된다.</li></ul><div class="indent"></div><pre><code class="xml<table>  <tr>    <th>A</th>    <th>B</th>    <th>C</th>  </tr>  <tr>    <td>A1</td>    <td>B1</td>    <td>C1</td>  </tr><br></table>"></code></pre><div class="indent"><blockquote class="wiki-quote">||<:><strong>A</strong>||<:><strong>B</strong>||<:><strong>C</strong>||<br>||A1||B1||C1||<br></div><hr></blockquote><ul><li> colspan, rowspan속성으로 셀을 병합할 수 있다. colspan은 열 병합, rowspan은 행을 병합한다. 둘 다 써서 행과 열을 함께 병합할 수도 있다.</li></ul><div class="indent"></div><pre><code class="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><br></table>"></code></pre><div class="indent"><blockquote class="wiki-quote">|| ||<:><strong>월</strong>||<:><strong>수</strong>||<:><strong>금</strong>||<br>||<:><strong>1교시</strong>||<|2>국어||수학||영어||<br>||<:><strong>2교시</strong>||과학||사회||<br></div><br><hr></blockquote><ul><li> <pre><code class="plaintext"><caption></code></pre>: 테이블의 제목을 기술한다.</li><li> <pre><code class="plaintext"><colgroup></code></pre>, <pre><code class="plaintext"><col></code></pre>: 테이블 상단에 넣어 테이블의 열 정보를 기술한다. 주로 일괄적으로 셀의 너비를 지정할 때 쓰인다.</li><li> <pre><code class="plaintext"><thead></code></pre>, <pre><code class="plaintext"><tbody></code></pre>, <pre><code class="plaintext"><tfoot></code></pre>: 테이블의 세부 구조를 기술한다. 각각 표의 상단, 본문, 하단 부분에 대응한다.</li></ul><br><h2 id="s-7"><a name="s-7" href="#toc">7</a><a name="폼"></a>. 폼<span style="float: right; font-size: 0.8rem; padding-top: 1rem;"><a href="/edit/HTML/태그/!7">[편집]</a></span></h2><hr><a href="/w/Common%20Gateway%20Interface">CGI</a>(<a href="/w/PHP">PHP</a>, <a href="/w/ASP">ASP</a>, <a href="/w/JSP">JSP</a> 등)와 상호작용하기 위해 입력값을 받는 역할을 한다.<br><ul><li> <pre><code class="plaintext"><form></code></pre>: 입력값을 받는 영역을 지정한다. 한 페이지에 여러 개가 들어갈 수는 있지만, <a href="/w/%EB%A7%88%ED%8A%B8%EB%A3%8C%EC%8B%9C%EC%B9%B4">영역 안에 영역이 들어가는 것</a>은 불가능하다.</li><li> <pre><code class="plaintext"><input></code></pre>: 입력값 요소를 지정한다. type에 따라 다른 입력값을 취한다.(<a href="https://developer.mozilla.org/ko/docs/Web/HTML/Element/input" class="wiki-link-external" target="_blank">아래의 각종 input요소의 서포트 브라우저 및 실행결과를 볼수있다.</a>)<ul><li> text: 한 줄 짜리 문자열 값. 기본값이다.</li><li> number: 숫자.</li><li> url: 도메인 주소.</li><li> email: 이메일.</li><li> tel: 전화번호.</li><li> search: 검색어.</li><li> range: 지정한 범위의 숫자.</li><li> color: 색.</li><li> date: 날짜.</li><li> time: 시각.</li><li> datetime: 날짜+시각.</li><li> checkbox: 선택/해제할 수 있는 항목.</li><li> radio: 선택/해제할 수 있는 항목이나 중복 선택은 불가능하다. 그리고 <a href="/w/%EC%97%89%EB%8D%A9%EA%B5%AD">해당 항목을 선택할 때는 마음대로이나 해제하는 것은 아니다</a>. 이 속성은 하나의 form 태그 영역 내에서 name 속성이 같은 2개 이상의 <pre><code class="plaintext"><input type="radio"></code></pre>가 있을 경우 선택되지 않은 다른 항목을 누르면 이미 선택되어 있는 것이 해제되는 방식으로 동작한다. 따라서 단독으로 써서는 안 되는 속성이다.</li><li> button: 누를 수 있는 버튼을 생성한다.</li><li> submit: 누를 경우 입력값을 전송시키는 버튼을 생성한다.</li><li> image: submit + <pre><code class="plaintext"><img></code></pre> 태그.</li><li> reset: 누를 경우 입력값을 초기화시키는 버튼을 생성한다.</li><li> hidden: <a href="/w/%ED%88%AC%EB%AA%85%EB%9D%BC%EC%9D%B8">투명라인</a>(...). 입력값을 수정하지 않고 곧바로 보낼 때 쓰인다. 소스를 열어보지 않으면 사용자에게는 보이지 않는다.<script type="text/javascript"> $(document).ready(function(){ $("#rfn-10").bind("contextmenu",function(e){ $("#Modalrfn-10").attr("style", "display: block;"); return false; }); $("#Modalrfn-10").on("click", function(){ $("#Modalrfn-10").attr("style", "display: none;"); }); $("#rfn-10").bind("touchend", function(){ $("#Modalrfn-10").attr("style", "display: block;"); }); $("#Modalrfn-10").bind("touchstart", function(){ $("#Modalrfn-10").attr("style", "display: none;"); }); }); </script><a id="rfn-10" class="wiki-fn-content" href="#fn-10" title=" 그렇다고 이 데이터를 그대로 믿으면 안된다. 얼마든지 개발자 도구나 프록시 툴 등으로 수정될 수 있다.">[10]</a><div class="modal in" id="Modalrfn-10" style="display: none;"><div class="modal-dialog" role="document"><div class="modal-content" style="overflow:hidden;"><div class="modal-body">  그렇다고 이 데이터를 그대로 믿으면 안된다. 얼마든지 개발자 도구나 프록시 툴 등으로 수정될 수 있다.</div></div></div></div></li><li> file: 파일 업로드에 쓰인다.</li></ul></li><li> <pre><code class="plaintext"><textarea></code></pre>: 여러 줄의 문자열 값을 받는다.</li><li> <pre><code class="plaintext"><button></code></pre>: <pre><code class="plaintext"><input type="button"></code></pre>와 대동소이하다. 차이점은 태그 내에도 HTML 지정이 가능해서 표현의 폭이 넓다. <pre><code class="plaintext">type="submit"</code></pre>을 쓰면 <pre><code class="plaintext"><input type="submit"></code></pre>과 같은 기능을 한다.</li><li> <pre><code class="plaintext"><output></code></pre>: input 태그처럼 입력값이지만 문자열이라서 수정할 수 없다.</li><li> <pre><code class="plaintext"><datalist></code></pre>: 검색어에 들어갈 목록을 지정한다.</li><li> <pre><code class="plaintext"><select></code></pre>: 선택 목록. <ul><li> <pre><code class="plaintext"><option></code></pre>: 선택 목록에 들어갈 항목. <input type="radio">와 대동소이하다.</li></ul></li><li> <pre><code class="plaintext"><fieldset></code></pre>: 폼 요소를 그룹으로 묶어준다. 브라우저에는 이 태그 시작부터 끝까지의 모든 요소를 사각형 박스 안에 묶는 방식으로 렌더링된다.<ul><li> <pre><code class="plaintext"><legend></code></pre>: <del><a href="/w/%EB%82%98%EB%8A%94%20%EC%A0%84%EC%84%A4%EC%9D%B4%EB%8B%A4">나는 전설이다</a></del> <pre><code class="plaintext"><fieldset></code></pre>으로 묶어준 그룹에 제목을 지정해 준다. 브라우저에서는 사각형 박스 왼쪽 상단에 나타난다.</li></ul></li><li> <pre><code class="plaintext"><label></code></pre>: 해당 요소의 이름을 지정한다. 해당 이름을 클릭하면 요소가 자동으로 선택된다.</li></ul><br><h2 id="s-8"><a name="s-8" href="#toc">8</a><a name="멀티미디어"></a>. 멀티미디어<span style="float: right; font-size: 0.8rem; padding-top: 1rem;"><a href="/edit/HTML/태그/!8">[편집]</a></span></h2><hr><ul><li> <pre><code class="plaintext"><video></code></pre>: 비디오 재생</li><li> <pre><code class="plaintext"><audio></code></pre>: 오디오 재생</li><li> <pre><code class="plaintext"><canvas></code></pre>: 스크립트를 통해 그래픽을 그리는 데 사용될 수 있다. 예를 들어, 그래프 그리기, 사진 합성, 애니메이션 제작, 실시간 비디오 처리, 렌더링에 쓰일 수 있다.<a href="https://dripcoke.com/ko/archives/3820" class="wiki-link-external" target="_blank">canvas를 이용한 간단한 도형그리기 예제</a></li></ul><br><h2 id="s-9"><a name="s-9" href="#toc">9</a><a name="외부 페이지 삽입"></a>. 외부 페이지 삽입<span style="float: right; font-size: 0.8rem; padding-top: 1rem;"><a href="/edit/HTML/태그/!9">[편집]</a></span></h2><hr><ul><li> <pre><code class="plaintext"><object></code></pre>, <pre><code class="plaintext"><embed></code></pre>: 웹 페이지 또는 외부 프로그램을 임베드한다. HTML 4.01에서 <pre><code class="plaintext"><embed></code></pre>가 삭제되고 <pre><code class="plaintext"><object></code></pre>로 대체되었으나 <pre><code class="plaintext"><object></code></pre> 태그의 사용법이 워낙 복잡하다는 문제점이 있어서 HTML 5 규격에서 다시 표준으로 들어갔다. <pre><code class="plaintext"><embed></code></pre>의 경우 파이어폭스에서 웹 페이지를 첨부할 수 없는 문제가 있었다.</li></ul><br><br><h2 id="s-10"><a name="s-10" href="#toc">10</a><a name="프레임"></a>. 프레임<span style="float: right; font-size: 0.8rem; padding-top: 1rem;"><a href="/edit/HTML/태그/!10">[편집]</a></span></h2><hr><ul><li> <pre><code class="plaintext"><iframe></code></pre> 외 다른 frame 태그는 <a href="/w/HTML5">HTML5</a>에서 폐기하기로 하였다. <a href="/w/%ED%94%84%EB%A0%88%EC%9E%84(HTML%20%ED%83%9C%EA%B7%B8)">프레임(HTML 태그)</a> 문서 참조.</li></ul><br><h2 id="s-11"><a name="s-11" href="#toc">11</a><a name="기타"></a>. 기타<span style="float: right; font-size: 0.8rem; padding-top: 1rem;"><a href="/edit/HTML/태그/!11">[편집]</a></span></h2><hr><ul><li> <pre><code class="plaintext"><base></code></pre>: 상대 링크(relative link) 해석의 기준이 되는 URL을 지정한다. tistory.com에 올라온 HTML 파일에 base href가 "http://cafe.naver.com/cafesupport"로 지정되어 있다면 "joonggonara"라는 링크를 걸었을 때 https://cafe.naver.com/joonggonara로 해석된다.</li><li> <pre><code class="plaintext"><style></code></pre>: CSS 사용. 되도록이면 <pre><code class="plaintext"><link></code></pre> 태그를 쓰기를 권장한다.</li><li> <pre><code class="plaintext"><script></code></pre>: 스크립트를 사용한다. <pre><code class="plaintext"><script type="text/javascript"></code></pre> ... <pre><code class="plaintext"></script></code></pre> 식으로 스크립트 타입을 지정해서 사용한다. <a href="/w/HTML5">HTML5</a>에서는 type 속성을 생략하면 일반적으로 사용되는 자바스크립트로 인식한다. 인터넷 익스플로러에서는 VB스크립트를 사용할 수도 있었으나 <a href="https://msdn.microsoft.com/ko-kr/library/dn384057(v=vs.85).aspx" class="wiki-link-external" target="_blank">보안 문제로 폐기되었다.</a></li><li> <pre><code class="plaintext"><div></code></pre>: 박스 또는 레이어. 일명 '웹 표준' 개념이 많은 사람들에게 퍼지게 된 이후 테이블 태그 대신 레이아웃을 만드는 데 자주 사용되고 있다. <a href="http://stackoverflow.com/questions/83073/why-not-use-tables-for-layout-in-html" class="wiki-link-external" target="_blank"><pre><code class="plaintext"><table></code></pre> 태그를 디자인에 쓰면 안 되는 이유(영어)</a> 사실 div만 남발하는 것도 올바른 사용법은 아니고, 용도에 따라 여러가지 태그를 적절히 사용하는 것이 중요하다. <pre><code class="plaintext"><div></code></pre> 이외에도 많은 태그가 <pre><code class="plaintext"><div></code></pre>와 같은 박스 스타일로 렌더링되기 때문에 <a href="/w/CSS">CSS</a>만 잘 지정하면 된다.  </li><li> <pre><code class="plaintext"><span></code></pre>: <pre><code class="plaintext"><div></code></pre>의 인라인 버전.</li><li> <pre><code class="plaintext"><figure></code></pre>, <pre><code class="plaintext"><figcaption></code></pre>: 그림이 덧붙여지는 내용 작성에 사용한다.</li></ul><br><h2 id="s-12"><a name="s-12" href="#toc">12</a><a name="시맨틱 태그"></a>. 시맨틱 태그<span style="float: right; font-size: 0.8rem; padding-top: 1rem;"><a href="/edit/HTML/태그/!12">[편집]</a></span></h2><hr>HTML5에서는 <a href="/w/%EC%8B%9C%EB%A7%A8%ED%8B%B1%20%EC%9B%B9">시맨틱 웹</a>을 중요시하여 여러가지 태그를 새롭게 만들었다. 이러한 태그들을 <strong><span style="color: seagreen">시맨틱 태그</span></strong>라고 한다.<br><br>사실 기존 HTML 표준에서도 각 태그는 대부분 의미를 가지고 있었다. 그러나 의미를 가진 태그가 부족한 편이었고, 의미가 불명확한 태그나 시대의 흐름에 뒤처진 태그도 있었다. 2000년대 초반까지만 해도 테이블 관련 태그로 웹 페이지를 여러 구획으로 나눠서 레이아웃을 만드는 방식인 <strong>테이블 레이아웃(Table Layout)</strong>이 일반화되어 있었다. 당시 CSS가 나온지 얼마 되지 않은데다 HTML의 기능이 부족할 때 레이아웃을 짜던 방식이 그대로 이어진 것이 원인이었다. 이에 2000년대 초반부터 시맨틱 웹이 중시되면서 HTML은 문서 구조와 의미, CSS는 디자인으로 확연히 분리되고, 테이블 레이아웃은 박스 모델 레이아웃으로 변화되었다. 그러나 당시 표준이었던 HTML 4.01과 XHTML 1.0으로는 시맨틱 웹을 구현하기가 난점이 있었다. 문서 내에 들어가는 목록이나 강조 등의 미시적인 부분에는 의미가 있었지만, 레이아웃에서 이게 메뉴인지 메인 컨텐츠인지 서브 컨텐츠인지 분류할 수 있는 태그는 없었다. 이 때문에 레이아웃에서 각 영역을 지정하는 태그는 <pre><code class="plaintext"><div></code></pre>가 대단히 많이 쓰였고, 이 당시 박스 모델을 적용한 HTML 문서는 수십 개로 중첩된 복잡한 <pre><code class="plaintext"><div></code></pre> 지옥(...)인 경우가 많았다.<script type="text/javascript"> $(document).ready(function(){ $("#rfn-11").bind("contextmenu",function(e){ $("#Modalrfn-11").attr("style", "display: block;"); return false; }); $("#Modalrfn-11").on("click", function(){ $("#Modalrfn-11").attr("style", "display: none;"); }); $("#rfn-11").bind("touchend", function(){ $("#Modalrfn-11").attr("style", "display: block;"); }); $("#Modalrfn-11").bind("touchstart", function(){ $("#Modalrfn-11").attr("style", "display: none;"); }); }); </script><a id="rfn-11" class="wiki-fn-content" href="#fn-11" title=" 그나마 id나 name 속성을 이용하여 이게 무슨 용도로 사용되는 블럭인지 명시해두는 기법도 있었지만, 닫는 태그쪽은 표시가 안 되기 때문에 역시 문제가 있었다.">[11]</a><div class="modal in" id="Modalrfn-11" style="display: none;"><div class="modal-dialog" role="document"><div class="modal-content" style="overflow:hidden;"><div class="modal-body">  그나마 id나 name 속성을 이용하여 이게 무슨 용도로 사용되는 블럭인지 명시해두는 기법도 있었지만, 닫는 태그쪽은 표시가 안 되기 때문에 역시 문제가 있었다.</div></div></div></div> 이 때문에 HTML5에서 관련 태그를 추가한 것이다.<br><br>시맨틱 태그를 사용한 레이아웃은 컴퓨터가 읽어낼 수 있다. 이게 무슨 말이냐면, 검색 사이트에서 어디가 내용인지를 알 수 있어서 검색 노출을 용이하게하고, <strong>궁극적으로 <a href="/w/%EC%8B%9C%EA%B0%81%EC%9E%A5%EC%95%A0%EC%9D%B8">시각장애인</a>에게 사이트의 어디가 본문인지 아닌지 알려줄 수 있다는 장점이 있다.</strong><br><br>기존 태그는 일부분을 제외하고는 HTML 4.01에서 사용되던 태그가 거의 그대로 사용된다. 원래 HTML을 표준에 맞게 사용했다면 큰 어려움 없이 HTML5에도 적응할 수 있다.<br><br><br><h3 id="s-12.1"><a name="s-12.1" href="#toc">12.1</a><a name="레이아웃 태그"></a>. 레이아웃 태그<span style="float: right; font-size: 0.8rem; padding-top: 1rem;"><a href="/edit/HTML/태그/!13">[편집]</a></span></h3><hr><ul><li> <pre><code class="plaintext"><header></code></pre></li></ul><div class="indent">일반적으로 페이지나 해당 섹션의 가장 윗부분에 위치한다. 페이지 맨 위에 쓸 때는 사이트의 제목이 보통 들어가며, 선택적으로 상단바나 검색창 등이 안에 들어갈 수 있다. <pre><code class="plaintext"><head></code></pre> 태그랑 헷갈리면 매우 곤란하다. section이나 article, aside 등으로 묶어놓은 섹션 안의 헤더 용도로 사용해도 된다. 이건 아래 footer 태그도 마찬가지다.<br></div><ul><li> <pre><code class="plaintext"><nav></code></pre></li></ul><div class="indent">내비게이션(<strong>nav</strong>igation)의 약자로, 일반적으로 상단바 등 사이트를 안내하는 요소에 사용된다. 보통은 안에 <pre><code class="plaintext"><ul></code></pre>을 넣어 목록 형태로 사용한다.<br></div><ul><li> <pre><code class="plaintext"><main></code></pre></li></ul><div class="indent">문서의 주된 콘텐츠를 표시한다. 이 태그는 두 개 이상 보여져서는 안 된다. 두 개 이상의 main 요소를 쓸 경우 하나 이외의 전부를 hidden 속성을 써서 가려야 한다. 시맨틱 태그 중에서는 <a href="/w/Internet%20Explorer">Internet Explorer</a>에서 유일하게 지원되지 않는 태그다.<br></div><ul><li> <pre><code class="plaintext"><article></code></pre></li></ul><div class="indent">웹 페이지의 내용에 사용하는 태그이다. 문서나 페이지, 사이트에서 독립적으로 배포 혹은 재사용(예를 들어 투고 같은)할 수 있는 섹션에 사용한다.<br></div><ul><li> <pre><code class="plaintext"><section></code></pre></li></ul><div class="indent">웹 페이지의 섹션에 사용하는 태그이다. 웹 페이지를 의미적으로 각각의 파트로 구분하기 위해 쓰는 태그이다. 이 태그를 사용하면 검색엔진이 긁어가지 않는다는 이야기가 있는데 루머다. <a href="http://html5.clearboth.org/sections.html" class="wiki-link-external" target="_blank">HTML5 표준 문서</a>에 보면 "요소의 내용을 배포(syndicate)해도 이치에 맞다면 section 요소 대신 article 요소를 사용하기를 권합니다."라는 부분이 있는데, 이 부분의 해석이 잘못 퍼진 것으로 추정된다.<br></div><ul><li> <pre><code class="plaintext"><aside></code></pre></li></ul><div class="indent">본문의 주요 부분을 표시하고 남은 부분을 설명하는 태그이다. 특별한 일이 아니면 사이드바나 광고창 등 중요하지 않은 부분에 사용된다.<br></div><ul><li> <pre><code class="plaintext"><footer></code></pre></li></ul><div class="indent">일반적으로 페이지나 해당 파트의 가장 아랫부분에 위치한다. 페이지 맨 아래에 쓸 때는 사이트의 <a href="/w/%EB%9D%BC%EC%9D%B4%EC%84%A0%EC%8A%A4">라이선스</a>, 주소, 연락처 등을 넣는다.<br></div><br><br><h4 id="s-12.1.1"><a name="s-12.1.1" href="#toc">12.1.1</a><a name="예시"></a>. 예시<span style="float: right; font-size: 0.8rem; padding-top: 1rem;"><a href="/edit/HTML/태그/!14">[편집]</a></span></h4><hr>레이아웃 태그를 사용한 HTML5 마크업의 기초 뼈대는 다음과 같다.<br><img loading="lazy" src="https://lh3.googleusercontent.com/-gAP8SL0l-Y8/W0rKnVXRnyI/AAAAAAADEhU/uF92wAyCD183b7_wa8ZgvYpXTEQicsN3ACHMYCw/s0/98a287b2c413ed8a510bf13e9661a1c1f5ff618e.png" style="width: 300px; " class="lazyimage" alt="파일:html5ex.png"><br><br><pre><code class="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>
    </code></pre><br><br><h3 id="s-12.2"><a name="s-12.2" href="#toc">12.2</a><a name="멀티미디어 태그"></a>. 멀티미디어 태그<span style="float: right; font-size: 0.8rem; padding-top: 1rem;"><a href="/edit/HTML/태그/!15">[편집]</a></span></h3><hr><ul><li> <pre><code class="plaintext"><audio></code></pre></li></ul><div class="indent">음성, 음악 파일 등을 재생할 수 있는 태그. <a href="/w/%EC%9B%B9%20%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80">웹 브라우저</a>마다 지원하는 확장자가 달라<script type="text/javascript"> $(document).ready(function(){ $("#rfn-12").bind("contextmenu",function(e){ $("#Modalrfn-12").attr("style", "display: block;"); return false; }); $("#Modalrfn-12").on("click", function(){ $("#Modalrfn-12").attr("style", "display: none;"); }); $("#rfn-12").bind("touchend", function(){ $("#Modalrfn-12").attr("style", "display: block;"); }); $("#Modalrfn-12").bind("touchstart", function(){ $("#Modalrfn-12").attr("style", "display: none;"); }); }); </script><a id="rfn-12" class="wiki-fn-content" href="#fn-12" title=" 이는 이런저런 어른의 사정 때문에 빚어진 현상. video 태그는 더 심하다.">[12]</a><div class="modal in" id="Modalrfn-12" style="display: none;"><div class="modal-dialog" role="document"><div class="modal-content" style="overflow:hidden;"><div class="modal-body">  이는 이런저런 어른의 사정 때문에 빚어진 현상. video 태그는 더 심하다.</div></div></div></div> 멀티브라우저 지원을 위해서는 <pre><code class="plaintext"><source></code></pre> 태그를 안에 넣어 두가지 이상의 확장자를 가진 음악 파일을 넣어야 한다. 가장 많이 사용하는 조합은 <a href="/w/MP3">mp3</a>+<a href="/w/Vorbis">ogg</a>.<br></div><ul><li> <pre><code class="plaintext"><video></code></pre></li></ul><div class="indent">영상 파일을 재생할 수 있는 태그. 사실상 HTML5에서 가장 주목받는 태그이다. 별다른 <a href="/w/%ED%94%8C%EB%9F%AC%EA%B7%B8%EC%9D%B8">플러그인</a> 없이도 자체 재생이 가능하다는 점이 가장 큰 장점이다. <pre><code class="plaintext"><audio></code></pre> 태그와 마찬가지로 <pre><code class="plaintext"><source></code></pre> 태그를 넣어 <a href="/w/MP4">mp4</a>+<a href="/w/Ogg">ogv</a>의 조합으로 짜주면 거의 대부분의 브라우저를 지원한다. 뭐 요즘은 어차피 어딜 가든 그냥 <a href="/w/%EC%9C%A0%ED%8A%9C%EB%B8%8C">유튜브</a>를 걸어버리지만.... 실제로 유튜브에서 소스보기를 해 보면 영상이 나오는 부분에 이 태그를 쓰고 있다.<br></div><ul><li> <pre><code class="plaintext"><canvas></code></pre></li></ul><div class="indent">스크립트를 이용하여 그래픽을 표현하는 태그이다. 일반적으로는 JavaScript를 많이 사용하며, 응용하면 웹에서 <a href="/w/%EA%B2%8C%EC%9E%84">게임</a> <a href="/w/%EC%95%B1">앱</a>, 3D 엔진 등을 돌리는 다양한 응용이 가능하다.(<a href="https://spiritualize.tistory.com/303" class="wiki-link-external" target="_blank">예시</a>)<br></div><br><h3 id="s-12.3"><a name="s-12.3" href="#toc">12.3</a><a name="폼 관련"></a>. 폼 관련<span style="float: right; font-size: 0.8rem; padding-top: 1rem;"><a href="/edit/HTML/태그/!16">[편집]</a></span></h3><hr><ul><li> <pre><code class="plaintext"><output></code></pre></li></ul><div class="indent">계산의 결과값을 전송하는 데에 쓰인다.<br></div><ul><li> 새로운 <pre><code class="plaintext"><input></code></pre>의 <pre><code class="plaintext">type</code></pre> 속성 - date, datetime, time, color, range 등</li></ul><div class="indent">JavaScript를 통해서만 구현됐던 기능이 내장되었다. 현 시점에서는 크롬이 사실상 전부를 지원한다.<br></div><ul><li> <pre><code class="plaintext"><datalist></code></pre></li></ul><div class="indent"><pre><code class="plaintext"><input></code></pre>의 <pre><code class="plaintext">type="text"</code></pre>와 같은 속성을 가진 것들에 들어갈 값을 미리 정의하는 태그이다.<br></div><ul><li> <del><pre><code class="plaintext"><keygen></code></pre></del><script type="text/javascript"> $(document).ready(function(){ $("#rfn-13").bind("contextmenu",function(e){ $("#Modalrfn-13").attr("style", "display: block;"); return false; }); $("#Modalrfn-13").on("click", function(){ $("#Modalrfn-13").attr("style", "display: none;"); }); $("#rfn-13").bind("touchend", function(){ $("#Modalrfn-13").attr("style", "display: block;"); }); $("#Modalrfn-13").bind("touchstart", function(){ $("#Modalrfn-13").attr("style", "display: none;"); }); }); </script><a id="rfn-13" class="wiki-fn-content" href="#fn-13" title=" 현재 whatwg 스펙에서 제거되었다. 그러나 w3c 스펙 상에는 아직 없어지지 않은 상태.">[13]</a><div class="modal in" id="Modalrfn-13" style="display: none;"><div class="modal-dialog" role="document"><div class="modal-content" style="overflow:hidden;"><div class="modal-body">  현재 whatwg 스펙에서 제거되었다. 그러나 w3c 스펙 상에는 아직 없어지지 않은 상태.</div></div></div></div></li></ul><div class="indent"><del>암호화용 키쌍을 생성하는 태그이다. 서버에는 공개 키가 전송되고, 개인 키는 클라이언트에 저장된다.</del><br></div><br><br><h3 id="s-12.4"><a name="s-12.4" href="#toc">12.4</a><a name="기타 태그"></a>. 기타 태그<span style="float: right; font-size: 0.8rem; padding-top: 1rem;"><a href="/edit/HTML/태그/!17">[편집]</a></span></h3><hr><ul><li> <pre><code class="plaintext"><menu></code></pre></li></ul><div class="indent">툴바, 팝업 메뉴를 넣을 때 쓴다. 현재는 FireFox에서만 적용된다.(<a href="https://www.w3schools.com/tags/tag_menu.asp" class="wiki-link-external" target="_blank">#</a>)<br></div><ul><li> <pre><code class="plaintext"><menuitem></code></pre></li></ul><div class="indent">툴바, 팝업 메뉴의 각 항목을 정의한다.<br></div><ul><li> <pre><code class="plaintext"><details></code></pre></li></ul><div class="indent">보이거나 숨기게 해주는 요약글 형식의 위젯에 사용되는 태그이다. <pre><code class="plaintext"><summary></code></pre> 태그와 함께 쓰인다.<br></div><ul><li> <pre><code class="plaintext"><embed></code></pre></li></ul><div class="indent">외부 애플리케이션이나 플러그인을 삽입할 때 쓰는 태그이다. 대표적으로 <a href="/w/%EC%96%B4%EB%8F%84%EB%B9%84%20%EC%95%A0%EB%8B%88%EB%A9%94%EC%9D%B4%ED%8A%B8">어도비 플래시</a>를 웹페이지에 삽입할 때 이걸 쓴다. 그 외에도 예전에는 IE 전용 태그 중 하나인 <pre><code class="plaintext"><bgsound></code></pre> 태그를 대체하는 태그로도 쓰인 바 있다. 원래 HTML에 없던 비표준 태그였는데 거의 모든 브라우저가 이 태그를 지원한데다, 기존에 표준으로 존재하던 object 태그보다 사용방법이 간편해서<script type="text/javascript"> $(document).ready(function(){ $("#rfn-14").bind("contextmenu",function(e){ $("#Modalrfn-14").attr("style", "display: block;"); return false; }); $("#Modalrfn-14").on("click", function(){ $("#Modalrfn-14").attr("style", "display: none;"); }); $("#rfn-14").bind("touchend", function(){ $("#Modalrfn-14").attr("style", "display: block;"); }); $("#Modalrfn-14").bind("touchstart", function(){ $("#Modalrfn-14").attr("style", "display: none;"); }); }); </script><a id="rfn-14" class="wiki-fn-content" href="#fn-14" title="  태그는 일일이 외우기도 힘든 형식(classid=\"clsid:d27cdb6e-ae6d-11cf-96b8-444553540000\" 같은 식)으로 된 개체 형식 코드값을 넣어야 했다! 다행히도 HTML5에서는 classid가 삭제되면서 type으로 대체할 수 있게 되었다.">[14]</a><div class="modal in" id="Modalrfn-14" style="display: none;"><div class="modal-dialog" role="document"><div class="modal-content" style="overflow:hidden;"><div class="modal-body">   태그는 일일이 외우기도 힘든 형식(classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" 같은 식)으로 된 개체 형식 코드값을 넣어야 했다! 다행히도 HTML5에서는 classid가 삭제되면서 type으로 대체할 수 있게 되었다.</div></div></div></div> <a href="/w/%EC%82%AC%EC%8B%A4%EC%83%81%20%ED%91%9C%EC%A4%80">사실상 표준</a>처럼 쓰이던 태그였고 결국 HTML5 표준에 포함되었다. HTML5 표준에서는 iframe처럼 웹페이지를 표시할 수도 있다.<br></div><ul><li> <pre><code class="plaintext"><object></code></pre></li></ul><div class="indent">외부 문서, 매체, 플러그인 등을 웹페이지에 삽입할 때 쓰는 태그이다.<br></div><ul><li> <pre><code class="plaintext"><figure></code></pre></li></ul><div class="indent">그림, 도표, 다이어그램 등의 글의 이해를 돕기 위한 내용들을 나타내는 태그이다.<br></div><ul><li> <pre><code class="plaintext"><figcaption></code></pre></li></ul><div class="indent"><pre><code class="plaintext"><figure></code></pre> 태그 안에 사용되는 태그로, <pre><code class="plaintext"><figure></code></pre> 태그 안에 있는 내용의 설명을 적는 태그이다.<br></div><ul><li> <pre><code class="plaintext"><iframe></code></pre></li></ul><div class="indent">외부 문서를 해당 영역에 삽입하는 태그이다. HTML 5에서 <a href="/w/%EC%83%8C%EB%93%9C%EB%B0%95%EC%8A%A4">sandbox</a> 속성이 추가되었다.<br></div><ul><li> <pre><code class="plaintext"><time></code></pre></li></ul><div class="indent">기계가 이해하기 쉽게 시간을 표현한다. CSS를 정하지 않았다면 외관상의 변화는 없다.<br><pre><code class="plaintext"><time datetime="2001-05-15 19:00">n시간 전</time></code></pre> 같이 datetime에 그레고리력 시간을 넣어 태그를 작성해야 기계가 이해하기 쉬워진다.<br></div><ul><li> <pre><code class="plaintext"><mark></code></pre></li></ul><div class="indent">특정한 부분을 형광펜으로 마킹한다.<br></div><br><br><h3 id="s-12.5"><a name="s-12.5" href="#toc">12.5</a><a name="용도가 바뀐 태그"></a>. 용도가 바뀐 태그<span style="float: right; font-size: 0.8rem; padding-top: 1rem;"><a href="/edit/HTML/태그/!18">[편집]</a></span></h3><hr><ul><li> <pre><code class="plaintext"><b></code></pre></li></ul><div class="indent">본래는 <a href="/w/%EB%B3%BC%EB%93%9C">굵은 글씨</a>를 표현하는 비주얼적인 요소만 있던 태그였고 HTML 4.01에서 비권장 태그로 들어갔으나, HTML5에서 <pre><code class="plaintext"><strong></code></pre>보다 약한 강조의 의미를 갖는 태그로 변경되었다. 여전히 별도의 CSS 없이 쓰면 브라우저에서는 굵은 글씨가 나오는 것이 기본값이다. <br></div><ul><li> <pre><code class="plaintext"><s></code></pre></li></ul><div class="indent">더이상 옳지 않은 내용을 나타내는 데에 쓴다. 별도의 CSS 없이 쓰면 브라우저에서는 <a href="/w/%EC%B7%A8%EC%86%8C%EC%84%A0">취소선</a>을 긋는 것이 기본값이다.<br></div><ul><li> <pre><code class="plaintext"><u></code></pre></li></ul><div class="indent">양식상 일반적인 텍스트보다 돋보여야 할때 쓴다. 예를 들어 철자가 틀린 단어나, 중국어로 번역된 고유 명사 등이 있다. 별도의 CSS 없이 쓰면 브라우저에서는 밑줄을 긋는 것이 기본값이다.<br></div><ul><li> <pre><code class="plaintext"><i></code></pre></li></ul><div class="indent">어떠한 이유로 일반적인 텍스트보다 돋보여야 할때 쓴다. 예를 들어 전문 용어, 외국어의 구절 등이 있다. 별도의 CSS 없이 쓰면 브라우저에서는 이탤릭체로 표기하는 것이 기본값이다. font-awesome 같은 글꼴 형태로 된 아이콘이 이 태그를 사용해서 아이콘을 출력한다. 아이콘의 특징이 텍스트보다 돋보여야 하니 사용법이 틀린 것은 아니다.<br>더 적절한 시맨틱 태그가 있을 경우 그쪽을 쓴다.<br></div><ul><li> <pre><code class="plaintext"><hr></code></pre></li></ul><div class="indent">원래 단순한 가로줄을 나타내는 태그였으나, 페이지의 주제가 바뀔 때 내용을 분리시키는 의미가 HTML5에서 추가되었다.<br></div><ul><li> <pre><code class="plaintext"><wbr></code></pre></li></ul><div class="indent">원래 <pre><code class="plaintext"><nobr></code></pre> 태그 안에서 <pre><code class="plaintext"><br></code></pre> 태그를 대신하여 강제개행 기능을 하는 태그였으나, HTML5 표준으로 편입되면서 띄어쓰기 없이 이 태그를 사용한 부분에서 자동개행을 하는 기능으로 변경되었다.(<pre><code class="plaintext"><nobr></code></pre> 태그는 CSS로 대체 가능하여 폐기되었다)<br></div><br><br><h3 id="s-12.6"><a name="s-12.6" href="#toc">12.6</a><a name="사용 불가 태그"></a>. 사용 불가 태그<span style="float: right; font-size: 0.8rem; padding-top: 1rem;"><a href="/edit/HTML/태그/!19">[편집]</a></span></h3><hr>대개 <a href="/w/%EC%8B%9C%EB%A7%A8%ED%8B%B1%20%EC%9B%B9">시맨틱 웹</a>에서 사용을 지양하는 태그라든가, 특정 브라우저에서만 작동하는 태그가 속한다.<br><br><ul><li> <pre><code class="plaintext"><font></code></pre> → <a href="/w/CSS">CSS</a>가 있기 때문에 폐기되었다. 이미 HTML 4.01에서 비권장으로 분류된 태그였다. CSS의 <pre><code class="plaintext">color, font-family, font-size</code></pre>로 대체된다. 텍스트의 일부분에만 적용하고 싶으면 <pre><code class="plaintext"><span></code></pre> 태그를 씌우고 위의 CSS를 적용하면 된다.</li><li> <pre><code class="plaintext"><center></code></pre> → 가운데 정렬용 태그인데 마찬가지로 CSS로 너무나도 간단하게 대체 가능하기에 폐기되었다. 텍스트 및 인라인 요소 가운데 정렬은 <pre><code class="plaintext">text-align: center;</code></pre>로, 블럭 요소 가운데 정렬은 <pre><code class="plaintext">margin:0 auto;</code></pre>로 대체 가능하다.</li><li> <pre><code class="plaintext"><basefont></code></pre> → 말 그대로 기본 폰트를 지정해 주는 태그였다. 하지만 CSS가 있는데 굳이 이걸 쓸 이유가... 결국 IE 9를 끝으로 여러 브라우저에서 더 이상 이 태그를 지원하지 않는 등 존재가 유명무실해진 까닭에 너무나도 당연히 폐기되었다. 모든 태그에 CSS 속성을 적용하는 <pre><code class="plaintext">*</code></pre> 선택자를 이용하여 <pre><code class="plaintext">font-family, font-size</code></pre>로 지정하는 방식으로 대체할 수 있고, 이 태그보다 더욱 다양하게 지정할 수 있다.</li><li> <pre><code class="plaintext"><applet></code></pre> → <a href="/w/Java%20Applet">Java Applet</a>을 넣을 때 쓰는 태그였다. <pre><code class="plaintext"><object></code></pre>, <pre><code class="plaintext"><embed></code></pre>로 대체한다.</li><li> <pre><code class="plaintext"><strike></code></pre> → <pre><code class="plaintext"><del></code></pre>, <pre><code class="plaintext"><s></code></pre>로 대체되었다.</li><li> <pre><code class="plaintext"><frame></code></pre> → 이것과 함께 쓰이던 <pre><code class="plaintext"><frameset>, <noframes></code></pre> 태그 역시 함께 사용 불가 태그가 되었다. 또한 이게 없어지면서 frameset 속성의 문서도 없어졌다. HTML5에서 프레임을 가진 문서는 <pre><code class="plaintext"><iframe></code></pre>이나 <pre><code class="plaintext"><div></code></pre>를 JavaScript로 업데이트하는 식으로 비슷하게 구현 가능.</li><li> <pre><code class="plaintext"><acronym></code></pre> → <pre><code class="plaintext"><abbr></code></pre>와 의미가 중복되어서 <pre><code class="plaintext"><abbr></code></pre>로 통합되었다.</li><li> <pre><code class="plaintext"><dir></code></pre> → <pre><code class="plaintext"><ul></code></pre>와 의미가 중복되어서 <pre><code class="plaintext"><ul></code></pre>로 통합되었다.</li><li> <pre><code class="plaintext"><nobr></code></pre> → 이 태그 안에서는 내용이 길어져도 자동개행이 되지 않게 하는 태그였다. CSS에서 <pre><code class="plaintext">white-space: nowrap;</code></pre> 속성을 주는 것으로 이 태그의 기능을 대신할 수 있기에 HTML5 표준으로 채택되지 않았다.</li><li> <pre><code class="plaintext"><marquee></code></pre> → 익스플로러에서 전광판처럼 글자가 흐르게 하는 태그였다. <a href="/w/JavaScript">JavaScript</a>나 CSS3의 Animation으로 대체할 수 있다.</li><li> <pre><code class="plaintext"><blink></code></pre> → 넷스케이프에서 글자를 깜빡이게 하는 태그였다. 이 역시 <a href="/w/JavaScript">JavaScript</a>나 CSS3의 Animation으로 대체할 수 있다. 파이어폭스와 오페라에서도 지원하였으나 파이어폭스에서는 22 버전을 끝으로 지원이 중단되고 오페라에서는 12.1 버전을 끝으로 지원이 중단되면서 현재는 <pre><code class="plaintext"><basefont></code></pre>처럼 모든 브라우저에서 지원이 중단되었다.</li><li> <pre><code class="plaintext"><bgsound></code></pre> → 배경음악을 재생시키는 태그인데 익스플로러에서만 돌아가는 비표준 태그이다. 다른 브라우저를 배려하기 위한 차원에서 범용성이 좋은 <pre><code class="plaintext"><embed></code></pre>로 대체해 가는 추세였으며, HTML5에서 <pre><code class="plaintext"><audio></code></pre>가 추가되었으므로 더 이상 필요하지 않다.</li></ul><br><br><div style="display: none; display: block;"><div style="border:1px solid gray;border-top:5px solid gray;padding:7px;margin-bottom:0px"><a href="/w/크리에이티브 커먼즈 라이선스" class="wiki-link-internal" target="_self"><img loading="lazy" src="//obj-svg.the1.wiki/d/c0/0a/1564a7f2c6092961f7613ec2e1ccf9ea3baaac30d0ed4ab23c5c490fdbe2d204.svg" style="width: 22.5px; " class="lazyimage" alt="파일:CC-white.svg"></a> 이 문단의 내용 중 전체 또는 일부는 <a href="/w/HTML5">HTML5</a> 문서의 <a href="https://namu.wiki/w/HTML5?rev=256&noredirect=1" class="wiki-link-external" target="_blank">r256</a> 판<div style="display: inline; display: 4.2;">, <a href="https://namu.wiki/w/HTML5?rev=256&noredirect=1#s-4.2" class="wiki-link-external" target="_blank">4.2번 문단</a></div>에서 가져왔습니다. <a href="https://namu.wiki/history/HTML5?from=256" class="wiki-link-external" target="_blank">이전 역사 보러 가기</a></div></div><div style="display: block; display: none"><div style="border:1px solid gray;border-top:5px solid gray;padding:7px;margin-bottom:0px"><img loading="lazy" src="//obj-svg.the1.wiki/d/c0/0a/1564a7f2c6092961f7613ec2e1ccf9ea3baaac30d0ed4ab23c5c490fdbe2d204.svg" style="width: 22.5px; " class="lazyimage" alt="파일:CC-white.svg"> 이 문단의 내용 중 전체 또는 일부는 다른 문서에서 가져왔습니다.<div style="text-align: center"><dl class="wiki-folding"><dt><center>[ 펼치기 · 접기 ]</center></dt><dd class="start"><div class="wiki-table-wrap" style="overflow:initial;"><div style="text-align: left; padding: 0px 10px"><a href="/w/HTML5">HTML5</a> 문서의 <a href="https://namu.wiki/w/HTML5?rev=256&noredirect=1" class="wiki-link-external" target="_blank">r256</a> 판<div style="display: inline; display: 4.2;">, <a href="https://namu.wiki/w/HTML5?rev=256&noredirect=1#s-4.2" class="wiki-link-external" target="_blank">4.2번 문단</a></div> (<a href="https://namu.wiki/history/HTML5?from=256" class="wiki-link-external" target="_blank">이전 역사</a>)<br><a style="font-weight:bold;" href="/w/"></a> 문서의 <a href="https://namu.wiki/w/?rev=&noredirect=1" class="wiki-link-external" target="_blank">r</a> 판<div style="display: inline; display: none;">, <a href="https://namu.wiki/w/?rev=&noredirect=1#s-" class="wiki-link-external" target="_blank">번 문단</a></div> (<a href="https://namu.wiki/history/?from=" class="wiki-link-external" target="_blank">이전 역사</a>)<br><div style="display: block; display: none"><a style="font-weight:bold;" href="/w/"></a> 문서의 <a href="https://namu.wiki/w/?rev=&noredirect=1" class="wiki-link-external" target="_blank">r</a> 판<div style="display: inline; display: none;">, <a href="https://namu.wiki/w/?rev=&noredirect=1#s-" class="wiki-link-external" target="_blank">번 문단</a></div> (<a href="https://namu.wiki/history/?from=" class="wiki-link-external" target="_blank">이전 역사</a>)</div><div style="display: block; display: none"><a style="font-weight:bold;" href="/w/"></a> 문서의 <a href="https://namu.wiki/w/?rev=&noredirect=1" class="wiki-link-external" target="_blank">r</a> 판<div style="display: inline; display: none;">, <a href="https://namu.wiki/w/?rev=&noredirect=1#s-" class="wiki-link-external" target="_blank">번 문단</a></div> (<a href="https://namu.wiki/history/?from=" class="wiki-link-external" target="_blank">이전 역사</a>)</div><div style="display: block; display: none"><a style="font-weight:bold;" href="/w/"></a> 문서의 <a href="https://namu.wiki/w/?rev=&noredirect=1" class="wiki-link-external" target="_blank">r</a> 판<div style="display: inline; display: none;">, <a href="https://namu.wiki/w/?rev=&noredirect=1#s-" class="wiki-link-external" target="_blank">번 문단</a></div> (<a href="https://namu.wiki/history/?from=" class="wiki-link-external" target="_blank">이전 역사</a>)</div><div style="display: block; display: none"><a style="font-weight:bold;" href="/w/"></a> 문서의 <a href="https://namu.wiki/w/?rev=&noredirect=1" class="wiki-link-external" target="_blank">r</a> 판<div style="display: inline; display: none;">, <a href="https://namu.wiki/w/?rev=&noredirect=1#s-" class="wiki-link-external" target="_blank">번 문단</a></div> (<a href="https://namu.wiki/history/?from=" class="wiki-link-external" target="_blank">이전 역사</a>)</div><div style="display: block; display: none"><a style="font-weight:bold;" href="/w/"></a> 문서의 <a href="https://namu.wiki/w/?rev=&noredirect=1" class="wiki-link-external" target="_blank">r</a> 판<div style="display: inline; display: none;">, <a href="https://namu.wiki/w/?rev=&noredirect=1#s-" class="wiki-link-external" target="_blank">번 문단</a></div> (<a href="https://namu.wiki/history/?from=" class="wiki-link-external" target="_blank">이전 역사</a>)</div><div style="display: block; display: none"><a style="font-weight:bold;" href="/w/"></a> 문서의 <a href="https://namu.wiki/w/?rev=&noredirect=1" class="wiki-link-external" target="_blank">r</a> 판<div style="display: inline; display: none;">, <a href="https://namu.wiki/w/?rev=&noredirect=1#s-" class="wiki-link-external" target="_blank">번 문단</a></div> (<a href="https://namu.wiki/history/?from=" class="wiki-link-external" target="_blank">이전 역사</a>)</div><div style="display: block; display: none"><a style="font-weight:bold;" href="/w/"></a> 문서의 <a href="https://namu.wiki/w/?rev=&noredirect=1" class="wiki-link-external" target="_blank">r</a> 판<div style="display: inline; display: none;">, <a href="https://namu.wiki/w/?rev=&noredirect=1#s-" class="wiki-link-external" target="_blank">번 문단</a></div> (<a href="https://namu.wiki/history/?from=" class="wiki-link-external" target="_blank">이전 역사</a>)</div></div></div></div></div>  <br></div></dd></dl><br><br><br><br><h2 id="s-13"><a name="s-13" href="#toc">13</a><a name="지원이 부실한 태그"></a>. 지원이 부실한 태그<span style="float: right; font-size: 0.8rem; padding-top: 1rem;"><a href="/edit/HTML/태그/!20">[편집]</a></span></h2><hr>이 분류에는 지원이 부실한 태그를 넣는다.<br><br><ul><li> <pre><code class="plaintext"><dialog></code></pre>: 다이얼로그 상자를 위한 태그이다. 아직은 <a href="/w/%ED%81%AC%EB%A1%AC(%EC%9B%B9%20%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80)">크롬</a>과 <a href="/w/%EC%98%A4%ED%8E%98%EB%9D%BC(%EC%9B%B9%20%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80)">오페라</a>에서만 지원하며 그마저도 아직 완전하지 않다.</li></ul><br><br><h2 id="s-14"><a name="s-14" href="#toc">14</a><a name="비권장 태그"></a>. 비권장 태그<span style="float: right; font-size: 0.8rem; padding-top: 1rem;"><a href="/edit/HTML/태그/!21">[편집]</a></span></h2><hr><strong>사용하지 않는 것이 권장되는 태그.</strong> 이 분류에는 <strong>많이 사용하였지만, HTML5에서 제거된 태그</strong> 등이 들어간다. 앞으로의 홈페이지 제작에서는 사용하지 않는 것을 추천한다.<br><br><br><h3 id="s-14.1"><a name="s-14.1" href="#toc">14.1</a><a name="표준에서 제외된 태그"></a>. 표준에서 제외된 태그<span style="float: right; font-size: 0.8rem; padding-top: 1rem;"><a href="/edit/HTML/태그/!22">[편집]</a></span></h3><hr>다음은 다른 태그나 <a href="/w/CSS">CSS</a>로 대체할 수 있어 폐기되었거나 사용성이나 접근성 등에 문제가 있어 배제된 태그들이다.<br><ul><li> <pre><code class="plaintext"><acronym></code></pre>: 두문자어에 대한 설명을 넣기 위한 태그이다. HTML5 규격에서는 <pre><code class="plaintext"><abbr></code></pre> 태그에 통합되어서 없어졌다.</li><li> <pre><code class="plaintext"><applet></code></pre>: <a href="/w/Java%20Applet">Java Applet</a>을 넣기 위한 태그이다. <pre><code class="plaintext"><embed></code></pre> 또는 <pre><code class="plaintext"><object></code></pre> 태그로 대체 가능하여 폐기되었다.</li><li> <pre><code class="plaintext"><basefont></code></pre>: 페이지의 기본 글꼴을 지정한다. 지정 가능한 범위는 글꼴 색과 모양, 크기였다. 하지만 <a href="/w/CSS">CSS</a>로 인해 굳이 이 태그를 써야 할 이유가 사라지면서 IE 9를 끝으로 지원 중단됨에 따라 완전히 사장되었다. 당연히 HTML5 규격에서도 <strong>없어졌다</strong>. 조작할 수 있는 기본 모양이 이 태그보다 압도적으로 많은 <a href="/w/CSS">CSS</a>를 쓰길 권장한다.</li><li> <pre><code class="plaintext"><big></code></pre>: <a href="/w/%EA%B8%80%EA%BC%B4">글꼴</a> 크기를 상대적으로 크게 한다. HTML5에서 없어졌으니 크기를 숫자로 표현 할 수 있는 <a href="/w/CSS">CSS</a>를 쓰길 권장한다. CSS로 <pre><code class="plaintext">font-size: larger;</code></pre> 속성을 주면 이 태그와 효과가 같아진다. 하지만 반대 기능을 하는 <pre><code class="plaintext"><small></code></pre>은 존치되어 있다.</li><li> <pre><code class="plaintext"><center></code></pre>: 글자를 가운데 정렬한다. 이것도 HTML5에서 없어졌으니 오른쪽 정렬과 왼쪽 정렬 등 다양하게 표현할수 있는 <a href="/w/CSS">CSS</a>를 쓰자. 인라인 요소에서는 <pre><code class="plaintext">text-align: center;</code></pre>, 블록 요소에서는 <pre><code class="plaintext">margin: 0 auto;</code></pre>로 대체할 수 있다.</li><li> <pre><code class="plaintext"><dir></code></pre>: 디렉터리 목록을 만들기 위한 태그로 안에 <pre><code class="plaintext"><li></code></pre> 태그를 넣어 사용한다. HTML5 규격에서는 <pre><code class="plaintext"><ul></code></pre> 태그에 통합되어서 없어졌다.</li><li> <pre><code class="plaintext"><font></code></pre>: <a href="/w/%EA%B8%80%EA%BC%B4">글꼴</a> 특성을 지정한다. 글꼴 이름이나 크기나 기타 등등. <strong>HTML 4.01 비권장 태그</strong>이므로 <pre><code class="plaintext"><span style="…">…</span></code></pre>을 사용하자. 아예 HTML5 규격에서는 <strong>없어졌다</strong>. <a href="/w/CSS">CSS</a>를 쓰면 글꼴뿐만 아니라 조작할 수 있는 모양이 압도적으로 많으니 그걸 쓰자. 애초에 <a href="/w/CSS">CSS</a>가 도입된 이유가 이런 <pre><code class="plaintext"><font></code></pre> 태그와 같이 HTML 코드에 디자인적인 요소를 욱여넣다 보니 코드가 개판이 되어버리는 상황을 개선하기 위함이었다. HTML 문서에 디자인적인 요소를 직접 사용하는 것을 지양하여야 한다는 기조가 HTML5에서 확립되면서 표준에서 배제된 대표적인 태그로 꼽힌다.<ul><li> color: 글꼴의 색을 지정할 수 있다. 이 속성은 CSS의 color 속성으로 매우 간단하게 대체할 수 있다.</li><li> face: 글꼴의 이름을 지정할 수 있다. 이 속성은 CSS의 font-family 속성으로 대체할 수 있고 이 태그와는 다르게 복수 지정이 가능하다.</li><li> 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보다 더 크게 설정할 수 있고 더 세밀하게 설정할 수도 있다.</li></ul></li><li> <pre><code class="plaintext"><frame></code></pre>, <pre><code class="plaintext"><frameset></code></pre>, <pre><code class="plaintext"><noframe></code></pre>: <a href="/w/%ED%94%84%EB%A0%88%EC%9E%84(HTML%20%ED%83%9C%EA%B7%B8)">프레임(HTML 태그)</a> 참고.</li><li> <pre><code class="plaintext"><isindex></code></pre>: 색인 페이지에 검색창을 넣는다. 이미 폼 태그로도 충분히 대체할 수 있어 폐기되었다.</li><li> <pre><code class="plaintext"><strike></code></pre>: 취소선을 긋는다. <pre><code class="plaintext"><del></code></pre> 또는 <pre><code class="plaintext"><s></code></pre> 태그로 대체 가능하여 폐기되었다.</li><li> <pre><code class="plaintext"><tt></code></pre>: 텔레타이프 글꼴로 한다. HTML5에서 사용이 불가하니 더 다양한 글꼴을 표현할 수 있는 <a href="/w/CSS">CSS</a>를 쓰자. 다만 이와 비슷한 <pre><code class="plaintext"><pre></code></pre>, <pre><code class="plaintext"><kbd></code></pre>, <pre><code class="plaintext"><code></code></pre>, <pre><code class="plaintext"><samp></code></pre><script type="text/javascript"> $(document).ready(function(){ $("#rfn-15").bind("contextmenu",function(e){ $("#Modalrfn-15").attr("style", "display: block;"); return false; }); $("#Modalrfn-15").on("click", function(){ $("#Modalrfn-15").attr("style", "display: none;"); }); $("#rfn-15").bind("touchend", function(){ $("#Modalrfn-15").attr("style", "display: block;"); }); $("#Modalrfn-15").bind("touchstart", function(){ $("#Modalrfn-15").attr("style", "display: none;"); }); }); </script><a id="rfn-15" class="wiki-fn-content" href="#fn-15" title=" 는 키보드 입력을 정의하기 위한 태그,   태그는 컴퓨터 코드를 정의하기 위한 태그,  태그는 화면 출력 내용을 정의하기 위한 태그.">[15]</a><div class="modal in" id="Modalrfn-15" style="display: none;"><div class="modal-dialog" role="document"><div class="modal-content" style="overflow:hidden;"><div class="modal-body">  는 키보드 입력을 정의하기 위한 태그,   태그는 컴퓨터 코드를 정의하기 위한 태그,  태그는 화면 출력 내용을 정의하기 위한 태그.</div></div></div></div> 태그는 HTML5 규격에 존치되어 있다.</li></ul><br><br><h3 id="s-14.2"><a name="s-14.2" href="#toc">14.2</a><a name="그 외 채택이 거부된 태그"></a>. 그 외 채택이 거부된 태그<span style="float: right; font-size: 0.8rem; padding-top: 1rem;"><a href="/edit/HTML/태그/!23">[편집]</a></span></h3><hr>다음은 기존의 비표준 태그들로 HTML5에서 표준으로 채택되지 않은 태그들이다.<br><ul><li> <pre><code class="plaintext"><blink></code></pre>: 넷스케이프에서 글자를 깜빡이게 하는 비표준 태그였다. 정보적인 기능이 없는 태그인데다가, <a href="/w/%EA%B4%91%EA%B3%BC%EB%AF%BC%EC%84%B1%20%EB%B0%9C%EC%9E%91">광과민성 발작</a> 증세가 있거나 정신이 산만한 사람에게는 접근을 방해하는 장벽으로 작용하여 표준 채택이 거부되었다. 다만, 구태여 이 효과를 쓰고자 한다면 CSS의 애니메이션 기능이나 JavaScript로 대체할 수 있다. 여담으로, <a href="https://www.google.com/search?q=blink+tag" class="wiki-link-external" target="_blank">구글 검색창에 'blink tag'라고 쳐 보면</a> 검색 결과에서 'blink', 'tag', '블링크 태그' 등 검색어와 일치하는 부분들이 이 태그를 쓴 것처럼 깜빡이는 <a href="/w/%EC%9D%B4%EC%8A%A4%ED%84%B0%20%EC%97%90%EA%B7%B8">이스터 에그</a>가 있다.</li><li> <pre><code class="plaintext"><bgsound></code></pre>: <a href="/w/%EB%B0%B0%EA%B2%BD%EC%9D%8C%EC%95%85">배경음악</a>을 넣는 태그이다. IE 전용 비표준 태그이므로 HTML5에서 추가된 <pre><code class="plaintext"><audio></code></pre> 등으로 대체하는 것을 추천한다.</li><li> <pre><code class="plaintext"><marquee></code></pre>: 글자를 화면 위에 흐르게 한다. <pre><code class="plaintext"><blink></code></pre>와 같은 이유로 표준으로 채택되지 않았다. 이 태그도 역시 CSS의 애니메이션 기능이나 JavaScript로 대체할 수 있다. <pre><code class="plaintext"><blink></code></pre> 태그와 마찬가지로 <a href="https://www.google.com/search?q=marquee+tag" class="wiki-link-external" target="_blank">구글 검색창에 'marquee tag'라고 쳐 보면</a> 위쪽의 검색 결과 수와 소요시간을 요약하는 부분이 이 태그를 쓴 것처럼 왼쪽으로 흐르는 <a href="/w/%EC%9D%B4%EC%8A%A4%ED%84%B0%20%EC%97%90%EA%B7%B8">이스터 에그</a>가 있다.</li><li> <pre><code class="plaintext"><multicol></code></pre>: 글을 다단으로 표시되게 한다. CSS의 <a href="https://www.w3schools.com/css/css3_multiple_columns.asp" class="wiki-link-external" target="_blank">Multiple Columns</a>로 대체 가능하여 표준으로 채택되지 않았다.</li><li> <pre><code class="plaintext"><nobr></code></pre>: 이 태그 안에서는 줄바꿈이 되지 않는다. 비표준 태그였고 CSS의 <pre><code class="plaintext">white-space: nowrap;</code></pre>으로 대체할 수 있어 표준으로 채택되지 않았다.</li><li> <pre><code class="plaintext"><noembed></code></pre>: 위의 <pre><code class="plaintext"><noframe></code></pre>처럼 <pre><code class="plaintext"><embed></code></pre> 태그를 지원하지 않는 브라우저에서 메시지를 대신 표시하도록 하는 태그였다. 하지만 <pre><code class="plaintext"><embed></code></pre> 태그가 HTML5 표준에 포함됨에 따라 존재의 의미가 사라진 관계로 폐기되었다.</li><li> <pre><code class="plaintext"><xmp></code></pre>: 이 태그 안에 들어간 텍스트는 보통 텍스트(plain text)로 변하여 안의 태그가 무시된다. HTML5에서는 폐기되었으므로 이와 비슷한 기능을 하는 <pre><code class="plaintext"><pre></code></pre> 태그로 대체할 것을 권고한다. 단 <pre><code class="plaintext"><pre></code></pre> 태그는 안에 들어간 HTML 태그를 무시하지 않기 때문에 완전히 같은 기능으로 쓰려면 서버 사이드 스크립트나 JavaScript를 먼저 거쳐서 HTML 태그를 없애서 출력해야 한다.</li></ul> <br><div style="border:1px solid gray;border-top:5px solid gray;padding:7px;margin-bottom:0px"><img loading="lazy" src="//obj-sg.the1.wiki/d/01/9a/02bb4beed074015e29cdd2af37abcb05a66a2d08afe513088f09354e0cb2e41a.png" style="width: 18px; " class="lazyimage" alt="파일:크리에이티브 커먼즈 라이선스__CC.png"> 이 문서의 내용 중 전체 또는 일부는 2023-10-27 03:34:27에 나무위키 <a href="//namu.wiki/w/HTML/태그">HTML/태그</a> 문서에서 가져왔습니다.</div><br><div class="wiki-macro-footnote"><span class="footnote-list"><a id="fn-1" href="#rfn-1">[1]</a>  <a href="/w/%EB%82%98%EB%AC%B4%EC%9C%84%ED%82%A4">나무위키</a>에서도 쓸 수 있지만 지원이 중단될 수 있는 비권장 문법이니 되도록이면 나무위키 엔진에서 사용하는 자체 문법을 사용하는 것이 권장된다.</span><span class="footnote-list"><a id="fn-2" href="#rfn-2">[2]</a>  홈페이지 제목과 같이 나오는 아이콘</span><span class="footnote-list"><a id="fn-3" href="#rfn-3">[3]</a>  이 이외의 HTML 3.2에 들어갔던 이런 비주얼 태그가 4.01에서는 몽땅 비권장으로 들어갔는데, 이것은 HTML 문서에 의미를 부여한다는 W3C의 정책의 영향이다. 이것은 웹 접근성과도 관련이 있는데, 시각 장애인은 비주얼적인 태그가 의미가 없기 때문이다.</span><span class="footnote-list"><a id="fn-4" href="#rfn-4">[4]</a>  가끔 <a href="/w/%EB%94%94%EC%8B%9C%EC%9D%B8%EC%82%AC%EC%9D%B4%EB%93%9C">디시인사이드</a> 같은 사이트에서 복사를 잘못할 시 높은 확률로 볼 수 있다(...)</span><span class="footnote-list"><a id="fn-5" href="#rfn-5">[5]</a>  점선 밑줄이 생기지 않을 경우 CSS에 <pre><code class="plaintext">abbr[title] {border-bottom: 1px dotted;}</code></pre>를 추가해야 한다.</span><span class="footnote-list"><a id="fn-6" href="#rfn-6">[6]</a>  <a href="/w/%EB%A3%A8%EB%B9%84%20%EB%AC%B8%EC%9E%90">루비 문자</a>라고도 한다.</span><span class="footnote-list"><a id="fn-7" href="#rfn-7">[7]</a>  다만 <a href="/w/Pale%20Moon">Pale Moon</a> 브라우저 기준으로는 정상적으로 렌더링한다.</span><span class="footnote-list"><a id="fn-8" href="#rfn-8">[8]</a>  이미지의 링크가 깨졌을 때, 텍스트 전용 브라우저(Lynx 등)로 페이지를 열람할 때, 시각장애로 인해 <a href="/w/TTS">TTS</a>나 <a href="/w/%EC%A0%90%EC%9E%90">점자</a> 등 비시각적인 요소에 의존하여야 할 때, 검색 엔진에서 크롤링할 때 등이 이에 속한다.</span><span class="footnote-list"><a id="fn-9" href="#rfn-9">[9]</a>  IE 구버전(7 이하)에서는 alt 속성이 title 속성으로 렌더링되는 버그가 있다.</span><span class="footnote-list"><a id="fn-10" href="#rfn-10">[10]</a>  그렇다고 이 데이터를 그대로 믿으면 안된다. 얼마든지 개발자 도구나 프록시 툴 등으로 수정될 수 있다.</span><span class="footnote-list"><a id="fn-11" href="#rfn-11">[11]</a>  그나마 id나 name 속성을 이용하여 이게 무슨 용도로 사용되는 블럭인지 명시해두는 기법도 있었지만, 닫는 태그쪽은 표시가 안 되기 때문에 역시 문제가 있었다.</span><span class="footnote-list"><a id="fn-12" href="#rfn-12">[12]</a>  이는 이런저런 <a href="/w/%EC%96%B4%EB%A5%B8%EC%9D%98%20%EC%82%AC%EC%A0%95">어른의 사정</a> 때문에 빚어진 현상. video 태그는 더 심하다.</span><span class="footnote-list"><a id="fn-13" href="#rfn-13">[13]</a>  현재 whatwg 스펙에서 제거되었다. 그러나 <a href="https://www.w3.org/TR/html5/forms.html#the-keygen-element" class="wiki-link-external" target="_blank">w3c 스펙 상에는 아직 없어지지 않은 상태</a>.</span><span class="footnote-list"><a id="fn-14" href="#rfn-14">[14]</a>  <pre><code class="plaintext"><object></code></pre> 태그는 일일이 외우기도 힘든 형식(<pre><code class="plaintext">classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"</code></pre> 같은 식)으로 된 개체 형식 코드값을 넣어야 했다! 다행히도 HTML5에서는 classid가 삭제되면서 type으로 대체할 수 있게 되었다.</span><span class="footnote-list"><a id="fn-15" href="#rfn-15">[15]</a>  <pre><code class="plaintext"><kbd></code></pre>는 키보드 입력을 정의하기 위한 태그,  <pre><code class="plaintext"><code></code></pre> 태그는 컴퓨터 코드를 정의하기 위한 태그, <pre><code class="plaintext"><samp></code></pre> 태그는 화면 출력 내용을 정의하기 위한 태그.</span></div><div class="clearfix"></div><div class="wiki-category"><h2>관련 문서</h2><ul><li><a href="/w/%ED%98%84%EB%8C%80%20%ED%95%9C%EA%B8%80%20NFC%20%E2%86%94%20NFD%20%EB%B3%80%ED%99%98%20%ED%85%8C%EC%9D%B4%EB%B8%94%2F%E3%85%88">현대 한글 NFC ↔ NFD 변환 테이블/ㅈ</a></li> <li><a href="/w/%ED%98%84%EB%8C%80%20%ED%95%9C%EA%B8%80%20NFC%20%E2%86%94%20NFD%20%EB%B3%80%ED%99%98%20%ED%85%8C%EC%9D%B4%EB%B8%94%2F%E3%85%82">현대 한글 NFC ↔ NFD 변환 테이블/ㅂ</a></li> <li><a href="/w/%ED%98%84%EB%8C%80%20%ED%95%9C%EA%B8%80%20NFC%20%E2%86%94%20NFD%20%EB%B3%80%ED%99%98%20%ED%85%8C%EC%9D%B4%EB%B8%94%2F%E3%85%85">현대 한글 NFC ↔ NFD 변환 테이블/ㅅ</a></li> <li><a href="/w/%ED%98%84%EB%8C%80%20%ED%95%9C%EA%B8%80%20NFC%20%E2%86%94%20NFD%20%EB%B3%80%ED%99%98%20%ED%85%8C%EC%9D%B4%EB%B8%94%2F%E3%84%B7">현대 한글 NFC ↔ NFD 변환 테이블/ㄷ</a></li> <li><a href="/w/%ED%98%84%EB%8C%80%20%ED%95%9C%EA%B8%80%20NFC%20%E2%86%94%20NFD%20%EB%B3%80%ED%99%98%20%ED%85%8C%EC%9D%B4%EB%B8%94%2F%E3%84%B1">현대 한글 NFC ↔ NFD 변환 테이블/ㄱ</a></li> </ul></div>	</div>
    </div>
    <script type="text/javascript">
    	$(".wiki-inner-content").ready(function(){
    		if($("body").hasClass('dark')){
    			$("[data-dark]").each(function(){
    				$(this).css("color", $(this).attr("data-dark"));
    			});
    			$("[data-dark_bg]").each(function(){
    				$(this).css("background-color", $(this).attr("data-dark_bg"));
    			});
    			$("[data-dark_br]").each(function(){
    				$(this).css("border-color", $(this).attr("data-dark_br"));
    			});
    		}
    	});
    </script>
    </article><aside class="sidebar"><div class="card recent-card"><h5 class="card-title">최근 변경</h5><div class="link-table" id="recentChangeTable"><a><span>00:00</span>갱신중...</a></div><a class="more-link" href="/Recent">[더 보기]</a></div><div class="card recent-card"><h5 class="card-title">최근 토론</h5><div class="link-table" id="recentDiscussTable"><a><span>00:00</span>갱신중...</a></div><a class="more-link" href="/RecentDiscuss">[더 보기]</a></div><div style="position: sticky;top: 1rem;"><script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-8464541176962266"     crossorigin="anonymous"></script><ins class="adsbygoogle"     style="display:block"     data-ad-client="ca-pub-8464541176962266"     data-ad-slot="9784810272"     data-ad-format="auto"     data-full-width-responsive="true"></ins><script>     (adsbygoogle = window.adsbygoogle || []).push({});</script></div></aside></div><div class="aside-footer"><button type="button" id="goToTop"><i class="icon ion-arrow-up-c" aria-hidden="true"></i></button><script type="text/javascript"> $(function() { $("#goToTop").on("click", function() { $("html, body").animate({scrollTop:0}, '500'); return false; }); }); </script><footer><center><p><img loading="lazy" alt="더위키 로고" style="border-width: 0;" src="/namuwiki/img/TheWiki_footer.png" width="88px">  |   <img loading="lazy" alt="크리에이티브 커먼즈 라이선스" style="border-width: 0;" src="/namuwiki/cc-by-nc-sa-2.0-88x31.png"></p><p>이 저작물은 <a rel="license" target="_blank" href="//creativecommons.org/licenses/by-nc-sa/2.0/kr/">CC BY-NC-SA 2.0 KR</a> 에 따라 이용할 수 있습니다. (라이선스가 별도로 명시된 경우 제외)<br/>기여하신 문서의 저작권은 각 기여자에게 있으며, 각 기여자는 기여하신 부분의 저작권을 갖습니다.</p></center><br><p style="text-align: right;"><a href="/w/%EB%8D%94%EC%9C%84%ED%82%A4%3A%EA%B0%9C%EC%9D%B8%EC%A0%95%EB%B3%B4%20%EC%B2%98%EB%A6%AC%EB%B0%A9%EC%B9%A8"><b>개인정보 처리방침</b></a><br>Parser "<a href="https://github.com/dercsyong/TheMarkProject" target="_blank">theMark</a>" <a href="https://github.com/dercsyong/TheMarkProject/commit/f50c400057a7cec642eaada5846c6558ed7040f8" style="color:unset;" target="_blank">v1.5.3</a><br>Powered by "<a href="//github.com/dercsyong/TheWiki" target="_blank">더위키</a>" <a href="https://github.com/dercsyong/TheWiki/commit/e37f0935197835b05864ff9eac3b11ae22dd95c5" style="color:unset;" target="_blank">official v5.3.6 22da65f</a></p><br><br><br></footer></div></body></html>