로그인하고 있지 않습니다. 편집하면 당신의 IP 주소가 공개적으로 기록됩니다. 계정을 만들고 로그인하면 편집 시 사용자 이름만 보이며, 위키 이용에 여러 가지 편의가 주어집니다.스팸 방지 검사입니다. 이것을 입력하지 마세요!=== 시맨틱 태그 === 기존 웹 표준에서는 <code><div></code> 태그를 잔뜩 사용하여 화면을 분할, 여러 가지 레이아웃을 만들어냈지만, HTML5에서는 [[시맨틱 웹]]을 중요시하여 여러 가지 태그를 새롭게 만들었다. 이러한 태그들을 '''시맨틱 태그'''라고 한다. 사용방법은 기존의 <code><div></code> 태그와 차이가 없으나, 시맨틱 태그를 사용한 레이아웃은 컴퓨터가 읽어낼 수 있다. 이게 무슨 말이냐면, 검색 사이트에서 어디가 내용인지를 알 수 있어서 검색 노출을 용이하게 하고, '''궁극적으로 [[시각장애인|눈으로 페이지를 볼 수 없는 사람들]]에게 사이트의 어디가 본문인지 아닌지 알려줄 수 있다는 장점이 있다.''' ==== 레이아웃 태그 ==== ; <code><header></code> : 일반적으로 페이지나 해당 섹션의 가장 윗부분에 위치한다. 페이지 맨 위에 쓸 때는 사이트의 제목이 보통 들어가며, 선택적으로 상단바나 검색창 등이 안에 들어갈 수 있다. <code><head></code> 태그랑 헷갈리면 매우 곤란하다. section이나 article, aside 등으로 묶어놓은 섹션 안의 헤더 용도로 사용해도 된다. 이건 아래 footer 태그도 마찬가지다. ; <code><nav></code> : 내비게이션('''nav'''igation)의 약자로, 일반적으로 상단바 등 사이트를 안내하는 요소에 사용된다. 보통은 안에 <code><ul></code>을 넣어 목록 형태로 사용한다. ; <code><article></code> : 웹 페이지의 내용에 사용하는 태그이다. 문서나 페이지, 사이트에서 독립적으로 배포 혹은 재사용(예를 들어 투고 같은)할 수 있는 섹션에 사용한다. ; <code><section></code> : 웹 페이지의 섹션에 사용하는 태그이다. 웹 페이지를 의미적으로 각각의 파트로 구분하기 위해 쓰는 태그이다. 이 태그를 사용하면 검색엔진이 긁어가지 않는다는 이야기가 있는데 루머다. [http://html5.clearboth.org/sections.html HTML5 표준 문서]에 보면 "요소의 내용을 배포(syndicate)해도 이치에 맞다면 section 요소 대신 article 요소를 사용하기를 권합니다."라는 부분이 있는데, 이 부분의 해석이 잘못 퍼진 것으로 추정된다. ; <code><aside></code> : 본문의 주요 부분을 표시하고 남은 부분을 설명하는 태그이다. 특별한 일이 아니면 사이드바나 광고창 등 중요하지 않은 부분에 사용된다. ; <code><footer></code> : 일반적으로 페이지나 해당 파트의 가장 아랫부분에 위치한다. 페이지 맨 아래에 쓸 때는 사이트의 [[라이선스]], 주소, 연락처 등을 넣는다. ===== 예시 ===== 레이아웃 태그를 사용한 HTML5 마크업의 기초 뼈대는 다음과 같다. <syntaxhighlight 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> </syntaxhighlight> ==== 멀티미디어 태그 ==== ; <code><audio></code> : 음성, 음악 파일 등을 재생할 수 있는 태그. [[웹 브라우저]]마다 지원하는 확장자가 달라<ref>이는 이런저런 [[어른의 사정]] 때문에 빚어진 현상. video 태그는 더 심하다.</ref> 멀티브라우저 지원을 위해서는 <code><source></code> 태그를 안에 넣어 두 가지 이상의 확장자를 가진 음악 파일을 넣어야 한다. 가장 많이 사용하는 조합은 [[MP3|mp3]]+[[OGG|ogg]] ; <code><video></code> : 영상 파일을 재생할 수 있는 태그. 사실상 HTML5에서 가장 주목받는 태그이다. 별다른 [[플러그인]] 없이도 자체 재생이 가능하다는 점이 가장 큰 장점이다. <code><audio></code> 태그와 마찬가지로 <code><source></code> 태그를 넣어 [[MP4|mp4]]+[[OGG|ogv]]의 조합으로 짜주면 거의 대부분의 브라우저를 지원한다. ; <code><canvas></code> : 스크립트를 이용하여 그래픽을 표현하는 태그이다. 일반적으로는 [[자바스크립트]]를 많이 사용하며, 응용하면 웹에서 [[게임]] [[앱]], 3D 엔진 등을 돌리는 다양한 응용이 가능하다. ==== 폼 관련 ==== ; <code><output></code> : 고정값을 전송하는 데에 쓰인다. ; <code><input></code> 내 요소 - date, datetime, time, color, range 등 : 자바스크립트를 통해서만 구현됐던 기능이 내장되었다. 하지만 현 시점에서는 [[오페라(웹 브라우저)|오페라]]만 완전 지원한다. ; <code><datalist></code> : <code><input></code>에 들어갈 값을 미리 정의하는 태그이다. ; <del><code><keygen></code></del> : 암호화용 키쌍을 생성하는 태그이다. 서버에는 공개 키가 전송되고, 개인 키는 클라이언트에 저장된다. ==== 기타 태그 ==== ; <code><menu></code> : 툴바, 팝업 메뉴를 넣을 때 쓴다. ; <code><menuitem></code> : 툴바, 팝업 메뉴의 각 항목을 정의한다. ; <code><details></code> : 네이버의 요약글, 다음의 더보기와 같은 기능을 가진 태그이다. <code><summary></code>와 같이 쓰인다. ; <code><embed></code> : 외부 요소를 포함할 때 쓰는 태그이다. 대표적으로 어도비 플래시를 넣을 때 이걸 쓴다. 기존에는 모든 브라우저가 지원했고 object 태그보다 쓰기 쉬워서 널리 쓰였으나 HTML 표준 태그가 아니었는데 HTML5에서 표준으로 포함되었다. object가 iframe처럼 웹 페이지도 포함할 수 있는 것과 달리, 플러그인 요소만을 포함할 수 있다. 다만 실제로 이걸 지키는 브라우저는 [[파이어폭스]] 밖에 없다. ; <code><figure></code> : 그림, 도표, 다이어그램 등의 글의 이해를 돕기 위한 내용들을 나타내는 태그이다. ; <code><figcaption></code> : <code><figure></code> 태그 안에 사용되는 태그로, <code><figure></code> 태그 안에 있는 내용의 설명을 적는 태그이다. ; <code><hr></code> : 원래 단순한 가로줄을 나타내는 태그였으나, 페이지의 주제가 바뀔 때 내용을 분리시키는 의미가 HTML5에서 추가되었다. ==== 용도가 바뀐 태그 ==== ; <code><s></code> : 더이상 옳거나 정확하거나 적절하지 않은 내용을 나타내는 데에 쓴다. <code><nowiki><del></nowiki></code>과 같다. ; <code><u></code> : 양식상 일반적인 텍스트보다 돋보여야 할 때 쓴다. 예를 들어 철자가 틀린 단어 등이 있다. ; <code><i></code> : 어떠한 이유로 일반적인 텍스트보다 돋보여야 할 때 쓴다. 예를 들어 전문 용어, 외국어의 구절 등이 있다. 더 적절한 시맨틱 태그가 있을 경우 그쪽을 쓴다. ==== 사용 불가 태그 ==== 대개 [[시맨틱 웹]]에서 사용을 지양하는 태그라든가, 특정 브라우저<del>[[IE]]라든가 IE라든가 IE라든가</del>에서만 작동하는 태그가 속한다. * '''<code><font></code>, <code><center></code>, <code><basefont></code>, <code><nobr></code> → [[CSS|CSS]]가 있기 때문에 폐기.''' * <code><strike></code> → <code><s></code>, <code><del></code>로 대체되었다. * <code><acronym></code> → <code><abbr></code>로 대체되었다. * <code><frame></code> → <code><iframe></code>로 대체되었다. 요약: 리브레 위키에서의 모든 기여는 크리에이티브 커먼즈 저작자표시-동일조건변경허락 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: Ă ă Ğ ğ Ŏ ŏ Ŭ ŭ · Ā ā Ē ē Ī ī Ō ō Ū ū · à ã Ñ ñ Õ õ · Å å Ů ů · Ą ą Ę ę · Ç ç Ş ş Ţ ţ · Ő ő Ű ű · Ș ș Ț ț