HTML 5 설명 글 중 (일본어를 구글로 강제 번역함 ㅠㅠ )

| HTML5.0

2012. 6. 4. 17:11

Translation of : What Does It All Mean? - Dive Into HTML5

Diving In

이 장에서는 전혀 아무것도 잘못하지 않는 HTML 페이지를 개선합니다. 일부는 줄어들 것이고, 일부는 오래 될 것입니다. 그리고 그 모두가 더욱 의미있는 것으로 (시맨틱) 될 것입니다. 훌륭 하지요?

소재가되는 페이지는 여기에 있습니다 . Learn it. Live it. Love it 새 탭에서 페이지를 열고 "소스보기"로이 페이지로 돌아 와서는 안됩니다.

❧

The Doctype

우선 처음부터 :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

이것은 "doctype"라는 것입니다. doctype 긴 역사 - 마술적인 -합니다. Mac 용 Internet Explorer는 Microsoft의 개발자 자신이 경악할만한 문제를 발견 수 있습니다. 다가올 새로운 버전의 브라우저에서 Web 표준에 대한 지원이 향상되었습니다 이전 웹 페이지는 올바르게 표시되지 않을 것입니다. 또는 제대로 표시되고있다 (사양에 따라)에에도 불구하고 많은 사람들이 제대로 표시되지 않는 게 좋습니다. 웹 페이지는 Netscape 4와 Internet Explorer 4 같은 점유율 우세한 브라우저 주제에 맞게 만들어진했습니다. IE5/Mac 매우 선진적인 것이었지만, 웹 페이지를 엄청했습니다.

Microsoft는 기발한 해결 방법에 겨우 도착했습니다. IE5/Mac에서 일반적으로 HTML 소스 첫 번째 라인 ( <html> 요소 이전)에있는 "doctype"을 찾게하는 것입니다. 오래된 웹 페이지 (이전 버전의 브라우저 주제에 의존하는)은 대부분의 경우 doctype이 없습니다. IE5/Mac는 그러한 웹 페이지는 오래된 브라우저와 동일하게 표시하고 새로운 Web 표준을 사용하려면 올바른 doctype을 <html> 요소 앞에두면된다 있도록했습니다.

아이디어는 순식간에 퍼져, 모든 주요 브라우저에서 "호환 모드"와 "표준 모드"의 두 모드를 가지게되었습니다. 물론 지금 힘겨운 상황에 빠지게되었습니다. Mozilla는 버전 1.1을 공개하려고했을 때, "표준 모드"로 표시되고 있음에도 불구하고 특정 주제에 의존하는 웹 페이지가 얼마든지있다는 것을 발견했습니다. Mozilla는 렌더링 엔진을 수정하여 버릇을 수정했지만 결과 단번에 많은 웹 페이지가 엉망으로 표시되도록합니다. 그래서 - 위조는 없어요 - 무려 " 거의 표준 모드 "라는 것이 만들어 버렸습니다.

Activating Browser Modes with Doctype 에서 Henri Sivonen은 각 모드의 차이를 다음과 같이 정리하고 있습니다 :

호환 모드
호환 모드에서는 1990 년대 후반에 유행했던 기법을 기반으로 만들어진 웹 페이지를 엉망으로하지 않기 때문에 Web 표준을 무시합니다.
표준 모드
표준 모드에서는 브라우저 가급적 이미 사양에 따른 형태로 구현되는 동작에 따라 문서를 보려고합니다. HTML5에서는이 모드를 "호환성 모드"라고 부르고 있습니다.
거의 표준 모드
Firefox 및 Safari, Chrome, Opera (7.5 이상), IE8은 "거의 표준 모드"를 가지고 있으며, 표 셀 가로 크기 CSS2 사양을 무시하고 결정합니다. HTML5에서는이 모드를 "제한된 호환성 모드"라고 부르고 있습니다.

(나는 아주 짧게 인용하고 있기 때문에, 제대로 Henri Sivonen 기사의 나머지 모두를 읽어야한다. 예를 들어 IE5/Mac는 Web 표준으로 지원되지 않은 일부 오래된 doctype을 지원합니다. 호환 의 명부가 증가함에 따라 "호환 모드"로 취급하는 doctype은 증가하고갔습니다. 마지막으로 내가 확인했을 때, 5 개의 doctype이 "거의 표준 모드"가되어, 73 doctype이 "호환성 모드" 되었습니다하지만 그래도 몇 가지 놓친 것이고, Internet Explorer 8이 4 개 - 4 개입니다! - 디스플레이 모드를 전환하는 똥 같은 기능에 대해서는 언급 할 생각은 없습니다. 죽으면 좋겠다. 불타 죽는)

그런데 무슨 이야기를하고 있던 것일까요. 그렇습니다, doctype군요 :

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

이것은 많은 현재 브라우저에서 "표준 모드"로 해석되는 15 doctype 중의 하나입니다. 특히 아무것도 실수는 없습니다. 만약 이것을 사용하고 싶다면 그대로 사용해도 상관 없습니다. 더 짧고 간결하고 많은 현재 브라우저에서 "표준 모드"가 될 HTML5의 doctype 변경될 수 있습니다.

HTML5의 doctype은 이렇습니다 :

 <!DOCTYPE html>

이것뿐입니다. 단 15 자입니다. 간단해서 비어 기억 유형있을 것입니다.

❧

The Root Element

HTML 페이지는 중첩된 요소의 덩어리입니다. 그 전체적인 구조는 나무와 비슷합니다. 몇 가지 요소는 "형제"이며, 그것은 같은 줄기에서 두 개의 가지가 나있는 것 같습니다. 몇 가지 요소가 다른 요소의 "자식"이고, 그것은 큰 가지에서 작은 가지가 나있는 것 같은 것입니다 (다른 말로한다면 다른 요소를 포함하는 요소 바로 아래에있는 요소의 "부모" , 그 손자 요소에 대한 "조상"입니다). 자식 요소가없는 요소는 "잎"노드라고합니다. 가장 최상위 요소, 즉 모든 요소의 조상에 해당하는 요소는 루트 요소라고합니다. HTML 페이지에서 루트 요소는 항상 <html> 입니다.

이 예제 에서는 루트 요소는 다음과 같이되어 있습니다 :

 <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

특히이 태그 실수는 없습니다. 다시 말하지만, 만약 당신이 사용하고 싶다면 그대로 사용해도 상관 없습니다. 이것은 합리적인 HTML5입니다. 하지만 HTML5에서는 중요하지 않은 부분이 몇 가지 그들을 제거하여 몇 바이트 절약할 수 있습니다.

