HTML5는 30여개의 새로운 태그가 추가 되었고 CSS로 가능하거나(<font>) 문제가 되는 태그(<frameset>)는 지원하지 않게 되었습니다. 지원이 안된다는 것은 완전히 폐기 되어 기존에 이 태그를 사용한 웹페이지가 엉망이 된다는 것은 아니고 웹브라우저는 지원을 하게 됩니다. 이전부터 사용하지말것을 권장한 것은 CSS로 할 수 있거나 문제가 있는 것으로 반대(Deprecated)의견을 제시한 것이 있고 완전히 폐기(Obsolete)된 것도 있지만 웹브라우저는 계속 지원하는 경향이 있습니다. 표준이 아닌 것으로 됐어도 사용이 가능하다는 것이죠.
태그는 흔히 요소(element)로 사용됩니다. 같은 용어로 사용되기도 하지만 정확히 말하자면 태그안에는 요소가 있고 속성이 있습니다. <h1>태그에서 h1은 요소입니다. 속성은 요소를 새롭게 정의하여 다른 형태로 변경할 수가 있고 CSS의 선택자가 될 수도 있습니다. 예를 들어 img 태그의 alt 속성에 대해 대해 CSS에서 [alt] {color:red;}로 정의하면 이미지의 alt텍스트는 모두 빨간색으로 나옵니다. 이처럼 태그안에는 요소와 속성이 있지만 대부분 태그와 요소를 동의어로 사용합니다.
새로운 태그의 특징은 우선 멀티미디어 지원을 하기 위해 <video>태그와 <audio>태그가 추가 됐습니다. 또한 동양의 글자 표현을 위해 <ruby>, <rp>, <rt>등이 추가 되었습니다. 새로운 태그은 주로 CSS3와 자바스크립트를 이용하여 소기의 목적을 달성하게 됩니다. <canvas>같은 경우는 그래픽을 자유롭게 그려내기 위한 태그인데 자바스크립트를 사용하지 않으면 안됩니다. 자유롭게 사용하기 위해서는 자바스크립트의 해박한 지식이 있어야하죠. 하지만 일정한 규칙이 있기 때문에 많은 지식이 없어도 어느정도의 그래픽을 그릴 수 있게 됩니다. 어떤 태그는 내장된 자바스크립트를 사용하여 표현하기도 합니다. 예를들면 <datalist>태그의 경우 파이어폭스와 오페라만 지원하지만 아주 유용합니다.
위와같이 입력하고 파이어폭스에서 입력란을 클릭하면 아래처럼 옵션리스트가 나옵니다. 위에는 자바스크립트 코드가 전혀 없죠.
또한 <head> 태그에 자바스크립트나 제이쿼리 코드를 삽입하기 위해서 <script type="text/javascropt"></script>를 사용했지만 HTML5에서는 속성을 없애고 <script ></script>처럼 태그만 사용할 수 있습니다.
의미있는 체계적인 코딩을 위해 <header>, <hgroup>, <article>, <section>, <aside>, <footer>라는 태그가 새로 만들어졌습니다. 이들은 예전에는 <div>태그를 사용해서 아이디나 클래스 선택자의 이름으로 사용되는 것들이었습니다. <div>태그는 아무 의미없는 컨테이너에 불과한데 반하여 위와같은 태그는 의미가 있습니다. 이러한 의미는 검색엔진에 도움이 됩니다. 검색엔진은 그동안 <h1>과 같은 헤딩태그와 컨텐트를 중심으로 검색의 포인트를 맞추었지만 이제는 이러한 태그가 중시될 것입니다. 아직은 HTML5가 표준단계가 아니므로 검색엔진이 어떻게 나올지는 모르겠지만 그동안의 행태로 봐서는 중요내용이 들어갈 <header>나 <article>에 촛점이 맞춰질 것으로 생각합니다.
새로운 태그가 등장했지만 기존에 있던 태그도 변화가 있습니다. 태그가 재정의된 것이 있습니다. 즉 기존에는 <i>태그가 <em>태그와 같이 이탤릭체로 표현되기 때문에 코드를 보다 잘 찾기 위해서 눈에 띄는 <em>태그를 사용했죠. 하지만 그 정의가 수정되어 같은 형식의 이탤릭체로 나오지만 <em>태그는 글자의 강조를 위해서 사용하고 <i>태그는 글중에 소리를 나타낸다든가 분위기를 표시하기 위해서 사용한다고 재정의했습니다. 이것은 스크린리더를 사용하는 분들에게는 중요하죠.
태그 사용법에서도 변화가 있습니다. 예를들어 테이블을 만들때 사용하는 <tr>태그는 마감태그인 </tr>을 사용하지 않아도 됩니다. 그동안 HTML4에서도 생략해도 제대로 나왔는데 XHTML의 영향으로 마감태그는 반드시 포함시켜야했죠. HTML5에서도 이를 생략해도 됩니다. 이뿐만 아니라 </td>, </p>의 마감태그도 사용하지 않아도 됩니다. 이들 태그 다음에는 항상 새로시작하는 다른 태그가 있기 때문에 웹브라우저가 생각해서 자동으로 나타내줍니다. 하지만 사용하는 것이 좋습니다. 나만을 위한 코딩이 아니고 팀원과 코딩을 한다거나 이를 생략해도 된다는 것을 모르는 분들에게는 혼란을 일으킬 수 있기 때문이죠. 초보인 분들은 코딩이 잘못돼서 제대로 표시되지 않을때는 이러한 마감태그 하나가 안들어가서 잘못된 줄로 알 수도 있습니다.
HTML5의 코딩은 사실 자유롭습니다. <body>와 <head>태그를 사용하지 않아도 doctype과 meta 태그에서 charset만 선언해도 웹브라우저는 컨텐트를 나타내줍니다.
위처럼 닥타입과 메타태그에서 charset만 있어도 제대로 나옵니다. 하다못해 닥타입 위에 <p>설마 나올까?</p>를 입력해도 잘 나옵니다. 하지만 이런 것은 시험일뿐 제대로된 코딩을 해야겠죠. HTML5는 닥타입 선언도 짧고 자유롭다는 것을 보여주려고 한 것입니다.
지원하지 않는 태그는 <font>, <center>태그와 같이 CSS에서 충분히 소화할 수 있는 태그는 사라졌습니다. 또한 <frameset>도 사라졌죠. 이것은 하나의 웹페이지에 여러개의 웹페이지가 존재하는 것이 되므로 인쇄할때도 문제가 되고 검색엔진 최적화에도 도움이 되지 못합니다. 그래서 레이아웃에서 테이블과 함께 사용하지 말것을 권장한 태그입니다. 테이블 태그는 데이터 나열에서는 아직 유효하고 유용하게 사용됩니다.
아래 표는 테이블 태그로 만들어진 것입니다. 웹디자인을 배울 수 있는 W3C School 의 HTML5 태그에 관한 자료입니다. 태그의 링크를 클릭하면 해당 페이지로 이동하고 상단에서 Traslate를 클릭해서 Korean을 선택하면 한글로도 볼 수가 있어서 웹디자인을 배우는데 최적의 사이트입니다.
<img src=”image.jpg” alt=”My picture” />
태그는 흔히 요소(element)로 사용됩니다. 같은 용어로 사용되기도 하지만 정확히 말하자면 태그안에는 요소가 있고 속성이 있습니다. <h1>태그에서 h1은 요소입니다. 속성은 요소를 새롭게 정의하여 다른 형태로 변경할 수가 있고 CSS의 선택자가 될 수도 있습니다. 예를 들어 img 태그의 alt 속성에 대해 대해 CSS에서 [alt] {color:red;}로 정의하면 이미지의 alt텍스트는 모두 빨간색으로 나옵니다. 이처럼 태그안에는 요소와 속성이 있지만 대부분 태그와 요소를 동의어로 사용합니다.
새로운 태그
새로운 태그의 특징은 우선 멀티미디어 지원을 하기 위해 <video>태그와 <audio>태그가 추가 됐습니다. 또한 동양의 글자 표현을 위해 <ruby>, <rp>, <rt>등이 추가 되었습니다. 새로운 태그은 주로 CSS3와 자바스크립트를 이용하여 소기의 목적을 달성하게 됩니다. <canvas>같은 경우는 그래픽을 자유롭게 그려내기 위한 태그인데 자바스크립트를 사용하지 않으면 안됩니다. 자유롭게 사용하기 위해서는 자바스크립트의 해박한 지식이 있어야하죠. 하지만 일정한 규칙이 있기 때문에 많은 지식이 없어도 어느정도의 그래픽을 그릴 수 있게 됩니다. 어떤 태그는 내장된 자바스크립트를 사용하여 표현하기도 합니다. 예를들면 <datalist>태그의 경우 파이어폭스와 오페라만 지원하지만 아주 유용합니다.
<label> 여행가고 싶은곳은?<br /> <input type="text" name="wishlist" list="tour"> <datalist id="tour"> <option value="Paris"> <option value="Rome"> <option value="New York"> </datalist> </label>
위와같이 입력하고 파이어폭스에서 입력란을 클릭하면 아래처럼 옵션리스트가 나옵니다. 위에는 자바스크립트 코드가 전혀 없죠.
또한 <head> 태그에 자바스크립트나 제이쿼리 코드를 삽입하기 위해서 <script type="text/javascropt"></script>를 사용했지만 HTML5에서는 속성을 없애고 <script ></script>처럼 태그만 사용할 수 있습니다.
의미있는 체계적인 코딩을 위해 <header>, <hgroup>, <article>, <section>, <aside>, <footer>라는 태그가 새로 만들어졌습니다. 이들은 예전에는 <div>태그를 사용해서 아이디나 클래스 선택자의 이름으로 사용되는 것들이었습니다. <div>태그는 아무 의미없는 컨테이너에 불과한데 반하여 위와같은 태그는 의미가 있습니다. 이러한 의미는 검색엔진에 도움이 됩니다. 검색엔진은 그동안 <h1>과 같은 헤딩태그와 컨텐트를 중심으로 검색의 포인트를 맞추었지만 이제는 이러한 태그가 중시될 것입니다. 아직은 HTML5가 표준단계가 아니므로 검색엔진이 어떻게 나올지는 모르겠지만 그동안의 행태로 봐서는 중요내용이 들어갈 <header>나 <article>에 촛점이 맞춰질 것으로 생각합니다.
새로운 태그가 등장했지만 기존에 있던 태그도 변화가 있습니다. 태그가 재정의된 것이 있습니다. 즉 기존에는 <i>태그가 <em>태그와 같이 이탤릭체로 표현되기 때문에 코드를 보다 잘 찾기 위해서 눈에 띄는 <em>태그를 사용했죠. 하지만 그 정의가 수정되어 같은 형식의 이탤릭체로 나오지만 <em>태그는 글자의 강조를 위해서 사용하고 <i>태그는 글중에 소리를 나타낸다든가 분위기를 표시하기 위해서 사용한다고 재정의했습니다. 이것은 스크린리더를 사용하는 분들에게는 중요하죠.
태그 사용법에서도 변화가 있습니다. 예를들어 테이블을 만들때 사용하는 <tr>태그는 마감태그인 </tr>을 사용하지 않아도 됩니다. 그동안 HTML4에서도 생략해도 제대로 나왔는데 XHTML의 영향으로 마감태그는 반드시 포함시켜야했죠. HTML5에서도 이를 생략해도 됩니다. 이뿐만 아니라 </td>, </p>의 마감태그도 사용하지 않아도 됩니다. 이들 태그 다음에는 항상 새로시작하는 다른 태그가 있기 때문에 웹브라우저가 생각해서 자동으로 나타내줍니다. 하지만 사용하는 것이 좋습니다. 나만을 위한 코딩이 아니고 팀원과 코딩을 한다거나 이를 생략해도 된다는 것을 모르는 분들에게는 혼란을 일으킬 수 있기 때문이죠. 초보인 분들은 코딩이 잘못돼서 제대로 표시되지 않을때는 이러한 마감태그 하나가 안들어가서 잘못된 줄로 알 수도 있습니다.
HTML5의 코딩은 사실 자유롭습니다. <body>와 <head>태그를 사용하지 않아도 doctype과 meta 태그에서 charset만 선언해도 웹브라우저는 컨텐트를 나타내줍니다.
<.!D0CTYPE. html> <.meta charset="utf-8" /> <.label> 여행가고 싶은곳은?
<.input type="text" name="wishlist" list="tour"> <.datalist id="tour"> <.option value="Paris"> <.option value="Rome"> <.option value="New York"> <./datalist> <./label>
위처럼 닥타입과 메타태그에서 charset만 있어도 제대로 나옵니다. 하다못해 닥타입 위에 <p>설마 나올까?</p>를 입력해도 잘 나옵니다. 하지만 이런 것은 시험일뿐 제대로된 코딩을 해야겠죠. HTML5는 닥타입 선언도 짧고 자유롭다는 것을 보여주려고 한 것입니다.
지원하지 않는 태그
지원하지 않는 태그는 <font>, <center>태그와 같이 CSS에서 충분히 소화할 수 있는 태그는 사라졌습니다. 또한 <frameset>도 사라졌죠. 이것은 하나의 웹페이지에 여러개의 웹페이지가 존재하는 것이 되므로 인쇄할때도 문제가 되고 검색엔진 최적화에도 도움이 되지 못합니다. 그래서 레이아웃에서 테이블과 함께 사용하지 말것을 권장한 태그입니다. 테이블 태그는 데이터 나열에서는 아직 유효하고 유용하게 사용됩니다.
아래 표는 테이블 태그로 만들어진 것입니다. 웹디자인을 배울 수 있는 W3C School 의 HTML5 태그에 관한 자료입니다. 태그의 링크를 클릭하면 해당 페이지로 이동하고 상단에서 Traslate를 클릭해서 Korean을 선택하면 한글로도 볼 수가 있어서 웹디자인을 배우는데 최적의 사이트입니다.
| 태그 | 설명 |
|---|---|
| <!--...--> | 주석을 정의합니다. |
| <!DOCTYPE> | document type을 정의합니다. |
| <a> | hyperlink를 정의합니다. |
| <abbr> | abbreviation(생략)을 정의합니다. |
| <acronym> | HTML5에서 지원되지 않습니다. |
| <address> | 문서나 Article의 저작자나 소유자의 연락 정보를 정의합니다. |
| <applet> | HTML5에서 지원되지 않습니다. |
| <area> | 이미지맵안의 영역을 정의합니다. |
| <article>New | Article을 정의합니다. |
| <aside>New | 메인 컨텐트의 2차적 컨텐트입니다. |
| <audio>New | 음향컨텐트를 정의합니다. |
| <b> | 텍스트를 굵게 정의합니다. |
| <base> | 문서내의 모든 상대적 URL에 대해서 기준이 되는 URL이나 타겟을 특정합니다. |
| <basefont> | HTML5에서 지원되지 않습니다. |
| <bdi>New | 글자의 진행방향이 다른 부분(아랍어)을 격리시켜 함께 있는 글자들과 어울리게 합니다. |
| <bdo> | 현재 글자 진행방향을 재정의합니다. |
| <big> | HTML5에서 지원되지 않습니다. |
| <blockquote> | 다른 부분에서 인용된 부분을 정의합니다. |
| <body> | 문서의 body를 정의합니다. |
| <br> | 줄바꿈을 정의합니다. |
| <button> | 클릭가능한 버튼을 정의합니다. |
| <canvas>New | 주로 자바스크립트를 이용하여 그래픽을 만듭니다. |
| <caption> | 테이블 켑션을 정의합니다. |
| <center> | HTML5에서 지원되지 않습니다. |
| <cite> | 작품의 제목을 정의합니다. |
| <code> | 모노스페이스 폰트로 컴퓨터 코드를 정의합니다. |
| <col> | <colgroup> 요소 안의 각 컬럼 속성을 정의합니다. |
| <colgroup> | 테이블의 하나이상의 컬럼에 대해서 그룹화시킵니다. |
| <command>New | 현재 IE9에서만 지원하고 있는 태그로 명령 버튼을 만듭니다. |
| <datalist>New | 현재 파이어폭스와 오페라 브라우저에서만 지원되는 태그로 미리 정의된 옵션 리스트를 만듭니다. |
| <dd> | definition list의 항목에 대해서 세부설명에 관해서 정의합니다. |
| <del> | 문서에서 제거된 텍스트에 대해서 정의합니다. |
| <details>New | 사용자에게 보이거나 안보이게 할 수 있는 옵션을 제공합니다. |
| <dfn> | definition term을 정의합니다. |
| <dir> | HTML5에서 지원되지 않습니다. |
| <div> | 문서에서 일반적인 컨테이너 역할을 합니다. |
| <dl> | definition list를 정의합니다. |
| <dt> | definition list의 아이템에 대해서 정의합니다. |
| <em> | 강조 텍스트를 정의합니다. |
| <embed>New | 외부 애플리케이션이나 인터렉티브 컨텐트(플러그인)의 컨테이너입니다. |
| <fieldset> | form안의 연관있는 요소를 그룹화합니다. |
| <figcaption>New | figure 요소의 캡션을 정의합니다. |
| <figure>New | 이미지태그와 같은 요소를 정의합니다. |
| <font> | HTML5에서 지원되지 않습니다. |
| <footer>New | 문서의 footer를 정의합니다. |
| <form> | 사용자 입력가능한 form에 대해 정의합니다. |
| <frame> | HTML5에서 지원되지 않습니다. |
| <frameset> | HTML5에서 지원되지 않습니다. |
| <h1> to <h6> | 제목글자를 정의합니다. |
| <head> | 문서내의 정보에 대해 정의합니다. |
| <header>New | 문서나 섹션의 헤더에 대해 정의합니다. |
| <hgroup>New | h1~h6 요소를 그룹화합니다. |
| <hr> | 컨텐트의 전환을 위한 수평선을 만듭니다. |
| <html> | HTML 문서의 루트입니다. |
| <i> | 텍스트의 일부분에 대해서 음성이라거나 어떤 분위기라는 것을 표시합니다. |
| <iframe> | 인라인 프레임에 대해 정의합니다. |
| <img> | 이미지에 대해 정의합니다. |
| <input> | form입력부분에 대해 정의합니다. |
| <ins> | 문서에 삽입된 텍스트에 대해 정의합니다. |
| <keygen>New | form의 암호화 키를 생성합니다. |
| <kbd> | 키보드 입력을 정의합니다 |
| <label> | 입력요소의 레이블을 정의합니다. |
| <legend> | fieldset, figure, details 요소의 캡션을 정의합니다. |
| <li> | 목록 아이템을 정의합니다. |
| <link> | 문서와 외부 소스의 관계를 정의합니다. |
| <map> | 사용자측 이미지맵을 정의합니다. |
| <mark>New | 마크되거나 하이라이트된 텍스트를 정의합니다. |
| <menu> | command의 목록이나 메뉴를 정의합니다. |
| <meta> | HTML 문서의 메타데이터를 정의합니다. |
| <meter>New | 숫자로 표시된 내용을그래픽 게이지로 표시합니다. |
| <nav>New | 내비게이션 링크를 정의합니다. |
| <noframes> | HTML5에서 지원되지 않습니다. |
| <noscript> | 사용자측 스크립트를 지원하지 않는 컨텐트에 대해서 대체 텍스트를 정의합니다. |
| <object> | 임베디드 오브젝트를 정의합니다. |
| <ol> | 일정한 순서대로 나열된 목록을 정의합니다. |
| <optgroup> | 드랍다운 목록에서 옵션항목의 그룹을 정의합니다. |
| <option> | 드랍다운 목록의 옵션항목을 정의합니다. |
| <output>New | 계산 결과를 정의합니다. |
| <p> | 단락을 정의합니다. |
| <param> | 오브젝트의 파라미터를 정의합니다. |
| <pre> | 이미 포맷된 텍스트를 보존합니다. |
| <progress>New | 작업의 진행내역을 애니메이션 그래픽으로 표시합니다. |
| <q> | 짧은 인용을 정의합니다. |
| <rp>New | Ruby언어의 주석을 브라우저에서 지원하지 않는 경우 표시할 내용을 정의합니다. |
| <rt>New | 동아시아 글자의 설명이나 발음을 정의합니다. |
| <ruby>New | 동아시아 글자의 루비 언어 주석을 정의합니다. |
| <s> | 텍스트 내부에 수평줄을 그어(strike) 수정된 택스트를 정의합니다. |
| <samp> | 컴퓨터 프로그램의 결과 샘플을 정의합니다. |
| <script> | 사용자측 스크립트를 정의합니다. |
| <section>New | 문서의 섹션을 정의합니다. |
| <select> | 드랍다운 목록을 정의합니다. |
| <small> | 작은 텍스트를 정의합니다. |
| <source>New | video, audio 등 멀티미디어요소의 리소스를 정의 합니다. |
| <span> | 문서의 인라인 요소 부분을 정의합니다. |
| <strike> | HTML5에서 지원되지 않습니다. |
| <strong> | 중요한 텍스트를 정의합니다. |
| <style> | 문서의 CSS정보를 정의합니다. |
| <sub> | 보통의 글자보다 작고 아래에 위치한 글자를 정의합니다. |
| <summary>New | details 요소의 보이는 제목부분을 정의합니다. |
| <sup> | 보통의 글자보다 작고 줄의 상단에 위치한 글자를 정의합니다. |
| <table> | 테이블을 정의합니다. |
| <tbody> | 테이블 바디의 컨텐트를 정의합니다. |
| <td> | 테이블 셀을 정의합니다. |
| <textarea> | form입력부분의 textarea를 정의합니다. |
| <tfoot> | table의 footer를 정의합니다. |
| <th> | table의 제목셀을 정의합니다. |
| <thead> | table의 제목 컨텐트를 정의합니다. |
| <time>New | 날짜와 시간을 정의합니다. |
| <title> | 문서의 타이틀을 정의합니다. |
| <tr> | table의 행을 정의합니다. |
| <track>New | media 요소(video, audio)의 텍스트 트랙을 정의합니다. |
| <tt> | HTML5에서 지원되지 않습니다. |
| <u> | HTML5에서 지원되지 않습니다. |
| <ul> | 순서가 없는 목록을 정의합니다. |
| <var> | 변수를 정의합니다. |
| <video>New | 동영상이나 영화를 정의합니다. |
| <wbr>New | 단어가 긴 경우 줄바뀔때 단어가 끊어질 수 있도록 합니다. |
더보기
'부트스트랩.CSS.JS/CSS기초' 카테고리 관련글
