Notice
Recent Posts
Recent Comments
Link
Today
Total
05-17 07:18
Archives
관리 메뉴

Jeongchul Kim

HTML5 08 변화된 태그 본문

Web프로그래밍

HTML5 08 변화된 태그

김 정출 2016. 4. 21. 21:55


HTML5 08 변화된 태그




HTML5에서 변경된 태그

1. 의미가 변경된 태그

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로 업데이트 되면서 단순히 진하게 표시하는 것보다 중요한 정보를 표시할 때 사용해야 한다고 정의하였습니다.


2. <a> 태그 실습


<!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>


3.<address> 태그 실습

<!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>


4. <b> 태그 실습


<!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>


5. <hr>태그 실습


<!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>


6.<i>태그 실습

<!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>


7.<menu>태그 실습


<!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>


8. <small> 태그 실습


<!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>



9. <strong> 태그 실습

<!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문법에서는 더 이상 사용하지 않습니다.






저작자표시

'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
'Web프로그래밍' Related Articles more
Comments