먼저 xmlns 속성에 대해 생각해 봅시다. 이것은 XHTML 1.0 의 흔적에서이 페이지에 포함된 요소는 XHTML 네임 스페이스 ( http://www.w3.org/1999/xhtml )에 속하는 것이있다는 것을 가르쳐줍니다. 그러나 HTML5 요소는 항상 네임 스페이스에 속하는 때문에 명시적으로 선언할 필요가 더 이상 없습니다. HTML5 페이지는이 특성이 있든 아니든 모든 브라우저에서 동일하게 해석되는 것입니다.

xmlns 속성을 삭제하면 루트 요소는 이렇게됩니다 :

 <html lang="en" xml:lang="en">

HTML 페이지의 언어를 정의하는 lang 과 xml:lang 이라는 두 가지 속성이 남아 있습니다 ( en 은 "영어"를 의미합니다. 영어가 아닌 경우 자신의 언어 코드를 찾아보세요 ). 왜 같은 일을 서로의 속성으로 표현하는 것입니까? 이것도 XHTML의 흔적입니다. HTML5에서는 lang 만이 의미를 가집니다. xml:lang 을 그대로 두어도 상관 없지만 반드시 lang 속성과 동일해야합니다 .

To ease migration to and from XHTML, authors may specify an attribute in no namespace with no prefix and with the literal localname "xml : lang"on HTML elements in HTML documents, but such Attributes MUST only BE Specified IF A lang attribute in No namespace is also specified, and both attributes must have the same value when compared in an ASCII case-insensitive manner. The attribute in no namespace with no prefix and with the literal localname "xml : lang"has no effect on language processing.

또 삭제해도 될까요? 괜찮으면 지워버합시다! 루트 요소는 이렇게됩니다 :

 <html lang="en">

루트 요소는 이상입니다.

❧

the `<head>` Element

대부분의 경우 루트 요소의 첫 번째 자식은 <head> 요소입니다. <head> 요소에는 해당 페이지의 본문이 아닌 메타 데이터 - 페이지에 대한 정보 -가 포함됩니다 (본문은 당연 합니다만 <body> 요소에 포함됩니다). <head> 요소 자체는 지루한 것으로, HTML5에 무엇인가 재미있는 효과를주는 것은 없습니다. 재미있는 것은 <head> 요소 중입니다. 는 다시 주제의 페이지 를 살펴 보도록하자 :

 <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>My Weblog</title> <link rel="stylesheet" type="text/css" href="style-original.css" /> <link rel="alternate" type="application/atom+xml" title="My Weblog feed" href="/feed/" /> <link rel="search" type="application/opensearchdescription+xml" title="My Weblog search" href="opensearch.xml" /> <link rel="shortcut icon" href="/favicon.ico" /> </head>

우선 <meta> 요소 네요.

❧

Character Encoding

"문장"에 대해 생각할 때, "컴퓨터 화면에 표시되는 문자와 그림"에 대해서도 생각할 필요가 있습니다. 그러나 컴퓨터는 문자나 그림을 직접 취급주는 것이 아니라 비트와 바이트라는 단위로 취급합니다. 컴퓨터 화면에서 보는 문장은 모든 각각의 문자 인코딩에 따른 것입니다. 수많은 문자 인코딩 이 존재하고 러시아어나 중국어와 영어 각각 최적화된도이거나 여러 언어를 처리할 수도합니다. 간단하게 말하면 문자 인코딩은 메모리와 디스크에 저장된 데이터와 컴퓨터 화면에 표시를 매핑하는 것입니다.

실제로는 더 복잡합니다. 동일한 문자가 여러 인코딩, 각각 다른 바이트의 조합으로 메모리와 디스크에 저장하기도합니다. 문자 인코딩을 해독 열쇠와도 같은 것이라고 생각해도 좋을 것입니다. 누군가가 텍스트로 일련의 바이트의 조합을 보내온 경우 문자로 화면에 표시 (또는 인쇄하는 등)하는 경우에는 그것이 어떤 문자 인코딩인지 알 필요가 있습니다.

는 브라우저와 서버에서 들어오는 일련의 바이트에서 어떻게 문자 인코딩을 결정하는 것입니까? 좋은 질문입니다! 만약 HTTP라는 것을 알고있다면 다음과 같은 헤더를 본 적이있을 것입니다 :

 Content-Type: text/html; charset="utf-8"

간단히 말해, 이것은 웹 서버는 HTML 문서를 보내고있는 것으로, 문서의 문자 인코딩이 UTF-8 임을 가르쳐주고 있습니다. 불행히도 위대한 잡탕 WWW는 한정된 작성 자만 HTTP 서버를 설정할 수 없습니다. 예를 들어 Blogger : 각각의 콘텐츠는 개인이 제공되지만 서버는 Google에 의해 운영되고 있습니다. 따라서 HTML 4는 HTML 문서 자체에서 문자 인코딩을 지정할 수 있도록되어 있습니다. 다음과 같은 글을 본 적이 없습니까? :

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

간단히 말해, 이것은 웹 제작자가 HTML 문서를 문자 인코딩으로 UTF-8 을 사용하여 만든는 것을 가르쳐줍니다.

이상의 두 기술은 HTML5에서도 그대로 작동합니다. HTTP 헤더가 가장 강력한 수단으로 <meta> 태그가있어도 그것을 무시할 수 있습니다. 그러나 모두가 HTTP 헤더를 설정 할 수있는 것은 아니므로 <meta> 태그도 계속 작동하게되어 있습니다. 어쨌든 HTML5에서는 더 간결하게 작성할 수있게되어 있습니다. 는 어떻게되어 있을까요? :

 <meta charset="utf-8" />

모든 브라우저에서 제대로 작동합니다. 이 생략 기법은 어디에서 온 것일까요? 내가 찾은 가운데는 다음과 메일링리스트 메세지 를 가장 잘 설명하고 있다고 생각합니다 :

the Rationale for the <meta charset=""> attribute Combination is that UAS already Implement it, because people tend to leave things unquoted, like :
<META HTTP-EQUIV=Content-Type CONTENT=text/html; charset=ISO-8859-1>

만약 브라우저가 제대로이 생략 기법을 다룰 것인가를 믿을 수 없다면 <meta charset> 테스트 가 있기 때문에 그것을 참조보십시오.

Ask Professor Markup

질문 : 달라진 문자를 쓸 생각은 없습 니다만, 그래도 문자 인코딩을 지정하는 편이 좋을까요?

답변 : 지정하십시오! 모든 HTML 페이지에서 문자 인코딩을 지정해야합니다. 인코딩을 지정하지 않으면, 보안적인 문제를 안게 될지도 모릅니다 .

요약해 말하면, 문자 인코딩 디그은 복잡하고 교양있는 사람들이 사용하는 많은 허술한 소프트웨어를 복사 및 붙여넣기에서 일반적으로 취급할 정도로 쉽게되어 있지 않습니다. 모든 HTML 문서에서 반드시 문자 인코딩을 지정해야하고 그렇지 않으면 좋지 않은 일이 발생합니다 . HTTP의 Content-Type 헤더도 좋지만, <meta http-equiv> 좀 더 짧은 <meta charset> 의 선언을 써 주셨으면합니다. 분명 인터넷도 기뻐합니다.

❧

Friends & (Link) Relations

일반 링크 ( <a href> )은 단순히 다른 페이지를 참조하십시오. <link rel> 왜 다른 페이지를 참조하는지 설명하는 것입니다. 이들은 "나는이 페이지를 참조하십시오. 왜냐하면 ..."이라는 문장을 완성합니다 :

- 브라우저 표시할 때 적용해야 CSS 규칙을 설명하는 스타일 시트 때문입니다.
-이 페이지의 내용과 동일 있지만, 등록 가능한 형식으로 제공되는 피드이기 때문입니다.
- 다른 언어로 번역한 페이지 때문입니다.
-이 페이지와 내용이 같다는 있지만, PDF 형식이기 때문입니다.
-이 페이지를 포함하여 온라인 서적의 다음 장을 때문입니다.

등등. HTML5는 링크 관계를 두 가지로 나뉘어져 있습니다 :

Two categories of links can be created using the link element. Links to external resources are links to resources that are to be used to augment the current document, and hyperlink links are links to other documents ....
The exact behavior for links to external resources depends on the exact relationship, as defined for the relevant link type.

소재로 다룬 예제에서는 첫 번째 ( rel="stylesheet" )만이 외부 리소스에 대한 링크입니다. 나머지 모두는 다른 문서에 하이퍼 링크되어 있습니다. 이러한 링크는 추적도 추적 않아도 상관 없으며이 페이지를 열람하기 위해서 참조해야 할 것도 없습니다.

많은 경우 링크 관계는 웹페이지 <head> 에서 <link> 요소의 일부로 나타납니다. 일부 링크의 관계는 <a> 요소에서도 사용할 수 있지만 잘 알려지지 않았습니다. HTML5에서는 <area> 요소에서도 사용할 수있게 되었 습니다만, 더욱 알려져 있지 않은 것입니다 (HTML 4는 rel 속성을 <area> 요소로 사용할 수 없습니다.) 전체 링크의 관계 테이블 을보고 어떤 값을 rel 로 지정할 수 있는지 확인하자.

Ask Professor Markup

질문 : 내 마음대로 링크 관계를 만들어도 좋을까요?

답변 : 그렇다면 무한 새로운 연결 관계가 만들어 계속하게 될 것입니다. 여러 사람이 똥 같은 것을 만드는 것을 그만두게 위해 WHATWG에서 제시한 rel 값을 관리하고 , 어떻게 승인되어가는 방법을 설명합니다 .

rel = stylesheet

그럼 주제 페이지 의 첫 번째 링크의 관계를 살펴 봅시다 :

 <link rel="stylesheet" href="style-original.css" type="text/css" />

이것은 가장 일반적으로 사용되는 링크 관계 것입니다 (문자 그대로). <link rel="stylesheet"> 는 CSS 규칙이 작성된 외부 파일을 가리 킵니다. type 특성을 제거하는 것만이 HTML5에있는 최적화입니다. 스타일 시트 언어로 웹상에서 CSS 밖에 없기 때문에, type 속성 기본값으로되어 있습니다. 모든 브라우저에서 동일하게 작용할 것입니다 (만약 새 스타일 시트 언어가 언젠가 만들어진해도 type 속성을 추가하면된다한다.)

 <link rel="stylesheet" href="style-original.css" />

rel = alternate

계속 소재의 페이지 를 살펴 보도록하자 :

 <link rel="alternate" type="application/atom+xml" title="My Weblog feed" href="/feed/" />

이 링크 관계도 잘 알려져 있습니다. <link rel="alternate"> 을 type 속성 RSS 및 Atom 미디어 유형과 결합 "feed autodiscovery"라는 구조가 활성화됩니다. 그러면 피드 리더 (예 : Google Reader 와 같은)가 최신의 기사가 실려있는 피드를 자동으로 찾을 수 있습니다. 대부분의 브라우저는 URL 옆에 특별한 아이콘을 표시하여 주기도합니다. rel="stylesheet" 과 달리, type 특성은 매우 중요합니다. 삭제하지 않도록합시다!

rel="alternate" 라는 링크의 관계는 매우 다양하게 사용됩니다. HTML 4 에서조차 그렇습니다. HTML5에서 정의를 기존의 웹 콘텐츠를보다 정확하게 표현할 수 있도록 상세하게 쓰고 다시 분명한시켰습니다. 위와 같이, rel="alternate" 를 type=application/atom+xml 함께 사용하는 경우 해당 페이지의 Atom 피드를 가리 킵니다. 그러나 rel="alternate" 다른 type 속성과 함께 사용하여, 예를 들면 PDF 같이 동일한 내용의 다른 형식을 가리키는 수도 있습니다.

HTML5는 문서의 번역에 대해 어떻게 링크를 치면 좋은 것인 지라고 오랫동안 혼란 상황에 대해서도 해결했습니다. HTML 4에서는 lang 속성을 rel="alternate" 과 함께 사용하여 대상 문서의 언어를 선언하고 있었 습니다만, 이것은 실수였습니다. HTML 4 Errata 는 HTML 4 규격 4 개의 완전한 실수를 나열합니다. 그들 전체 과오 중 하나가 rel="alternate" 로 연결되는 링크가 문서의 언어를 선언하는 방법입니다. HTML 4 Errata와 HTML5에 명시된 올바른 방법은 hreflang 속성을 사용합니다. 불행히도이 정오표는 이미 HTML 4 규격에 반영되지 않습니다. W3C HTML Working Group 아무도 HTML 개발에 종사하고 있지 않기 때문입니다

New Semantic Elements in HTML5

HTML5는 단순히 기존의 태그를 단축하는 것만하지는 않습니다 (대체로 적당한 길이로 짧게주고도 있겠지만). 새로운 의미 론적 요소를 정의도 있습니다.

<section>: section 요소는 문서 또는 응용 프로그램의 일반적인 부분을 표현합니다. 여기에서 말하는 섹션은 특정 주제에 맞는 내용의 집합이며 종종하고 표제가 붙어 있습니다. 섹션의 예로는 책 장 또는 탭 대화 상자의 각 탭 페이지 논문 번호가 할당된 항목 등이 될 것입니다. 웹사이트 홈페이지에서는 서론이나 신착 기사, 연락처 정보 등을 각각 섹션으로 구분할 수있을 것입니다.
<nav>: nav 요소는 다른 페이지에 대한 링크와 해당 페이지에 대한 링크가 포함된 섹션을 나타냅니다. 즉 탐색 링크를 포함하는 섹션입니다. 모든 링크의 집합이 nav 요소 다음에해야한다가하면 그런 것은 없습니다 - 주요 탐색 블럭화된 섹션만 nav 요소로 적합합니다. 바닥글에 자주 웹사이트의 주요 페이지 및 서비스 이용 약관, 홈페이지, 저작권 정보에 대한 링크에서 사용되는 경우가 많습니다. footer 요소는 그냥 그런 케이스에 충분히 대응하는 것이 있기 때문에 반드시 nav 요소를 사용할 필요는 없습니다.
<article>: article 요소, 예를 들어 그냥 피드 등으로 전송 가능하거나 재사용하는 자체로 완결하고있는 문서, 페이지 및 응용 프로그램, 웹사이트를 표현하는 것입니다. 포럼에 게시하거나 잡지나 신문 기사, 블로그 항목, 사용자 댓글이 대화식 위젯과 가젯, 기타 독립적인 컨텐츠 부분 등에 사용할 수 있습니다.
<aside>: aside 요소는 aside 요소로 묶인 부분이 본문에서 조금 탈선있어, 본문과는 별개로 파악하고 원하는 부분을 표현합니다. 신문이나 잡지 등 인쇄 매체에서 말하는 사이드바 같은 섹션을 표현할 수도 있습니다. 구체적으로 인용이나 사이드바, 광고, nav 요소 집합의 다른 웹 페이지의 기본이되는 내용에서 분리시키고 싶은하게 사용할 수 있습니다.
<hgroup>: hgroup 섹션 제목을 표현합니다. 이 요소는 소제목이 있고, 다른 표현을했다 표제가 있고, 캐치 프레이즈가 있기도하여 여러 h1 ~ h6 요소가 출현하는 경우에 그들을 구성하는 데 사용됩니다.
<header>: header 요소는 서론 및 탐색 도움이 될 것으로 정리를 표현합니다. header 요소는 주로 섹션 제목 ( h1 ~ h6 요소 또는 hgroup 요소)를 묶는 데 사용되는 경우가 많은데, 필수라고하지는 않습니다. 또한 header 요소에는 항목의 색인 및 검색 양식 적절한 로고를 포함할 수 있습니다.
<footer>: footer 요소는 최근의 조상 또는 루트 요소에 해당하는 섹션 바닥글을 표현합니다. 많은 경우 바닥글에는 누가 썼는지 및 또는 관련 문서 링크, 저작권 정보 등 그 섹션에 대한 정보가 포함되어 있습니다. 바닥글 섹션의 마지막에 있어야한다는 것은, 단순히 많은 경우 이렇게되어 있다고 할뿐입니다. footer 요소 섹션 모두를 묶어 주면, 그들에 부록이나 목차, 긴 파트너 프로그램 중복 라이센스 조건을 표현할 수 있습니다.
<time>: time 요소는 24 시간제의 시간 및 예측 태양력에 따라 정확한 날짜, 그 경우에는 옵션으로 시간과 시차 등을 포함한 것,을 나타냅니다.
<mark>: mark 요소는 참조되는 것을 고려하여 표시하거나 강조 표시 문서의 일련의 문자열을 표현합니다.

만약이 장을 아직 읽고 있지 않다면 이러한 새로운 요소를 사용하는 것에 불안을 기억하는 것입니다. 그러나, 약간 우회해야합니다.

❧

A long digression into how browsers handle unknown elements

어떤 브라우저에도 이미 지원하는 HTML 요소에 대한 습득있는 목록이 있습니다. 예를 들어 Mozilla Firefox 목록 nsElementTable.cpp 에 저장되고이 목록에없는 요소는 "알 수없는 요소"로 간주됩니다. 알 수없는 요소에는 두 가지 근본적인 문제가 있습니다 :

요소를 어떻게 스타일링하면 좋을까요? 일반적으로 <p> 상하 공간을 잡고 <blockquote> 왼쪽에 여백을 가지고 들여쓰기되어 <h1> 큰 글꼴로 표시됩니다. 그렇지만 알 수없는 요소의 경우는 어떤 스타일을 적용하면 좋을까요?
요소의 DOM 어떻게하면 좋을까요? Mozilla의 nsElementTable.cpp 에는 각각의 요소가 어떤 요소를 내포 수있는가하는 정보가 포함되어 있습니다. 만약 태그에 <p><p> 는 같은 코드를 포함하면 두 번째 단락 요소는 첫 번째 것을 자동으로 닫기 때문에,이 두 요소는 부모와 자식 관계가 아니라 형제 관계입니다 . 그러나 <p><span> 라고하는 코드를 작성하면, Firefox는 <p> 이 블록 레벨 요소 인라인 요소이다 <span> 을 내포다는 것을 알고 있기 때문에, span 요소는 단락을 닫습 없습니다. 즉, DOM에서는 <span> 은 <p> 아이는 것입니다.

브라우저마다이 문제에 대해 다른 대답을 가지고 있습니다 (나는 그것을 알고 충격을 받았다). 가장 유명한 Microsoft Internet Explorer가 이러한 문제에 대한 대답이 가장 많은 문제를 안고 있습니다만, 어떤 브라우저에서도 약간의 도움이 필요합니다.

첫 번째 문제에 대한 대답은 매우 간단하고 알 수없는 요소에 특히 아무것도 스타일링하지 않는 것입니다. 페이지에 나타나는 위치에 따라 CSS 속성을 상속하고 페이지 제작자 CSS에서 알 수없는 요소를 스타일링 수 있도록하면 좋습니다. 이제 대개는 잘 갑니 다만, 한가지 주의해야 할 수 있습니다.

모든 브라우저는 미확인 요소를 인라인 요소로 표시합니다. 즉 마치 display:inline 는 CSS 규칙을 가지고있는 것처럼.

HTML5에서는 새로운 요소 중 일부는 블록 요소로 정의되고 있습니다. 따라서 그들은 다른 블록 레벨 요소를 내포 수, HTML5 지원 브라우저에서 기본적으로 display:block 으로 스타일링합니다. 만약 오래된 브라우저에서 이러한 요소를 사용하려면 수동으로 스타일을 정의하지 않으면 안됩니다 :

 article,aside,details,figcaption,figure, footer,header,hgroup,menu,nav,section { display:block; }

(이 코드는 장에서 만지지 같은 것에 대해서도 여러 해주는 Rich Clark의 HTML5 Reset Stylesheet 에서 따온 것입니다.)

만약, 이것은 안 하잖아요! 버전 9 이전의 Internet Explorer에서는 알 수없는 요소에 대해 전혀 스타일링 수 없습니다. 예를 들어 다음과 같은 태그가 있었다고합니다 :

 <style type="text/css"> article { display: block; border: 1px solid red } </style> ... <article> <h1>Welcome to Initech</h1> <p>This is your <span>first day</span>.</p> </article>

Internet Explorer (IE 8 포함)에서는 <article> 요소를 블록 레벨 요소로 취급 해주지 않고, 빨간 테두리 기사 주위에 걸려도주지 않습니다. 모든 스타일 규칙은 무시됩니다. Internet Explorer 8은 아직 베타 버전이지만 , Microsoft는 Internet Explorer 9에서는이 문제가 일어나지 않을 것이라고 발표하고 있습니다 (개발자도 확인했습니다).

두 번째 문제는 알 수없는 요소를 발견했을 때 브라우저가 어떤 DOM을 구축해야하는가하는 것입니다. 또다시 Internet Explorer가 가장 귀찮습니다. IE 요소 이름이 인식하지 못하는 경우 그 요소를 자식이없는 빈 노드로 DOM에 추가하게됩니다. 그리고 알 수없는 요소의 자식에 해당하는 모든 요소는 형제로 추가됩니다.

ASCII 아트를 사용하여 그 차이를 도해하여 봅시다. 다음은 HTML5의 DOM입니다 :

  article
 |
 + - h1 (child of article)
 | |
 | + - text node "Welcome to Initech"
 |
 + - p (child of article, sibling of h1)
    |
    + - text node "This is your"
    |
    + - span
    | |
    | + - text node "first day"
    |
    + - text node ""

대해 Internet Explorer는 다음과 같은 DOM을 구축하게됩니다 :

  article (no children)
 h1 (sibling of article)
 |
 + - text node "Welcome to Initech"
 p (sibling of h1)
 |
 + - text node "This is your"
 |
 + - span
 | |
 | + - text node "first day"
 |
 + - text node ""

이 문제에 대해서는 불가 사 의한 해결책이 있습니다. <article> 요소가 출현 이전에 JavaScript에서 거짓으로 그 요소를 만들 때 이상하게도 Internet Explorer가 <article> 요소를 인식하게 CSS로 스타일링 할 수 있습니다. 그 더미 요소는 DOM에 추가할 필요가 전혀 없습니다. IE가 인식할 수없는 요소를 스타일링 할 수있는 것처럼 한 번만 요소 만들기 (페이지 당) 해 준다뿐입니다.

 <html> <head> <style> article { display: block; border: 1px solid red } </style>   <script> document.createElement ( "article"); </ script> 
 </ head>
 <body>
 <article>
 <h1> Welcome to Initech </ h1>
 <p> This is your <span> first day </ span> </ p>
 </ article>
 </ body>
 </ html>

이 기술은 IE 6을 포함한 모든 버전의 Internet Explorer에서 잘 작동합니다. HTML5에 새로 책정된 요소에 대해 동일한 기술을 유용 - 다시 말하지만 DOM에 아무것도 추가할 필요가 없기 때문에 더미 요소를 볼 수 없을 것입니다 - 수 있기 때문에, 그 새로운 요소를 HTML5를 지원하지 않는 브라우저에서도 특별히 의식하지 않고 사용할 수 있습니다.

Remy Sharp는이 기술을 HTML5 활성화 스크립트 는 실로 적절한 이름으로 공개하고주었습니다. 이 스크립트는 이미 14 차례나 갱신되고 있습니다만, 기본적으로 다음과 같은 코드를 기반으로합니다 :

 <!--[if lt IE 9]> <script> var e = ("abbr,article,aside,audio,canvas,datalist,details," + "figure,footer,header,hgroup,mark,menu,meter,nav,output," + "progress,section,time,video").split(','); for (var i = 0; i < e.length; i++) { document.createElement(e[i]); } </script> <![endif]-->

 은 조건부 주석 (조건부 댓글) 하는 것입니다. Internet Explorer는 이러한 if 식과 같이 취급 : 만약 현재의 브라우저 버전이 버전 9 아래면이 블록은 실행됩니다. 다른 브라우저는 모든이 블록을 HTML 주석으로 처리합니다. 라는 이유로 Internet Explorer (버전 8까지)이 스크립트를 실행하고 다른 브라우저는 스크립트를 완전히 무시하는 것입니다. 이렇게하여이 해킹을 필요로하지 않는 브라우저에서는 페이지 로딩이 빨리 될 것입니다.

이 JavaScript 코드는 간단 명료 것입니다. e는 "abbr" 나 "article" " "aside" 등의 문자열 배열에서 배열을 루프로 돌려 document.createElement() 요소를 생성합니다. 그리고 반환값을 무시하여 DOM 요소가 추가되지 않도록하고 있습니다. 이제 Internet Explorer가이 새로운 요소를이 페이지에 나중에 사용할 수 있지만 우리가 원하는 정도로 취급주게됩니다.

"하나만"중요한 것은이 있습니다. 이 스크립트는 웹 페이지의 마지막이 아닌 시작, 있으면 <head> 요소에 쓸 필요가 있습니다. 이렇게하면 Internet Explorer는 웹 페이지의 태그와 속성을 구문 분석 이전에이 스크립트를 실행하여줍니다. 만약 웹 페이지의 끝에 쓸 경우 실행되는 것이 너무 느려 이후 Internet Explorer 마크업을 잘못 해석한에 잘못된 DOM을 구축하게됩니다. 그런 오류를 수정하는 것은이 스크립트는 불가능하다는 것도 이유입니다.

Remy Sharp이 스크립트를 "단축시켜" Google Code에서 공개하고 있습니다 (이 스크립트는 오픈 소스, 그리고 MIT 라이센스이므로 어떤 프로젝트에 사용할 수 있습니다.) 원한다면 Google Code에서 호스팅되고있는 코드를 다음과 같이 직접 사용할 수 있습니다 :

 <head> <meta charset="utf-8" /> <title>My Weblog</title> <!--[if lt IE 9]> <script   src = " http://html5shiv.googlecode.com/svn/trunk/html5.js "   > </ script>
   <! [endif] ->
 </ head>

이것으로 드디어 HTML5의 새로운 의미 론적 요소를 사용할 수있게되었습니다.

❧

Headers

그럼 예로 들었다 웹 페이지 로 돌아가 보자. 우선 헤더만을 봐 :

 <div id="header"> <h1>My Weblog</h1> <p class="tagline">A lot of effort went into making this effortless.</p> </div> … <div class="entry"> <h2>Travel day</h2> </div> … <div class="entry"> <h2>I'm going to Prague!</h2> </div>

특히 태그에 재미있는 곳은 없습니다. 만약 이것을 사용하고 싶다면 그대로 사용해도 상관 없습니다. HTML5로 합리적입니다. 그러나 HTML5에서는 헤더 및 섹션에 대한 몇 가지 의미 론적 요소를 제공합니다.

우선 <div id="header"> 을 삭제하자. 이 부분은 잘 보이는 것이지만, 뭔가 특별한 의미가있는 것은 아닙니다. div 요소는 특별한 의미를 정의하지 않고, id 속성도 마찬가지로 특별한 의미를 가지지 않습니다 (사용자 에이전트는 id 속성의 값이 어떤 의미가있는 것처럼 취급해서는 안됩니다). 이 부분을 <div id="shazbot"> 대체해도 같은 의미 즉 아무런 의미가 없습니다.

HTML5에서는 이러한 경우에 사용하는 요소로 <header> 요소가 정의되어 있습니다. HTML5의 사양은 <header> 요소의 구체적인 사용 방법 에 대해서도 언급하고 있습니다. 소재로 한 페이지 는 어떻게 될까요? :

 <header> <h1>My Weblog</h1> <p class="tagline">A lot of effort went into making this effortless.</p> … </header>

이것만으로는 좋습니다. 이것만으로도이 헤더임을 누구나 알 수 있습니다. 그러나 캐치 프레이즈는 어떻게하면 좋을까요? 이 부분 또한 Web 표준으로 지금까지 특별히 정의되지 않았기 때문에 잘 보이는 것입니다. 이것을 태그하는 것은 꽤 어려울 것입니다. 캐치 프레이즈는 부표와 비슷하지만 큰 제목에 "붙어"있습니다. 결국 이것은 섹션이없는 부제는 것입니다.

제목 요소이다 <h1> 이나 <h2> 웹페이지를 구조화합니다. 이들을 동시에 사용하여 웹 페이지를 도해하고 (추적하거나)하는 데 사용할 수있는 윤곽선을 만들 수 있습니다. 웹 페이지 읽기 소프트웨어는 문서의 개요를 사용하여 맹목적인 사용자가 웹 페이지 탐색을 할 수 있도록하고 있습니다. 문서 개요를 시각화할 수있는 온라인 도구 와 브라우저 확장 도 있습니다.

HTML 4에서 <h1> ~ <h6> 요소만 문서의 개요를 만들었습니다. 예로 든 페이지의 개요는 다음과 같은 것이됩니다 :

  My Weblog (h1)
    |
    + - Travel day (h2)
    |
    + - I'm going to Prague! (h2)

이것은 이것대로 문제 없지만, "A lot of effort went into making this effortless"라는 캐치 프레이즈를 마크업하는 방법이 없습니다. 만약 <h2> 를 사용하여 마크업하면 문서의 개요를 가장 단지 노드가 만들어집니다 :

  My Weblog (h1)
    |
    + - A lot of effort went into making this effortless (h2)
    |
    + - Travel day (h2)
    |
    + - I'm going to Prague! (h2)

이것은이 문서의 구조로서 적절하지 않습니다. 캐치 프레이즈는 섹션을 만들지 않을 단순한 부제에 지나지 않는 것입니다.

그럼 캐치 프레이즈를 <h2> , 각 기사 제목을 <h3> 에하면 좋은가? 아니, 이렇게 해 버리면 더 이상한 일이됩니다 :

  My Weblog (h1)
    |
    + - A lot of effort went into making this effortless (h2)
          |
          + - Travel day (h3)
          |
          + - I'm going to Prague! (h3)

외관뿐만 노드를 만들수에 본래라면 최상위 노드에 속하는 것이 아이를 "빼앗아 죽어 버린다 '. 이상으로부터, HTML 4는 소제목 문서 개요에 추가하지 않고 마크업 방법이 없다는 문제가있는 것으로 밝혀졌습니다. 이 문제에 대해 어떻게해도 "쓸모없는 노력의 더미"라는 결과가 끝납니다. 그래서 <p class="tagline"> 라고하는 의미적으로 전혀 의미없는 마크업을하게되어 버린 것입니다.

HTML5에서는 <hgroup> 요소에 의해이 문제를 해결할 수 있습니다. <hgroup> 요소는 두 개 이상의 관련 표제 요소를 정리해줍니다. "관련한다"는 무슨 뜻인가요? 그들 제목 요소가 문서 개요에서 하나의 노드에 저장된다는 것입니다.

다음과 같이 마크업하면 :

 <header>   <hgroup> 
     <h1> My Weblog </ h1>
      <h2>   A lot of effort went into making this effortless.   </ h2> 
    </ hgroup> 
   ...
 </ header>

 ...

 <div class="entry">
   <h2> Travel day </ h2>
 </ div>

 ...

 <div class="entry">
   <h2> I'm going to Prague </ h2>
 </ div>

문서의 개요는 다음과 같이 구성됩니다 :

  My Weblog (h1 of its hgroup)
    |
    + - Travel day (h2)
    |
    + - I'm going to Prague! (h2)

HTML5 Outliner 에서 자신이 만든 웹 페이지 제목 요소를 적절하게 사용하고 있는지 여부를 테스트할 수 있습니다.

❧

Articles

소재로 한 페이지 는 아직도 계속됩니다. 다음과 같은 태그는 어떻게 할 수 있을까요? :

 <div class="entry"> <p class="post-date">October 22, 2009</p> <h2> <a href="#" rel="bookmark" title="link to this post"> Travel day </a> </h2> … </div>

이 또한 적절한 HTML5입니다. 하지만 HTML5는 웹 페이지 문서를 마크업하는 데 더 적당한 요소를 제공하고 있습니다. 그것은 <article> 요소입니다.

  <article> 
   <p class="post-date"> October 22, 2009 </ p>
   <h2>
     <a href = "#"
        rel = "bookmark"
        title = "link to this post">
        Travel day
     </ a>
   </ h2>
   ...
  </ article>

이것은 매우 간단하다고는 말할 수 없겠 네요. 이외에도 아직 변경 할 점은 있습니다. 수정된 소스를보고하십시오. 다음 설명합니다 :

 <article> <header> <p class="post-date">October 22, 2009</p>   <h1> 
       <a href = "#"
          rel = "bookmark"
          title = "link to this post">
          Travel day
       </ a>
      </ h1> 
   </ header>
   ...
 </ article>

알 수 있을까요? <h2> 요소를 <h1< 하고 <header> 요소에 포함합니다. <header> 에 대해서는 이미 언급한 바와 같이 그 역할은 기사의 표제 (이 경우는 기사의 제목과 발행 일자)를 구성하는 요소를 정리하는 것입니다. 아니, 그렇지만,하지만 <h1> 문서마다 하나만으로는 없나요? 문서 개요를 엉망으로 버리지 않습니까? 그런 것이되지 않지만 왜 그렇게해야하는지 이해하기 위해 조금 자세히 설명합시다

HTML 4는 문서의 개요를 만들 수있는 것은 <h1> ~ <h6> 요소 뿐이었습니다. 개요 루트 노드를 하나만하고 싶은 경우 <h1> 는 마크업에서 하나 밖에 사용할 수 없습니다. 대해 HTML5의 사양은 문서 개요를 생성하기위한 알고리즘을 정의되고 , 그것은 HTML5의 새로운 의미 론적 요소가 포함되어 있습니다. HTML5 알고리즘은 <article> 요소는 새로운 섹션, 즉 문서의 개요에 새로운 노드를 만든다는 것으로되어 있습니다. 그리고 HTML5에서는 각 섹션에 <h1> 을 가질 수 있습니다.

이것은 HTML 4에서 크게 달라진 점이지만, 왜 좋은 변경인가하는 것을 설명하겠다. 많은 웹 페이지는 어떤 종류의 편지지 (템플릿)을 사용하여 제작되고 있습니다. 내용 중 일부는 다양한 곳에서 가지고 오게되고, 그들은 웹 페이지 곳곳에 삽입됩니다. 많은 연습 "이 HTML 코드를 복사하여 웹페이지에 붙여 보자"라는식으로 설명하는 것입니다. 아주 작은 콘텐츠의 경우 이래도 괜찮은 있겠지만 전체 섹션 태그를 붙인다고하는 경우는 어떨까요? 연습에서는 다음과 같이 설명하는 것입니다 : "이 HTML 코드를 복사하여 편집기에 붙여 삽입할 웹 페이지에 적합하도록 제목 태그의 수준을 수정해야한다"

다른 말로하면, HTML 4는 융통성의 국화 제목 요소를 가지고 있지 않다는 것입니다. 단 여섯 개의 숫자가있는 제목 요소 <h1> ~ <h6> , 밖에없고, 그 숫자가 그대로 점수 순서에 중첩되지 않으면 안됩니다. 이것은 특히 웹 페이지를 "편집"이 아닌 "생성"하는 경우는 적립되지 않습니다. HTML5에서는이 문제를 새로운 세쿠쇼닌구 요소와 기존의 제목 요소에 대한 새로운 규칙을 마련하는 것으로 해결했습니다. 만약 이미 새로운 세쿠쇼닌구 요소를 웹 페이지에서 사용하는 경우 :

 <article> <header> <h1>A syndicated post</h1> </header> <p>Lorem ipsum blah blah…</p> </article>

이 코드를 복사하여 아무것도 변경하지 않고 웹 페이지의 어디에 붙여 넣을 수 있습니다. 전체 <article> 로 둘러싸인 있으므로 <h1> 요소가 포함되어 있는지에 전혀 문제가 없습니다. 이 경우 <article> 요소는 붙여 넣은 문서 개요 노드에 새로운 노드로 삽입되고 <h1> 요소가 노드의 제목이 원래 그 웹페이지에 있던 다른 세쿠쇼닌구 요소는 문서 개요에서 이전과 동일한 상태로 유지합니다.

다른 웹 기술과 마찬가지로 현실은 좀 까다로운입니다. 새로운 "명쾌한"세쿠쇼닌구 요소 ( <h1> 가 포함된 <article> )는 오래된 "암시"세쿠쇼닌구 요소 ( <h1> ~ <h6> 자체)와 함께 생각지도 못한 일이 버립니다 . 모두가 아닌 중 하나를 이용해서 간단히 할 수 있지만. 다만 동일한 웹 페이지에서 모두 사용하지 않으면 안되는 경우, HTML5 Outliner 에서 어떤 결과가 있는지 확인하는 것이 좋습니다.

❧

Dates and Times

음모를 꾸미고 있지요? "에베레스트에서 알몸으로 성조기여 영원하라를 부르며 뒤로 스키를한다"등의 의미에서 흥미로운 아니라 시맨틱 마크업이 어디까지 진행되고 있는지라고하는 의미입니다. 는 소재로하고있는 페이지 의 자세히 살펴보겠습니다. 다음 주목하고 싶은 것은 다음과 같습니다 :

 <div class="entry">   <p class="post-date"> October 22, 2009 </ p> 
   <h2> Travel day </ h2>
 </ div>

질리지하고 있지요? 자주있는 패턴 - 기사 발행 일자 지정 - 전혀 시맨틱 마크업이 아닌 class 속성 어떻게든하려고합니다. 이 또한 적절한 HTML5가 있습니다. 변경하는 것이 요구되고있는 것은 없습니다. 하지만 HTML5에서는이 경우에 사용할 수있는 <time> 요소가 제공됩니다.

 <time datetime="2009-10-22" pubdate>October 22, 2009</time>

<time> 은 세 부분으로 나눌 수 있습니다 :

기계적으로 판단할 수있는 날짜와 시간
읽을 수있는 날짜와 시간
pubdate 는 모든 플래그

이 예에서는 datetime 속성에 날짜만 포함되고 시간은 포함하지 않습니다, 네 자리 연도와 두 자리 월, 두 자리 날짜가 "-"로 연결됩니다 :

 <time   datetime = "2009-10-22"   pubdate> October 22, 2009 </ time>

만약 시간을 추가하려면, T 문자를 날짜로 계속 쓰고 그 스물넷 시간 형식의 시간, 또는 시차를 씁니다.

 <time datetime="   2009-10-22T13 :59:47-04 : 00   "pubdate>
   October 22, 2009 1:59 pm EDT
 </ time>

(이 날짜와 시각의 포맷은 매우 유연합니다. HTML5 스펙에는 정확한 날짜와 시간 예제도 포함되어 있습니다 .)

텍스트 부분 - <time> 와 </time> 사이에있는 것 -도 기계적으로 판단할 수있는 날짜와 시간에 맞게 수정했다는 것을주의하십시오. 필요든지 이렇게해야한다는 것은 없습니다. datetime 속성에서 기계적으로 판단할 수있는 날짜와 시간조차 제대로 쓰고 있으면 텍스트 부분은 어떻게 써도 상관 없습니다. 즉 다음과 같이 써도 HTML5 타당하다는 것입니다 :

 <time datetime="2009-10-22">   last Thursday   </ time>

또는 이렇게 써도 HTML5로 적당하다 :

 <time datetime="2009-10-22"></time>

마지막은 pubdate 속성입니다. 이것은 부울 속성에서 필요한 경우 다음과 같이 추가하면됩니다 :

 <time datetime="2009-10-22"   pubdate   > October 22, 2009 </ time>

만약 속성을 "그대로"쓰고 싶지 않다면 이렇게 써도 상관 없습니다.

 <time datetime="2009-10-22"   pubdate = "pubdate"   > October 22, 2009 </ time>

pubdate 속성은 어떤 의미를 갖는 것입니까? 이 속성은 두 가지 의미를 가집니다. 만약 <time> 속성이 <article> 요소에있는 경우 해당 문서의 발행 일자를 의미하고 만약 <time> 가 <article> 중에는 않으면 전체 문서의 발행 날짜를 의미합니다.

그러면 전체 기사를 HTML5를 사용하여 작성 다시 봅시다 :

 <article> <header> <time datetime="2009-10-22" pubdate> October 22, 2009 </time> <h1> <a href="#" rel="bookmark" title="link to this post"> Travel day </a> </h1> </header> <p>Lorem ipsum dolor sit amet…</p> </article>

❧

Navigation

탐색 모음은 웹 사이트의 가장 중요한 부분 중 하나입니다. CNN.com에서는 "탭"각각의 웹 페이지에서 찾을 각종 뉴스 카테고리 - "기술", "건강", "스포츠"등 -에 링크되어 있습니다. Google 검색 결과 페이지에도 비슷한 것이있어, Google 다른 서비스 - "그림", "동영상", "지도"등 -에서 같은 검색어에 따라 검색 다시 할 수있게되어 있습니다. 예제 페이지 에 탐색 도구 모음 헤더에 있으며 예로서 다른 부분 - "홈", "블로그", "갤러리"등 -에 대한 링크가 있습니다.

탐색 모음은 다음과 같이 마크업 있습니다 :

 <div id="nav"> <ul> <li><a href="#">home</a></li> <li><a href="#">blog</a></li> <li><a href="#">gallery</a></li> <li><a href="#">about</a></li> </ul> </div>

물론 이것도 적절한 HTML5입니다. 목록으로 네 개의 항목이 표시 등록되어 있습니다만, 그것이 웹 사이트 탐색 것은 가르쳐주지 않습니다. 헤더의 일부가되어 있거나, 연결 문자열에서 시각적으로 유추할 수 있지만, 의미적으로 다른 링크 목록과 아무런 변함이없는 것입니다.

누가 웹 사이트 탐색의 의미를 걱정하는 것입니까? 예를 들어 장애를 가진 사람 입니다. 이유는 무엇입니까? 다음과 같은 상황을 생각해보세요 : 손발의 움직임이 제한되어있어 마우스를 사용할 수 어렵다면 그 보조를 위해 기본 탐색 추적 (또는 이전)위한 브라우저 확장을 사용할 것이다 . 또는 다음과 같은 상황도 고려하십시오 : 시각 장애가있는 경우 "음성 읽기 소프트웨어"라는 문장을 읽고 나서 웹페이지를 요약주는 것을 사용하는 것이 아닐까요. 웹 페이지의 제목 다음에 중요한 것은 기본 탐색 링크에 대한 정보입니다. 신속하게 사이트를 걷고 싶은 경우 탐색 표시줄에 바로 이동할 수 있도록 음성 읽기 소프트웨어에 알려줄 필요가있을 것입니다. 또한 본문을 빨리 읽고 싶은 경우는 탐색 모음을 날려 콘텐츠 본문을 빨리 읽으 같은 음성 읽기 소프트웨어에 전달할 필요가있을 것입니다. 어쨌든 탐색 링크를 기계적으로 식별할 수 있도록하는 것이 중요합니다.

즉 <div id="nav"> 와 웹 사이트 탐색을 마크업에 아무것도 실수는 아니지만, 옳다는 것도 아닙니다. 나쁘지 않다는 정도입니다. HTML5에서는 탐색 섹션을 의미 마크업하기 위해 <nav> 요소를 제공합니다.

  <nav> 
   <ul>
     <li> <a href="#"> home </ a> </ li>
     <li> <a href="#"> blog </ a> </ li>
     <li> <a href="#"> gallery </ a> </ li>
     <li> <a href="#"> about </ a> </ li>
   </ ul>
  </ nav>

질문 : 본문에 점프 (skip links) 는 <nav> 요소와 호환이 있습니까? 아니면 지금까지대로 HTML5에서도 메인 페이지로 이동하는 링크가 필요한 것일까요?

답변 : 본문에 점프는 읽기 소프트웨어 탐색 섹션을 건너뛸 수 있도록하는 것입니다. 이것은 타사 소프트웨어를 사용하여 마우스를 사용하지 않고 웹 사이트를 방문하는 장애인들이 매우 도움이 될 것입니다 ( 어떻게, 그리고 왜 본문에 점프 제공하는지 ).

음성 읽기 소프트웨어를 업데이 트 <nav> 요소를 인식하게되면, <nav> 요소로 마크업 탐색 섹션을 비행 여부를 자동으로 찾을 수있는 것이라고 생각되므로 본문 에 점프는 불필요하게 될 것입니다. 하지만 HTML5에 대응하는 음성 읽기 소프트웨어에 모두 장애가있는 사람들이 업데이 트까지는 아직 시간이 좀 걸릴 테니 <nav> 섹션을 날리기위한 메인 컨텐츠로 가기를 지속적으로 제공해야 할 것이다.

❧

드디어 소재로 한 페이지 의 마지막에 겨우 도착했습니다. 마지막으로 이야기하는 것은 웹 페이지의 마지막에있는 것, 즉 바닥글입니다. 바닥글은 다음과 같이 마크업 있습니다 :

 <div id="footer"> <p>&#167;</p> <p>&#169; 2001&#8211;9 <a href="#">Mark Pilgrim</a></p> </div>

합리적인 HTML5 네요. 물론 이대로도 괜찮지만, HTML5에서는보다 적절한 <footer> 요소를 제공합니다.

  <footer> 
   <p> § </ p>
   <p> © 2001-9 <a href="#"> Mark Pilgrim </ a> </ p>
  </ footer>

<footer> 요소로 적합한 것은 어떤 것입니까? 아마 당신이 지금 <div id="footer"> 에 넣고있는 것이 그렇다. 이것은 여러 번 반복한 질문이지만, 그렇게 밖에 말할 수 없습니다. HTML5 스펙은 "보행자는 일반적 섹션에 누가 썼는지 및 관련 문서는인지, 저작권 등에 대한 정보를 저장한다"고합니다. 예제 페이지에서도 그렇게되어 있군요 : 짧은 저작권 정보 진술 문과 제작자에 대한 웹 페이지에 대한 링크 이루어져 있습니다.有名なサイトをいくつか見てみれば、フッターにどういうものが含まれるのかわかるでしょう。

CNNは著作権情報の他に各言語の翻訳やサービス利用規約、プライバシー・ポリシー、「CNNについて」、「お問い合わせ」、「ヘルプ」などのリンクが納められています。これらは全て<footer>にふさわしいものです。
Googleでは飾り気の無さで有名なホームページですが、「広告掲載」や「ビジネスソリューション」、「Google について」、著作権情報の一文とプライバシー・ポリシーへのリンクがあります。これらもまた<footer>で括ることができます。
私(Mark Pilgrim)のブログは自分の管理する他のウェブサイトのへのリンクと著作権情報から成ります。もちろんこれらも<footer>要素にふさわしいものです(ただし、それらのリンクはナビゲーションではなく他のウェブサイトにあるプロジェクトへの単なるリンクの集合に過ぎないので<nav>要素で括るべきではありません )。

最近「 Fat footers 」は爆発的に流行しています。 W3Cのウェブサイトを見てみてください。三つのカラムに分けられて、「Navigation」、「Contact W3C」、そして「W3C Updates」とあります。これのマークアップは以下のような感じになっています:

 <div id="w3c_footer"> <div class="w3c_footer-nav"> <h3>Navigation</h3> <ul> <li><a href="/">Home</a></li> <li><a href="/standards/">Standards</a></li> <li><a href="/participate/">Participate</a></li> <li><a href="/Consortium/membership">Membership</a></li> <li><a href="/Consortium/">About W3C</a></li> </ul> </div> <div class="w3c_footer-nav"> <h3>Contact W3C</h3> <ul> <li><a href="/Consortium/contact">Contact</a></li> <li><a href="/Help/">Help and FAQ</a></li> <li><a href="/Consortium/sup">Donate</a></li> <li><a href="/Consortium/siteindex">Site Map</a></li> </ul> </div> <div class="w3c_footer-nav"> <h3>W3C Updates</h3> <ul> <li><a href="http://twitter.com/W3C">Twitter</a></li> <li><a href="http://identi.ca/w3c">Identi.ca</a></li> </ul> </div> <p class="copyright">Copyright © 2009 W3C</p> </div>

セマンティックなHTML5に変換するためには以下のような変更を加えます:

いちばん外側の<div id="w3c_footer">を<footer>要素に変換する。
最初の二つの<div class="w3c_footer-nav">を<nav>要素に変換し、三つ目は<section>要素に変換する。
<h3>の見出しを<h1>に変換し、セクショニング要素内に入るようにする。 <nav>要素は<article>要素と同じように文書のアウトラインにセクションを作成します。

最終的にマークアップは以下のようになります:

 <footer> 
   <nav> 
     <h1>   Navigation  </h1> 
     <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/standards/">Standards</a></li>
      <li><a href="/participate/">Participate</a></li>
      <li><a href="/Consortium/membership">Membership</a></li>
      <li><a href="/Consortium/">About W3C</a></li>
     </ ul>
   </nav> 
   <nav> 
     <h1>  Contact W3C  </h1> 
     <ul>
      <li><a href="/Consortium/contact">Contact</a></li>
      <li><a href="/Help/">Help and FAQ</a></li>
      <li><a href="/Consortium/sup">Donate</a></li>
      <li><a href="/Consortium/siteindex">Site Map</a></li>
     </ ul>
   </nav> 
   <section> 
     <h1>  W3C Updates  </h1> 
     <ul>
      <li><a href="http://twitter.com/W3C">Twitter</a></li>
      <li><a href="http://identi.ca/w3c">Identi.ca</a></li>
     </ ul>
   </section> 
  <p class="copyright">Copyright © 2009 W3C</p>
 </footer>

❧

訳注

저작자표시

'HTML5.0' 카테고리의 다른 글

canvas source (0)	2012.06.05
HTML 5.0 구조 및 FORM image (0)	2012.06.04
adobe Edge (0)	2012.06.04
캔버스 간단한 마우스 그리기 (0)	2012.06.04
캔버스 이미지 뛰우기 . (0)	2012.06.04

Posted by 사라링

트랙백 : 댓글

JAVA와 놀자