HTML5 08 변화된 태그 HTML5에서 변경된 태그 HTML5에서 변경된 태그 기존 HTML버전에서의 태그 중 HTML5가 등장하면서 의미가 변경된 태그가 있습니다. 의미가 변경되었다고 하여 코드의 구조나 결과화면이 변경된 것은 아닙니다. 단지 태그의 속성에 변화를 주어 사용자가 쉽게 코드를 작성할 수 있거나, 조금 더 넓은 의미로 변경된 것뿐이죠. 그럼 기존 태그의 의미와 변경된 태그의 의미를 비교해보면서 어떤 차이가 있는지 살펴보도록 하겠습니다. 먼저 <a>태그 부터 살펴보도록 하겠습니다. HTML4에서 <a>태그는 href=“#” 또는 href=“javascript:;”로 지정해야 널 링크로 사용할 수 있었지만, HTML5 에서는 href 속성 없이 사용해도 널 링크로 사용할 수 있게 되었습니다. <address>태그는 기존 HTML4에서는 주로 이름이나 이메일 주소, 전화번호 등과 같은 제작자에 대한 정보를 표시하는 역할을 했었지만, HTML5로 업데이트 되면서 실제 우편물 주소를 표시할 때 사용하는 태그로 변경되었습니다. <b>태그는 “굵게, 진하게”를 의미하는 Bold의 약어로 HTML4에서는 텍스트르 진하게 표시할 때 사용하였으나, HTML5로 업데이트가 되고 나서는 기존 텍스트를 진하게 표시할 때 사용할 뿐만 아니라, 제품 소개서 안에 들어가는 제품명이나 요약문서 안의 키워드처럼 특별하게 중요하지는 않지만 진하게 표시하고 싶을 때 사용됩니다. <hr>태그는 HTML4에서는 가로줄을 표시할 때 사용하도록 정의되었습니다. 하지만 HTML5로 업데이트가 되면서 단락 단위로 주제를 바꾸고자 할 때 사용하도록 정의되었죠. <i>태그는 italic의 약어로 텍스트를 약간 오른쪽으로 기울어진 모양으로 보이도록 하는 태그입니다. 그러나, HTML5로 업데이트 되면서 기울임체 적용뿐만 아니라 중요한 정보가 들어 있지 않은 주변 콘텐츠로부터 텍스트를 따로 표시할 때 사용하도록 정의되었습니다. <menu>태그는 HTML4에서 목록과 메뉴를 정의할 때 사용하나 W3C에서는 사용을 하지 않도록 권고되었던 태그였습니다. 하지만 HTML5로 업데이트 되면서 컨텐츠의 메뉴, 도구 모음 및 양식 컨트롤과 같이 실제 문서 메뉴 정보를 제공하는데 사용되도록 의미가 변경되었습니다. <small> 태그는 HTML4에서 작은 글자로 표시하는 태그에 불과했습니다. 하지만 HTML5로 업데이트 되면서 세부 주석이나, 법적 인쇄문서의 작은 인쇄 정보를 표시할 때 사용되도록 의미가 변경되었죠. 마지막으로 <strong> 태그는 기존 HTML4에서만 해도 단순 글자를 강조할 때 사용한다라고 정의되어 있었습니다. 하지만 HTML5로 업데이트 되면서 단순히 진하게 표시하는 것보다 중요한 정보를 표시할 때 사용해야 한다고 정의하였습니다. <!doctype html> <head> <meta charset="UTF-8"> <mce:script src="//html5shiv.googlecode.com/svn/trunk/html5.js" mce_src="https://html5shiv.googlecode.com/svn/trunk/html5.js"></mce:script> <title>a 태그 실습예제</title> </head> <body> <h1>a 태그 실습하기!!!</h1> <ul> <li><a href="http://www.google.com">구글</a></li> <li><a href="http://www.naver.com">네이버</a></li> </ul> </body> </html> <!doctype html> <head> <meta charset="UTF-8"> <mce:script src="//html5shiv.googlecode.com/svn/trunk/html5.js" mce_src="https://html5shiv.googlecode.com/svn/trunk/html5.js"></mce:script> <title>address 태그 실습예제</title> </head> <body> <h1>address 태그 실습하기!!!</h1> <address> Written by <a href="mailto:webmaster@example.com">Jon Doe</a>.<br> Visit us at:<br> Example.com<br> Box 564, Disneyland<br> USA </address> </body> </html> <!doctype html> <head> <meta charset="UTF-8"> <mce:script src="//html5shiv.googlecode.com/svn/trunk/html5.js" mce_src="https://html5shiv.googlecode.com/svn/trunk/html5.js"></mce:script> <title>b 태그 실습예제</title> </head> <body> <h1>b 태그 실습하기!!!</h1> <p>This is normal text - <b>and this is bold text</b>.</p> </body> </html> <!doctype html> <head> <meta charset="UTF-8"> <mce:script src="//html5shiv.googlecode.com/svn/trunk/html5.js" mce_src="https://html5shiv.googlecode.com/svn/trunk/html5.js"></mce:script> <title>hr 태그 실습예제</title> </head> <body> <h1>hr 태그 실습하기!!!</h1> <p>HTML is a language for describing web pages.....</p> <hr> <h1>CSS</h1> <p>CSS defines how to display HTML elements.....</p> </body> </html> <!doctype html> <head> <meta charset="UTF-8"> <mce:script src="//html5shiv.googlecode.com/svn/trunk/html5.js" mce_src="https://html5shiv.googlecode.com/svn/trunk/html5.js"></mce:script> <title>i 태그 실습예제</title> </head> <body> <h1>i 태그 실습하기!!!</h1> <p>He named his car <i>The lightning</i>, because it was very fast.</p> </body> </html> <!doctype html> <head> <meta charset="UTF-8"> <mce:script src="//html5shiv.googlecode.com/svn/trunk/html5.js" mce_src="https://html5shiv.googlecode.com/svn/trunk/html5.js"></mce:script> <title>menu 태그 실습예제</title> </head> <body> <h1>menu 태그 실습하기!!!</h1> <menu type="toolbar"> <li> <menu label="File"> <button type="button" onclick="new()">New...</button> <button type="button" onclick="save()">Save...</button> </menu> </li> <li> <menu label="Edit"> <button type="button" onclick="cut()">Cut...</button> <button type="button" onclick="copy()">Copy...</button> <button type="button" onclick="paste()">Paste...</button> </menu> </li> </menu> </body> </html> <!doctype html> <head> <meta charset="UTF-8"> <mce:script src="//html5shiv.googlecode.com/svn/trunk/html5.js" mce_src="https://html5shiv.googlecode.com/svn/trunk/html5.js"></mce:script> <title>small 태그 실습예제</title> </head> <body> <h1>small 태그 실습하기!!!</h1> <p>W3Schools.com - the world's largest web development site.</p> <p><small>Copyright 1999-2050 by Refsnes Data</small></p> </body> </html> <!doctype html> <head> <meta charset="UTF-8"> <mce:script src="//html5shiv.googlecode.com/svn/trunk/html5.js" mce_src="https://html5shiv.googlecode.com/svn/trunk/html5.js"></mce:script> <title>strong 태그 실습예제</title> </head> <body> <h1>strong 태그 실습하기!!!</h1> <p>W3Schools.com - the world's largest web development site.</p> <p><strong>Copyright 1999-2050 by Refsnes Data</strong></p> </body> </html> HTML5에서 중단된 태그 HTML5에서 중단된 태그 HTML5가 등장하면서 기존에 사용하던 태그들 중에는 중단된 태그들이 생겨났습니다. 대표적으로 다음과 같이 basefont, big, center, font, frame, flameset, noframes, s, strike, tt, u태그가 해당되는데, 이 태그들의 공통점은 CSS로 대체할 수 있는 태그들입니다. 그렇기 때문에 HTML5에서는 더 이상 사용을 권장하지 않습니다. 하지만 현 시점에서 HTML5로 작성되지 않은 문서들이 많기 때문에, 브라우저에서는 계속 지원되고 있습니다. 이 뿐만 아니라 다른 태그들과 함께 사용하면서 혼란을 야기하는 태그 또한 HTML5에서 제외되었습니다. 축약어를 나타낼 때 사용되던 <acronym>태그는 약어 태그인 <abbr>태그로 대체되었고, <applet>과 <isindex> 그리고 <dir>은 각각 <object>, 폼양식, <ul>태그로 대체되었으며, <noscript>태그는 아직 HTML문법에서는 사용되지만, XML문법에서는 더 이상 사용하지 않습니다. 1. 의미가 변경된 태그
2. <a> 태그 실습
3.<address> 태그 실습
4. <b> 태그 실습
5. <hr>태그 실습
6.<i>태그 실습
7.<menu>태그 실습
8. <small> 태그 실습
9. <strong> 태그 실습
'Web프로그래밍' 카테고리의 다른 글
| CSS 01 CSS의 개요 (0) | 2016.04.26 |
|---|---|
| HTML5 09 W3C HTML 웹 표준 및 간단한 웹 페이지 만들기 (0) | 2016.04.21 |
| HTML5 07 추가 태그 (0) | 2016.04.21 |
| HTML5 06 시맨틱 태그 - 입력 양식 및 공간 분할 (0) | 2016.04.21 |
| HTML5 05 시맨틱 태그 - 이미지, 비디오, 오디오 (0) | 2016.04.20 |
