경고 : 최신판이 아닙니다. 이 문서의 오래된 판을 편집하고 있습니다. 이것을 저장하면, 이 판 이후로 바뀐 모든 편집이 사라집니다. 로그인하고 있지 않습니다. 편집하면 당신의 IP 주소가 공개적으로 기록됩니다. 계정을 만들고 로그인하면 편집 시 사용자 이름만 보이며, 위키 이용에 여러 가지 편의가 주어집니다.스팸 방지 검사입니다. 이것을 입력하지 마세요![[파일:HTML5 logo and wordmark.svg|200픽셀|섬네일|HTML5]] == 개요 == [[2008년]] [[1월]]부터 논의가 시작된 버전으로, XHTML에서 다시 HTML로 회귀하게 되었다. 따라서 HTML5는 XHTML의 상위 버전이 아니라, HTML4.01의 상위 버전이다. [[플래시]]나 [[실버라이트]] 등의 [[플러그인]]을 기반으로 하는 [[인터넷]] [[앱]]에 대한 필요성을 줄이는 것에 초점을 맞추고 있다. == 설명 == 지지리도 안 지켜지던 [[웹표준]]에 새로운 바람을 불게 했으며, 단순히 '코더'라고 불리던 HTML 개발자들의 이미지를 바꾸어 줄 만큼 좋은 녀석이다. 이전에는 자바스크립트를 사용해서 엄청나게 긴 코드를 써야만 했던걸 간단한 단어 몇 개로 구현해낼 수 있고, 불필요하게 길게 적어야 했던 이전 버전에서 꼭 필요한 부분만 남기도록 개선되었다. 반면, 세간에 성능이 과장되게 알려진 감이 있는데, 일반적인 인식과는 달리 [[액티브X]], [[어도비 플래시|플래시]], [[실버라이트]], [[자바]], [[자바스크립트]]의 '''극히 일부분'''밖에 대체하지 못한다. 저 "일부분"이라고 하는 게 <nowiki><video></nowiki>태그 같은 건데, 그나마도 영상을 표시만 하지 저기다가 뭔가 컨트롤 같은 걸 좀 붙이려고 하면 다시 자바스크립트가 동원되어야 한다<ref>그냥 태그만 쓰면 브라우저에서 <del>뭔가 안쓰러운지</del> 기본적인 컨트롤을 제공해주기는 한다.</ref> 애초에 HTML5의 기능이라고 알려진 것 중 상당수가 자바스크립트를 끌어와서 쓰는 것이다. HTML5의 목적은 저것들을 완전히 대체하는 것이 아니라, 기술의 발전에 표준이 못 따라가다보니 발생한 각종 비표준 코드에서 사용하던 기능들을 수용할 수 있도록 그 판을 넓혀 놓은 것이다. 단순한 경쟁자라기보단, 상호 보완적인 관계라고 보는 것이 맞다. <del>그리고 여기까지 읽었다면 감 잡았겠지만 이제 자바스크립트 못 하면 어디가서 코더 소리 듣기도 힘들어진다는 얘기도 된다.</del> 인터넷 익스플로러는 9부터 지원한다. 8 이하를 지원하려면 html5shiv.js 라는 자바스크립트를 이용하면 된다. 단 이 경우 자바스크립트를 사용하기에 페이지 렌더링 속도가 느려진다는 단점이 있다. == 변경사항 == HTML5로 접어들어 HTML이 다양한 기능을 포함하면서 새롭게 추가된 태그들과 의미가 변경된 태그들이 여럿 있다. === 선언문 === 이전 버전의 HTML과 XHTML이 유효성 검사를 위한 선언문이 쓸데없이 길었던 반면, HTML5에서는 간단하게 몇 자만 적으면 된다. <source lang="html5"><!DOCTYPE html></source> === 시맨틱 태그 === 기존 웹 표준에서는 <nowiki><div></nowiki> 태그를 잔뜩 사용하여 화면을 분할, 여러 가지 레이아웃을 만들어냈지만, HTML5에서는 [[시맨틱 웹]]을 중요시하여 여러 가지 태그를 새롭게 만들었다. 이러한 태그들을 '''시맨틱 태그'''라고 한다. 사용방법은 기존의 <nowiki><div></nowiki> 태그와 차이가 없으나, 시맨틱 태그를 사용한 레이아웃은 컴퓨터가 읽어낼 수 있다. 이게 무슨 말이냐면, 검색 사이트에서 어디가 내용인지를 알 수 있어서 검색 노출을 용이하게 하고, '''궁극적으로 [[시각장애인|눈으로 페이지를 볼 수 없는 사람들]]에게 사이트의 어디가 본문인지 아닌지 알려줄 수 있다는 장점이 있다.''' ==== 레이아웃 태그 ==== * <nowiki><header></nowiki> 일반적으로 페이지나 해당 섹션의 가장 윗부분에 위치한다. 페이지 맨 위에 쓸 때는 사이트의 제목이 보통 들어가며, 선택적으로 상단바나 검색창 등이 안에 들어갈 수 있다. <nowiki><head></nowiki> 태그랑 헷갈리면 매우 곤란하다. section이나 article, aside 등으로 묶어놓은 섹션 안의 헤더 용도로 사용해도 된다. 이건 아래 footer 태그도 마찬가지다. * <nowiki><nav></nowiki> 내비게이션('''nav'''igation)의 약자로, 일반적으로 상단바 등 사이트를 안내하는 요소에 사용된다. 보통은 안에 <nowiki><ul></nowiki>을 넣어 목록 형태로 사용한다. * <nowiki><article></nowiki> 웹 페이지의 내용에 사용하는 태그이다. 문서나 페이지, 사이트에서 독립적으로 배포 혹은 재사용(예를 들어 투고 같은)할 수 있는 섹션에 사용한다. * <nowiki><section></nowiki> 웹 페이지의 섹션에 사용하는 태그이다. 웹 페이지를 의미적으로 각각의 파트로 구분하기 위해 쓰는 태그이다. 이 태그를 사용하면 검색엔진이 긁어가지 않는다는 이야기가 있는데 루머다. [http://html5.clearboth.org/sections.html HTML5 표준 문서]에 보면 "요소의 내용을 배포(syndicate)해도 이치에 맞다면 section 요소 대신 article 요소를 사용하기를 권합니다."라는 부분이 있는데, 이 부분의 해석이 잘못 퍼진 것으로 추정된다. * <nowiki><aside></nowiki> 본문의 주요 부분을 표시하고 남은 부분을 설명하는 태그이다. 특별한 일이 아니면 사이드바나 광고창 등 중요하지 않은 부분에 사용된다. * <nowiki><footer></nowiki> 일반적으로 페이지나 해당 파트의 가장 아랫부분에 위치한다. 페이지 맨 아래에 쓸 때는 사이트의 [[라이선스]], 주소, 연락처 등을 넣는다. ===== 예시 ===== 레이아웃 태그를 사용한 HTML5 마크업의 기초 뼈대는 다음과 같다. <source lang="html5"> <!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> <section> <article> <p>[본문 내용]</p> </article> <section> <aside> [사이드바 내용] </aside> <footer> <address>[주소 내용]</address> </footer> </body> </html> </source> ==== 멀티미디어 태그 ==== * <nowiki><audio></nowiki> 음성, 음악 파일 등을 재생할 수 있는 태그. [[웹 브라우저]]마다 지원하는 확장자가 달라<ref>이는 이런저런 [[어른의 사정]] 때문에 빚어진 현상. video 태그는 더 심하다.</ref> 멀티브라우저 지원을 위해서는 <nowiki><source></nowiki> 태그를 안에 넣어 두 가지 이상의 확장자를 가진 음악 파일을 넣어야 한다. 가장 많이 사용하는 조합은 [[MP3|mp3]]+[[OGG|ogg]] * <nowiki><video></nowiki> 영상 파일을 재생할 수 있는 태그. 사실상 HTML5에서 가장 주목받는 태그이다. 별다른 [[플러그인]] 없이도 자체 재생이 가능하다는 점이 가장 큰 장점이다. <nowiki><audio></nowiki> 태그와 마찬가지로 <nowiki><source></nowiki> 태그를 넣어 [[MP4|mp4]]+[[OGG|ogv]]의 조합으로 짜주면 거의 대부분의 브라우저를 지원한다. * <nowiki><canvas></nowiki> 스크립트를 이용하여 그래픽을 표현하는 태그이다. 일반적으로는 [[자바스크립트]]를 많이 사용하며, 응용하면 웹에서 [[게임]] [[앱]], 3D 엔진 등을 돌리는 다양한 응용이 가능하다. ==== 폼 관련 ==== * <nowiki><output></nowiki> 고정값을 전송하는 데에 쓰인다. * <nowiki><input></nowiki> 내 요소 - date, datetime, time, color, range 등 자바스크립트를 통해서만 구현됐던 기능이 내장되었다. 하지만 현 시점에서는 [[오페라(웹 브라우저)|오페라]]만 완전 지원한다. ==== 기타 태그 ==== * <nowiki><menu></nowiki> 툴바, 팝업 메뉴를 넣을 때 쓴다. * <nowiki><menuitem></nowiki> 툴바, 팝업 메뉴의 각 항목을 정의한다. * <nowiki><datalist></nowiki> * <nowiki><details></nowiki> * <nowiki><embed></nowiki> object 태그보다 쓰기 쉬워서 널리 쓰였으나 표준이 아니었는데 HTML5에서 표준으로 포함되었다. object가 iframe처럼 웹 페이지도 포함할 수 있는 것과 달리, 플러그인 요소만을 포함할 수 있다. 다만 실제로 이걸 지키는 브라우저는 [[파이어폭스]]밖에 없다.(...) * <nowiki><figure></nowiki> 그림, 도표, 다이어그램 등의 글의 이해를 돕기 위한 내용들을 나타내는 태그이다. * <nowiki><figcaption></nowiki> <nowiki><figure></nowiki> 태그 안에 사용되는 태그로, <nowiki><figure></nowiki> 태그 안에 있는 내용의 설명을 적는 태그이다. * <nowiki><hr></nowiki> 원래 단순한 가로줄을 나타내는 태그였으나, 페이지의 주제가 바뀔 때 내용을 분리시키는 의미가 HTML5에서 추가되었다. ==== 용도가 바뀐 태그 ==== * <nowiki><s></nowiki> 더이상 옳거나 정확하거나 적절하지 않은 내용을 나타내는 데에 쓴다. * <nowiki><u></nowiki> 양식상 일반적인 텍스트보다 돋보여야 할때 쓴다. 예를 들어 철자가 틀린 단어 등이 있다. * <nowiki><i></nowiki> 어떠한 이유로 일반적인 텍스트보다 돋보여야 할때 쓴다. 예를 들어 전문 용어, 외국어의 구절 등이 있다. 더 적절한 시맨틱 태그가 있을 경우 그쪽을 쓴다. ==== 사용 불가 태그 ==== 대개 [[시맨틱 웹]]에서 사용을 지양하는 태그라든가, 특정 브라우저<del>[[IE]]라든가 IE라든가 IE라든가</del>에서만 작동하는 태그가 속한다. * '''<nowiki><font></nowiki> → [[CSS|CSS]]가 있기 때문에 폐기.''' * <nowiki><strike></nowiki> → <nowiki><s>, <del></nowiki>로 대체되었다. * <nowiki><acronym></nowiki> → <nowiki><abbr></nowiki>로 대체되었다. * <nowiki><frame></nowiki> → <nowiki><iframe></nowiki>로 대체되었다. == 기타 == [[2012년]] [[12월 17일]]자로 권고 후보안(Candidate Recommendation)으로 등록되어 표준 지정을 기다리고 있다. 표준화 일정에 따르면 [[2014년]] 4분기까지는 표준을 제정하고, 처리하기 힘든 문제들은 HTML5.1 이상의 버전에서 다룰 예정이다. [http://dev.w3.org/html5/decision-policy/html5-2014-plan.html #] [[2014년]] [[10월 28일]] 최종 권고안이 확정, HTML의 최신 표준으로 지정되었다. {{각주}} [[분류:HTML]] 요약: 리브레 위키에서의 모든 기여는 크리에이티브 커먼즈 저작자표시-동일조건변경허락 3.0 라이선스로 배포됩니다(자세한 내용에 대해서는 리브레 위키:저작권 문서를 읽어주세요). 만약 여기에 동의하지 않는다면 문서를 저장하지 말아 주세요. 글이 직접 작성되었거나 호환되는 라이선스인지 확인해주세요. 리그베다 위키, 나무위키, 오리위키, 구스위키, 디시위키 및 CCL 미적용 사이트 등에서 글을 가져오실 때는 본인이 문서의 유일한 기여자여야 하고, 만약 본인이 문서의 유일한 기여자라는 증거가 없다면 그 문서는 불시에 삭제될 수 있습니다. 취소 편집 도움말 (새 창에서 열림) | () [] [[]] {{}} {{{}}} · <!-- --> · [[분류:]] · [[파일:]] · [[미디어:]] · #넘겨주기 [[]] · {{ㅊ|}} · <onlyinclude></onlyinclude> · <includeonly></includeonly> · <noinclude></noinclude> · <br /> · <ref></ref> · {{각주}} · {|class="wikitable" · |- · rowspan=""| · colspan=""| · |} {{lang|}} · {{llang||}} · {{인용문|}} · {{인용문2|}} · {{유튜브|}} · {{다음팟|}} · {{니코|}} · {{토막글}} {{삭제|}} · {{특정판삭제|}}(이유를 적지 않을 경우 기각될 가능성이 높습니다. 반드시 이유를 적어주세요.) {{#expr:}} · {{#if:}} · {{#ifeq:}} · {{#iferror:}} · {{#ifexist:}} · {{#switch:}} · {{#time:}} · {{#timel:}} · {{#titleparts:}} __NOTOC__ · __FORCETOC__ · __TOC__ · {{PAGENAME}} · {{SITENAME}} · {{localurl:}} · {{fullurl:}} · {{ns:}} –(대시) ‘’(작은따옴표) “”(큰따옴표) ·(가운뎃점) …(말줄임표) ‽(물음느낌표) 〈〉(홑화살괄호) 《》(겹화살괄호) ± − × ÷ ≈ ≠ ∓ ≤ ≥ ∞ ¬ ¹ ² ³ ⁿ ¼ ½ ¾ § € £ ₩ ¥ ¢ † ‡ • ← → ↔ ‰ °C µ(마이크로) Å °(도) ′(분) ″(초) Α α Β β Γ γ Δ δ Ε ε Ζ ζ Η η Θ θ Ι ι Κ κ Λ λ Μ μ(뮤) Ν ν Ξ ξ Ο ο Π π Ρ ρ Σ σ ς Τ τ Υ υ Φ φ Χ χ Ψ ψ Ω ω · Ά ά Έ έ Ή ή Ί ί Ό ό Ύ ύ Ώ ώ · Ϊ ϊ Ϋ ϋ · ΐ ΰ Æ æ Đ(D with stroke) đ Ð(eth) ð ı Ł ł Ø ø Œ œ ß Þ þ · Á á Ć ć É é Í í Ĺ ĺ Ḿ ḿ Ń ń Ó ó Ŕ ŕ Ś ś Ú ú Ý ý Ź ź · À à È è Ì ì Ǹ ǹ Ò ò Ù ù · İ Ż ż ·  â Ĉ ĉ Ê ê Ĝ ĝ Ĥ ĥ Î î Ĵ ĵ Ô ô Ŝ ŝ Û û · Ä ä Ë ë Ï ï Ö ö Ü ü Ÿ ÿ · ǘ ǜ ǚ ǖ · caron/háček: Ǎ ǎ Č č Ď ď Ě ě Ǐ ǐ Ľ ľ Ň ň Ǒ ǒ Ř ř Š š Ť ť Ǔ ǔ Ž ž · breve: Ă ă Ğ ğ Ŏ ŏ Ŭ ŭ · Ā ā Ē ē Ī ī Ō ō Ū ū · à ã Ñ ñ Õ õ · Å å Ů ů · Ą ą Ę ę · Ç ç Ş ş Ţ ţ · Ő ő Ű ű · Ș ș Ț ț 이 문서에서 사용한 틀: 틀:각주 (원본 보기) (준보호됨)