html Refer

HTML 웹표준/웹접근성/웹호환성

시멘틱 태그(Semantics)

시맨틱 태그에 의해 컴퓨터가 HTML 요소의 의미를 보다 명확히 해석하고 그 데이터를 활용할 수 있는 시맨틱 웹이 실현될 수 있다. 시맨틱 웹이란 웹이 존재하는 수많은 웹페이지들에 메타데이터를 부여하여 기존의 잡다한 데이터 집합이었던 웹페이지를 의미와 관련성을 가지는 거대한 데이터 베이스로 구축하고자 하는 발상이다.

종류

종류	설명
<header>	<header> 요소는 소개 및 탐색에 도움을 주는 콘텐츠를 나타냅니다. 제목, 로고, 검색 폼, 작성자 이름 등의 요소도 포함할 수 있습니다.
<nav>	<nav> 요소는 문서의 부분 중 현재 페이지 내, 또는 다른 페이지로의 링크를 보여주는 구획을 나타냅니다. 자주 쓰이는 예제는 메뉴, 목차, 색인입니다.
<main>	<main> 요소는 문서 <body>의 주요 콘텐츠를 나타냅니다. 주요 콘텐츠 영역은 문서의 핵심 주제나 앱의 핵심 기능에 직접적으로 연결됐거나 확장하는 콘텐츠로 이루어집니다.
<section>	<section> 요소는 HTML 문서의 독립적인 구획을 나타내며, 더 적합한 의미를 가진 요소가 없을 때 사용합니다.
<aside>	<aside> 요소는 문서의 주요 내용과 간접적으로만 연관된 부분을 나타냅니다. 주로 사이드바 혹은 콜아웃 박스로 표현합니다.
<article>	<article> 요소는 문서, 페이지, 애플리케이션, 또는 사이트 안에서 독립적으로 구분해 배포하거나 재사용할 수 있는 구획을 나타냅니다.
<footer>	<footer> 요소는 가장 가까운 구획 콘텐츠나 구획 루트의 푸터를 나타냅니다. 일반적으로 구획의 작성자, 저작권 정보, 관련 문서 등의 내용을 담습니다.

HTML5에서 없어진 태그

: CSS가 있기 때문에 폐기(CSS의 color, font-family, font-size 대체)
<center>: CSS가 있기 때문에 폐기(CSS의 text-align: center;, margin:0 auto; 대체)
<basefont>: CSS가 있기 때문에 폐기(CSS의 font-family, font-size 대체)
<applet>: Java Applet을 넣을 때 쓰는 태그(HTML의 <object>,<embed> 대체)
<strike>: HTML의 <del>,<s> 대체
<frame>, <frameset>, <noframes>: HTML의 <iframe>으로 비슷하게 가능
<acronym>: HTML의 <abbr> 대체
<dir>: HTML의 <ul> 대체
: CSS가 있기 때문에 폐기(CSS의 white-space: nowrap; 대체)
<marquee>: 익스플로러에서 글자가 흐르게 하는 태그(JavaScript의 Animation 대체)
<blink>: 넷스케이프에서 글자를 깜빡이게 하는 태그(JavaScript의 Animation 대체)
<bgsound>: 익스플로러에서 배경음악을 재생시키는 태그(HTML의 <audio> 대체)

HTML5에서 의미가 변경된 태그

<a>: href="#" 또는 "JavaScript:;"로 지정해야 널 링크로 사용할 수 있음
-> href 속성 없이 사용해도 널 링크로 사용할 수 있음
<address>: 이름이나 이메일 주소, 전화번호 등 제작자에 대한 정보를 표시
-> 실제 우편물 주소를 표시
: 텍스트를 진하게 표시 -> 특별하게 중요하지는 않지만 진하게 표시하려고 할 떄 사용
<hr>: 가로줄을 표시할 때 사용 -> 단락 단위로 주제를 바꾸려고 할 떄 사용
: 텍스트를 기울어지게 표시하려고 -> 중요할 정보를 기울어지게 표시하려고 할 떄 사용
<menu>: 목록과 메뉴를 정의할 떄 사용 -> 실제 문서 메뉴 정보를 제공하는데 사용
: 작은 글자로 표시하려고 -> 세부 주석이나 법적 인쇄문서에서 작은 인쇄 정보를 표시할 떄 사용
: 글자를 강조할 떄 사용 -> 중요할 정보를 진하게 표시하려고 할 떄 사용