안전 그림 태그는 정의합니다. Figure 및 figcaption 요소는 웹 표준입니다. 그러나 우리는 지금 그것에 대해 이야기하고 있지 않습니다. 진짜 실수는 요소를 남용하는 것입니다. 문서에서 참조할 때만 사용해야 합니다. 귀하가 귀하의

그림 태그는 정의합니다. Figure 및 figcaption 요소는 웹 표준입니다. 그러나 우리는 지금 그것에 대해 이야기하고 있지 않습니다. 진짜 실수는 요소를 남용하는 것입니다. 문서에서 참조할 때만 사용해야 합니다. 귀하가 귀하의

그리고 사용자의 질문에 답하면서 HTML5 마크업이 있는 웹사이트를 많이 보았습니다. 이 기사에서는 내가 많이 접했던 마크업 오류와 나쁜 관행을 보여주고 이를 피하는 방법을 설명합니다.

태그를 사용하지 마세요.
장식용 포장지로

내가 알아차린 가장 일반적인 문제 중 하나는 진부한 대체
"ov HTML5 구조적 요소, 특히
". 즉, XHTML 또는 HTML4의 내용이 다음과 같을 때:
다음과 같이 다시 작성했습니다.

이것은 잘못된 것입니다.
랩이 아닙니다. 이 요소는 "문서 개요"를 작성하는 데 사용되는 콘텐츠의 의미 블록을 의미하며 제목을 포함해야 합니다. 둘러쌀 요소가 필요한 경우 다음을 시도하십시오. (Kroc Camen은 제공할 것이 있습니다). 추가 래퍼가 필요한 문제가 해결되지 않으면 좋은 오래된
". HTML5의 도래와 함께
"당신은 죽지 않았고 그들은 이 경우에 완벽합니다.

위의 예를 다음과 같이 HTML5를 사용하여 마크업하는 것이 좋습니다.

나의 슈퍼 듀퍼 페이지

어떤 요소를 사용해야 할지 잘 모르겠다면 요소 선택 순서도( 약 번역기: 항목 맨 아래 참조).

사용
그리고
필요할 때만

필요하지 않다면 코드를 작성해도 소용이 없겠죠? 아아, 나는 종종 어떻게
그리고
필요하지 않은 곳. 요소에 대해 읽을 수 있습니다.
그리고
더 자세히, 나는 간략하게 핵심 사항을 요약할 것입니다:
  • 요소
    소개 또는 탐색 보조 도구 그룹을 나타내며 일반적으로 섹션 제목을 포함합니다.
  • 요소
    요소 집합을 그룹화합니다.

    -

    , 여러 수준(소제목, 대체 제목 등)으로 구성된 경우 섹션 제목을 나타냅니다.
초과 요소
요소가
문서에서 여러 번 사용할 수 있습니다. 따라서 다음과 같은 경우가 많습니다.

내 최고의 블로그 게시물

만약 당신의

헤더 요소가 하나만 포함되어 있으므로 필요하지 않습니다. 이 경우 요소
제목이 "문서 개요"(문서 개요)에 포함될 것임을 이미 보장하고 한 번
정의된 대로 여러 요소를 포함하지 않으므로 안전하게 제거할 수 있습니다. 이것으로 충분합니다.

내 최고의 블로그 게시물

오용
그리고 다시 헤더에 대해: 나는 종종 요소의 잘못된 사용을 봅니다.
. 사용해서는 안 된다
함께
, 만약에:
  • 헤더가 하나뿐입니다.
  • 그 자체로 좋은(즉,
    ).
첫 번째 경우:

내 최고의 블로그 게시물

리치 클라크

이 경우 hgroup을 제거하면 됩니다.

내 최고의 블로그 게시물

리치 클라크

두 번째 경우는 불필요하게 요소를 사용하는 또 다른 예입니다.

내 회사

1893년 설립

외동아이라면

"이
왜 필요해
? 추가 항목이 없는 경우
"e(즉, 자매의
), 그냥 제거
.

내 회사

1893년 설립

모든 링크의 프레임을 지정하지 마십시오.

HTML5는 구조화되고 의미 있는 마크업을 생성할 수 있는 기능을 제공하기 위해 30개의 새로운 요소를 도입했습니다. 그러나 새로운 의미론적 요소를 남용해서는 안 됩니다. 불행히도 이것이 바로