태그를 사용할 때 사람들이 저지르는 가장 흔한 실수 중 하나는 HTML5의 <section>을 <div>와 동일시하는 것입니다. 특히 스타일 지정 목적으로 태그를 직접 대체용으로 사용하는 것입니다. XHTML이나 HTML4에서는 다음과 같은 코드를 자주 볼 수 있습니다.
<!-- HTML 4 스타일 코드 --><div id=wrapper> <div id=header> <h1>내 슈퍼 페이지</h1> 헤더 콘텐츠 </div> <div id=main> 페이지 콘텐츠 < /div> <div id=secondary> 보조 콘텐츠 </div> <div id=footer> 바닥글 콘텐츠 </div></div>
이제 HTML5에서는 다음과 같이 표시됩니다.
이 코드를 복사하지 마세요! 이건 틀렸어!
<section id=wrapper> <header> <h1>내 슈퍼 듀퍼 페이지</h1> <!-- 헤더 콘텐츠 --> </header> <section id=main> <!-- 페이지 콘텐츠 --> </ section> <section id=secondary> <!-- 보조 콘텐츠 --> </section> <footer> <!-- 바닥글 콘텐츠 --> </footer></section>
이 사용법은 올바르지 않습니다:**
스타일 컨테이너가 아닙니다. **section 요소는 문서 요약을 작성하는 데 사용되는 콘텐츠의 의미 부분을 나타냅니다. 헤더를 포함해야 합니다. 페이지 컨테이너 역할을 하는 요소(예: HTML 또는 XHTML 스타일)를 찾고 있다면 Kroc Camen이 제안한 대로 본문 요소에 직접 스타일을 작성하는 것이 좋습니다. 여전히 추가 스타일 컨테이너가 필요한 경우 div를 사용하세요.
위의 아이디어를 바탕으로 다음은 HTML5 및 일부 ARIA 역할 기능을 올바르게 사용하는 예입니다(자신의 디자인에 따라 div를 추가해야 할 수도 있음).
<body><header> <h1>나의 멋진 페이지</h1> <!-- 헤더 콘텐츠 --></header><div role=main> <!-- 페이지 콘텐츠 --></div>< aside role=complementary> <!-- 보조 콘텐츠 --></aside><footer> <!-- 바닥글 콘텐츠 --></footer></body>2. 헤더와 hgroup은 필요할 때만 사용하세요
물론 쓸 필요가 없는 라벨을 쓰는 것은 의미가 없습니다. 안타깝게도 헤더와 hgroup이 아무 목적 없이 오용되는 경우를 자주 봅니다. 자세한 이해를 위해 헤더 및 hgroup 요소에 대한 두 기사를 읽으면 다음과 같이 내용을 간략하게 요약할 수 있습니다.
헤더는 문서에서 여러 번 사용될 수 있으므로 이 코딩 스타일이 대중화될 수 있습니다.
이 코드를 복사하지 마세요! 여기에는 헤더가 필요하지 않습니다 –>
<header> <h1>내 최고의 블로그 게시물</h1> </header> <!-- 기사 내용 --></article>
헤더 요소에 헤더 요소가 하나만 포함된 경우 헤더 요소를 삭제하세요. 기사 요소는 이미 헤더가 문서 요약에 표시되도록 보장하고 헤더는 위에서 정의한 대로 여러 요소를 포함할 수 없으므로 추가 코드를 작성하는 이유는 무엇입니까? 간단히 다음과 같이 작성하세요.
<article> <h1>내 최고의 블로그 게시물</h1> <!-- 기사 내용 --></article>
잘못된 사용
헤더 주제와 관련하여 hgroup이 잘못 사용되는 경우도 자주 봅니다. 때때로 hgroup과 헤더를 함께 사용하면 안 됩니다:
첫 번째 질문은 일반적으로 다음과 같습니다.
이 코드를 복사하지 마세요! 여기에는 hgroup이 필요하지 않습니다. –> <hgroup> <h1>내 최고의 블로그 게시물</h1> </hgroup> <p>작성: Rich Clark</p></header>
이 예에서는 hgroup을 제거하고 제목이 자연스럽게 실행되도록 하세요.
<header> <h1>내 최고의 블로그 게시물</h1> <p>Rich Clark 작성</p></header>
두 번째 질문은 또 다른 불필요한 예입니다.
이 코드를 복사하지 마십시오! 여기에는 헤더가 필요하지 않습니다. –>
<hgroup> <h1>내 회사</h1> <h2>1893년 설립</h2> </hgroup></header>
헤더의 유일한 하위 요소가 hgroup이라면 헤더는 또 어떤 역할을 합니까? 헤더에 다른 요소(예: 여러 hgroup)가 없는 경우 헤더를 직접 제거하면 됩니다.
<hgroup> <h1>내 회사</h1> <h2>1893년 설립</h2></hgroup>3. 목록 형태의 모든 링크를 탐색 창에 넣지 마세요
HTML5에 30개의 새로운 요소가 도입되면서(원본 출판 당시) 의미론적 및 구조적 태그 구성에 대한 우리의 선택은 다소 부주의해졌습니다. 즉, 우리는 초의미론적 요소를 남용해서는 안 됩니다. 불행히도 nav는 그러한 남용의 예입니다. nav 요소의 사양은 다음과 같습니다.
nav 요소는 다른 페이지나 이 페이지의 다른 부분으로 연결되는 페이지의 블록을 나타내며 탐색 연결이 포함되어 있습니다.
참고: 페이지의 모든 링크를 nav 요소에 배치할 필요는 없습니다. 이 요소는 기본 탐색 블록으로 사용됩니다. 구체적인 예를 들자면, 바닥글에는 서비스 약관, 홈페이지, 저작권 안내 페이지 등 많은 링크가 있는 경우가 많습니다. 이러한 상황을 처리하는 데는 바닥글 요소만으로도 충분하지만 여기서는 nav 요소를 사용할 수도 있지만 일반적으로 불필요하다고 생각합니다.
키워드는 기본 탐색입니다. 물론 우리는 무엇이 중요한지에 대해 하루 종일 서로에게 물을 수도 있습니다. 개인적으로 이렇게 정의합니다.
더 쉽게 액세스할 수 있도록 바로가기 점프에 이 탐색 태그에 대한 링크를 추가하시겠습니까?
이 질문에 대한 대답이 '아니오'라면, 인사를 하고 스스로 떠나십시오.
4. 그림 요소의 일반적인 실수그림과 그림 캡션의 올바른 사용은 실제로 마스터하기가 어렵습니다. 흔히 저지르는 실수 몇 가지를 살펴보겠습니다.
모든 사진이 인물은 아닙니다
위에서 불필요한 코드를 작성하지 말라고 말씀드렸습니다. 이번 오류도 마찬가지입니다. 나는 많은 웹사이트에서 모든 사진을 그림으로 표시하는 것을 보았습니다. 사진을 위해 추가 태그를 추가하지 마세요. 당신은 단지 자신에게 상처를 주고 있으며 페이지를 더 명확하게 만들지 못하고 있습니다.
그림은 사양에서 흐르는 콘텐츠로 설명되며 때로는 자체 제목 설명이 포함되어 있습니다. 일반적으로 문서 흐름에서 독립적인 단위로 참조됩니다. 이것이 그림의 아름다움입니다. 문서 흐름에 영향을 주지 않고 기본 콘텐츠 페이지에서 사이드바로 이동할 수 있습니다.
이러한 문제는 앞서 언급한 HTML5 요소 흐름도에서도 다룹니다.
다이어그램이 순전히 프레젠테이션용이고 문서의 다른 곳에서 참조되지 않은 경우에는 확실히 그렇지 않습니다.
. 나머지는 상황에 따라 다르지만 먼저 스스로에게 질문해 보세요. 이 이미지는 맥락과 관련이 있어야 합니까? 그렇지 않다면 아마도 둘 중 하나도 아닐 것입니다(아마도 그럴 것입니다). 계속해서: 이것을 부록으로 옮길 수 있나요? 두 질문이 모두 적용된다면 아마도 그럴 것입니다.
로고는 피규어가 아닙니다.
또한 로고는 피규어에도 적용되지 않습니다. 다음은 제가 사용하는 몇 가지 일반적인 코드 조각입니다.
<!-- 이 코드를 복사하지 마세요! 이것은 잘못된 것입니다.--><header> <h1> <Figure>  </Figure> 내 회사 이름 </h1 > </header><!-- 이 코드를 복사하지 마세요. 이것도 잘못된 것입니다.--><header> <Figure>  </Figure></header>
더 이상 할 말이 없습니다. 이것은 매우 흔한 실수입니다. 소들이 집에 갈 때까지 로고가 H1 태그여야 하는지에 대해 서로 논쟁할 수 있지만 여기서는 그게 요점이 아닙니다. 진짜 문제는 그림 요소를 과도하게 사용하는 것입니다. 그림은 문서 내에서만 참조하거나 섹션 요소로 묶어야 합니다. 귀하의 로고가 이런 방식으로 참조될 가능성은 거의 없다고 생각합니다. 간단합니다. 그림을 사용하지 마세요. 다음 작업을 수행하면 됩니다.
<header> <h1>내 회사 이름</h1> <!-- 여기에 더 많은 내용이 있습니다 --></header>
그림은 단순한 그림이 아니다
그림에 대한 또 다른 일반적인 오해는 그림에서만 사용된다는 것입니다. 그림은 비디오, 오디오, 차트, 인용문, 표, 코드, 산문 또는 이들 또는 기타 요소의 조합일 수 있습니다. 숫자를 그림으로 제한하지 마십시오. 태그를 이용해 콘텐츠를 정확하게 기술하는 것이 웹 표준의 역할이다.
5. 불필요한 유형 속성을 사용하지 마십시오이는 일반적인 문제이지만 실수는 아니며 모범 사례를 통해 이러한 스타일을 피해야 한다고 생각합니다.
HTML5에서는 스크립트 및 스타일 요소에 더 이상 유형 속성이 필요하지 않습니다. 그러나 이러한 항목은 CMS에 의해 자동으로 추가될 가능성이 높으므로 제거하기가 쉽지 않습니다. 그러나 직접 코딩하거나 템플릿을 완벽하게 제어할 수 있는 경우에는 type 속성을 포함할 이유가 없습니다. 모든 브라우저는 스크립트는 javascript이고 스타일은 CSS 스타일이라고 생각하므로 더 이상 이렇게 할 필요가 없습니다.
<!-- 이 코드는 너무 중복되므로 복사하지 마세요! --><link type=text/css rel=stylesheet href=css/styles.css /><script type=text/javascript src=js/ scripts /></script>
실제로 해야 할 일은 다음과 같이 작성하는 것뿐입니다.
<link rel=stylesheet href=css/styles.css /><script src=js/scripts /></script>
문자 집합을 지정하는 코드도 생략할 수 있습니다. Mark Pilgrim은 Dive into HTML5의 의미론 장에서 이에 대해 설명합니다.
6. 양식 속성의 잘못된 사용HTML5에는 몇 가지 새로운 양식 속성이 도입되었습니다. 사용법에 대한 몇 가지 참고 사항은 다음과 같습니다.
부울 속성
일부 멀티미디어 요소 및 기타 요소에도 부울 속성이 있습니다. 여기에도 동일한 규칙이 적용됩니다.
새로운 양식 속성 중 일부는 부울입니다. 즉, 레이블에 나타나는 한 해당 동작이 설정된다는 것을 의미합니다. 이러한 속성은 다음과 같습니다.
솔직히 이런 모습은 거의 본 적이 없습니다. 필수를 예로 들면 일반적인 것은 다음과 같습니다.
<!-- 이 코드를 복사하지 마세요! --><input type=email name=email require=true /><!-- 또 다른 실수의 예 --><input type=email name = 이메일 필요=1 />
엄밀히 말하면 이는 별 일이 아니다. 브라우저의 HTML 파서가 태그에 나타나는 필수 속성을 확인하는 한 해당 기능이 적용됩니다. 하지만 반대로 require=false라고 쓰면 어떻게 될까요?
<!-- 이 코드를 복사하지 마세요. --><입력 유형=이메일 이름=이메일 필요=false />
파서는 사용자가 수행하지 말라고 지시하더라도 필수 속성을 유효한 것으로 처리하고 해당 동작을 수행합니다. 이것은 분명히 당신이 원하는 것이 아닙니다.
부울 속성을 사용하는 세 가지 유효한 방법이 있습니다. (후자의 두 개는 xthml에서만 유효합니다)
위의 예를 작성하는 올바른 방법은 다음과 같습니다.
<입력 유형=이메일 이름=이메일 필요 />요약
이상은 HTML5의 6가지 일반적인 잘못된 사용법을 피하는 방법에 대해 편집자가 소개한 내용입니다. 질문이 있는 경우 메시지를 남겨주시면 편집자가 제 시간에 답변해 드리겠습니다. 또한 VeVb 무술 웹사이트를 지원해 주신 모든 분들께 감사드립니다!