figure 및 figcaption 요소는 웹 표준입니다. 일반적인 HTML5 마크업 실수 피하기 Nature Notes
일반적으로 책, 잡지, 이미지, 표 또는 코드 예제와 같은 인쇄 출판물에는 일반적으로 캡션이 수반됩니다. 지금까지는 CSS 클래스 이름에 의존하지 않고 HTML에서 직접 이러한 유형의 콘텐츠를 의미론적으로 구분할 수 없었습니다. HTML5는 새로운 요소인 and 로 이 문제를 해결하기를 희망합니다. 알아 보자!
요소요소는 다이어그램, 그림, 사진 및 코드 예제(무엇보다도)를 강조하기 위해 요소와 함께 사용하기 위한 것입니다. 사양의 내용은 다음과 같습니다.
요소는 일반적으로 문서의 기본 콘텐츠에서 단일 요소를 참조하며 해당 의미에 영향을 주지 않고 문서에서 제거할 수 있는 독립적인 콘텐츠의 일부이며 반드시 캡션이 있는 것은 아닙니다.
요소요소는 선택 사항이며 이전에 나타날 수 있습니다. 또는내부 내용 뒤에 . 요소 자체에 여러 하위 요소(예: 또는 ).
그래서 우리는 사양이 이러한 요소에 대해 말하는 것을 배웠습니다. 그것들을 사용하는 방법? 예를 들어 살펴보겠습니다.
이미지를 위해캡션이 없는 요소의 이미지:
이에 대한 코드는 다음과 같습니다.
설명 캡션이 있는 요소 내부의 이미지:
보르네오에서 온 건방진 원숭이. 사진: 리차드 클라크 그리고 우리가 사용한 코드:
보르네오에서 온 건방진 원숭이. 사진: 리차드 클라크
공통 캡션을 사용하여 하나의 요소 안에 여러 이미지 배치:
왼쪽부터: 쿠카부라, 펠리컨, 다색 잉꼬. 리처드 클라크의 사진 그리고 코드 자체:
왼쪽부터: 쿠카부라, 펠리컨, 다색 잉꼬. 리처드 클라크의 사진
이 요소는 코드 예제에도 사용할 수 있습니다.
Creative Commons Attribution Share-alike 라이선스
rel="license" 와 함께 크리에이티브 커먼즈 라이선스 링크 주위에 요소를 사용합니다.아래는 이에 대한 코드입니다.
Creative Commons Attribution Share-alike 라이선스
rel="license"와 함께 크리에이티브 커먼즈 라이선스 링크 주위에 요소를 사용합니다.과의 차이점이전 기사에서 요소에 대해 이미 이야기했지만 둘 사이의 차이점에 주목하는 것이 중요합니다. 또는 중에서 선택할 때 요소의 콘텐츠가 콘텐츠를 이해하는 데 필수적인지 스스로에게 물어볼 가치가 있습니다.
- 콘텐츠가 관련성이 있고 필수적이지 않은 경우 를 사용합니다.
- 콘텐츠가 중요하지만 일반적인 콘텐츠 흐름에서의 위치가 그다지 중요하지 않은 경우 요소가 사용됩니다.
텍스트에서 내용의 위치가 이전 및 다음 내용과 밀접하게 관련되어 있는 경우 더 적절한 요소를 사용해야 합니다. 예를 들어 , good old , 또는 심지어 콘텐츠 유형에 따라 다릅니다.
이미지 및 코드 예제로 사용을 제한하지 마십시오. 요소에 사용하기에 적합한 다른 콘텐츠는 오디오, 비디오, 그래픽(또는 사용 가능), 시 또는 통계표가 될 수 있습니다.
그러나 요소의 사용이 항상 적절한 것은 아닙니다. 예를 들어 그래픽 배너는 에 배치하면 안 됩니다. 이것을 위해 그것을 사용하십시오 .
이 기사에서 설명했듯이 요소는 많은 가능성을 열어줍니다. 특정 상황에 적합한지 확인하는 것을 잊지 마십시오. 당신이 마크업에 대해 생각이 없을 것 같지는 않지만, 그렇죠?
HTML5Doctor.com에 게시된 Richard Clark의 원본 기사 "The figure & figcaption elements" 번역.
Ekaterina Mordvina가 번역했습니다.
그리고 사용자의 질문에 답하면서 HTML5 마크업이 있는 웹사이트를 많이 봤습니다. 이 기사에서는 내가 많이 접한 몇 가지 마크업 오류와 잘못된 관행을 보여주고 이를 방지하는 방법을 설명합니다.
스타일 지정을 위해 태그를 래퍼로 사용하지 마십시오. 내가 본 가장 일반적인 문제 중 하나는 "s"를 HTML5 구조 요소, 특히 "s"로 대체하는 것입니다. 저것들. XHTML이나 HTML4에서 다음과 같은 경우:내 슈퍼 듀퍼 페이지는 다음과 같이 다시 작성되었습니다.
래퍼가 아닙니다. 이 요소는 "문서 개요"를 작성하는 데 사용되는 콘텐츠의 의미 블록을 의미하며 제목을 포함해야 합니다. 래퍼 요소가 필요한 경우 주변을 둘러보세요(Kroc Camen이 제공할 수 있음). 그래도 추가 래퍼가 필요한 문제가 해결되지 않으면 좋은 오래된 "s를 사용하십시오. HTML5의 출현으로 "s는 죽지 않았으며 이 경우에 훌륭합니다.
위의 예를 다음과 같이 HTML5를 사용하여 마크업하는 것이 좋을 것입니다.
내 슈퍼 듀퍼 페이지
어떤 요소를 사용해야 할지 잘 모르겠다면 요소 선택 순서도( 약. 번역기: 항목 맨 아래 참조).
and는 필요할 때만 사용하세요. 꼭 필요하지 않다면 코드를 작성하는 것이 의미가 없겠죠? 아아, 그러나 나는 종종 그들이 필요하지 않은 방법과 위치를 관찰합니다. 요소 등에 대해 읽을 수 있지만 핵심 사항을 간략하게 설명하겠습니다.- 요소는 소개 또는 탐색 지원 그룹을 나타내며 일반적으로 섹션 제목을 포함합니다.
- 요소는 여러 수준(하위 제목, 대체 제목 등)으로 구성된 경우 섹션 제목을 나타내는 요소 집합을 그룹화합니다.
내 최고의 블로그 게시물
헤더 요소가 하나만 있으면 필요하지 않습니다. 이 경우 요소는 제목이 "문서 개요"에 포함될 것임을 이미 보장하고 여러 요소(정의에 따라)를 포함하지 않으므로 안전하게 제거할 수 있습니다. 이것만으로도 충분합니다:
내 최고의 블로그 게시물
- 헤더는 하나뿐
- 그 자체로 좋습니다(즉, 없이).
내 최고의 블로그 게시물
리치 클라크
이 경우 hgroup을 제거하면 됩니다.
내 최고의 블로그 게시물
리치 클라크
두 번째 경우는 요소를 불필요하게 사용하는 또 다른 예입니다.
우리 회사 설립 1893
유일한 자식이 "이고 이것이 이면 왜 필요한가요? "e(즉, 의 자매)에 추가 요소가 없으면 를 제거하십시오.
우리 회사 설립 1893
참고: 모든 링크 그룹이 탐색 요소에 배치되어야 하는 것은 아닙니다. 기본 탐색에 사용해야 합니다. 종종 바닥글에는 사이트의 다양한 페이지에 대한 작은 링크 목록(홈, 도움말, 사용 약관, 등). 이 경우 하나의 바닥글이면 충분하며, 내비게이션을 멈출 수 있는 것은 아니지만 필수는 아닙니다.
WHATWG HTML 사양핵심 문구는 "기본 탐색"입니다. 주된 의미에 대해 오랫동안 논쟁할 수 있지만 저에게는 다음과 같습니다.
- 기본 탐색
- 사이트 검색
- 보조 내비게이션(논쟁의 여지가 있음)
- 페이지 내 탐색(예: 긴 기사 내에서)
- 페이지 전환
- 소셜 링크(소셜 링크가 기본 탐색인 경우에는 예외가 있을 수 있습니다. 예를 들어 about.me 또는 flavors.me와 같은 사이트)
- 게시물 태그
- 게시물 카테고리
- 3차 탐색
- 체적 바닥글
- "제목도 괜찮을 것 같으면 사용하지 마세요" - IRC의 Hixie
- 편의상 "이동"을 추가하시겠습니까?
사양에서는 이를 "제목이 있는 독립형 콘텐츠, 일반적으로 독립형 스트림 요소"라고 설명합니다. 여기에 전체 아름다움이 있습니다. 요소는 예를 들어 사이드 바로 주요 콘텐츠에서 쉽게 이동할 수 있습니다.
위의 요소 선택 순서도는 .
이미지가 순전히 프리젠테이션용이고 문서의 어느 곳에서도 참조되지 않는다면 . 그렇지 않으면 "이 이미지가 이해를 위해 현재 컨텍스트에서 필요한가요?"라는 질문을 스스로에게 해보십시오. 그렇지 않다면 그렇지 않은 것 같습니다(아마도). 그렇다면 "이것을 앱으로 옮길 수 있습니까?"라고 스스로에게 물어보십시오. 두 질문에 대한 답이 모두 '예'라면 작동할 수 있습니다.
로고도 마찬가지입니다. 종종 나는 다음 사용법을 봅니다.
내 회사 이름 
추가할 것이 없습니다. 이것은 사실이 아닙니다. 로고가 있어야 하는지에 대해 오랫동안 논쟁할 수 있지만 지금은 그것에 대해 이야기하지 않습니다. 진짜 실수는 . 문서에서 참조할 때만 사용해야 합니다. 어디에서나 로고를 참조할 가능성은 거의 없습니다. 이것으로 충분합니다:
회사 이름은 단순한 이미지 이상이 될 수 있습니다. 요소에 대한 또 다른 일반적인 오해는 이미지에만 사용할 수 있다는 가정입니다. 하지만 그렇지 않습니다. 여기에는 비디오, 오디오, 그래픽(예: SVG), 인용문, 표, 코드 블록, 시 또는 이들의 조합이 포함될 수 있습니다. 사진만 사용하는 것으로 자신을 제한하지 마십시오. 웹 표준 지지자로서 우리의 임무는 마크업의 내용을 설명하는 것입니다.
얼마 전에 나는 요소에 대해 더 자세히 썼습니다. 더 잘 이해하고 싶거나 기억을 되살리고 싶다면 읽어보기를 권한다.
불필요한 유형 속성을 사용하지 마십시오 이것은 아마도 HTML5 갤러리에서 발생하는 가장 일반적인 문제일 것입니다. 버그는 아니지만 피하는 것이 최선이라고 생각합니다.HTML5에서는 및 요소에 대한 유형 속성을 지정할 필요가 없습니다. CMS에 의해 자동으로 추가되는 경우 제거하기 쉽지 않을 수 있지만 직접 작성하거나 템플릿을 관리할 수 있는 경우 코드에 포함할 필요가 없습니다. 왜냐하면 모든 브라우저는 기본적으로 모든 스크립트가 JavaScript로 작성되고 스타일이 CSS인 것으로 간주하므로 이러한 마크업은 중복됩니다.
대신 다음과 같이 간단하게 작성할 수 있습니다.
무엇보다도 인코딩을 지정하는 데 필요한 코드의 양을 줄일 수도 있습니다. Dive into HTML5의 의미 체계에 대한 Mark Pilgrim의 장에서 이러한 모든 사례를 설명합니다.
양식 속성의 잘못된 사용 HTML5에 많은 새로운 양식 속성이 도입되었다는 사실을 이미 알고 계실 것입니다. 곧 다루겠지만 지금은 하지 말아야 할 일에 대해 간략히 설명하겠습니다 부울 속성 멀티미디어 요소에 대한 부울 속성과 몇 가지 다른 속성도 있습니다. 내가 설명하는 규칙은 그들에게도 적용됩니다.새로운 양식 속성 중 일부는 부울입니다. 태그의 존재 여부에 따라 요소의 동작이 결정됩니다. 다음을 포함합니다.
- 자동 초점
- 자동 완성
- 필수의
나는 거의 보지 못하지만 필수의 경우 다음과 같이 보았습니다.
궁극적으로 이것은 나쁜 것이 아닙니다. 클라이언트 측 HTML 파서는 마크업에서 필수 속성을 발견하고 적절한 규칙을 적용합니다. 그러나 다르게 수행하고 required="false"라고 쓰면 어떻게 될까요?
구문 분석기는 여전히 필수 속성을 보고 적절한 동작을 적용합니다. 분명히 이것은 당신이 원했던 것이 아닙니다.
부울 값은 세 가지 방법으로 적용할 수 있습니다. (두 번째와 세 번째는 XHTML에만 적용됩니다.)
- 필수의
- 필수=""
- 필수="필수="
위의 예와 관련하여 다음과 같이 작성할 수 있습니다(HTML로).
HTML5의 시맨틱 요소는 브라우저와 웹 개발자 모두에게 해당 의미 또는 목적을 명확하게 설명합니다.
HTML5 표준이 등장하기 전에 모든 페이지 마크업은 주로 마크업의 가시성을 위해 클래스 클래스 또는 id 식별자가 할당된 요소를 사용하여 수행되었습니다(예: ). 그들의 도움으로 머리글과 바닥글, 사이드바, 내비게이션 등이 HTML 문서에 배치되었습니다.
HTML5 표준은 콘텐츠 구성, 그룹화 및 텍스트 콘텐츠 마크업을 위한 새로운 요소를 제공했습니다. 새로운 시맨틱 요소는 포함된 콘텐츠에 시맨틱 의미를 추가하여 웹 페이지의 구조를 개선했습니다(예전에는 , 가 되었습니다). 요소의 모양을 표시하도록 설정된 규칙이 없으므로 원하는 대로 요소의 스타일을 지정할 수 있습니다. 모든 요소를 사용할 수 있습니다.
HTML5 사양에 따르면 각 요소는 특정(0개 이상) 범주에 속합니다. 그들 각각은 유사한 특성을 가진 요소를 그룹화합니다. 다음과 같은 일반 범주가 있습니다.
- 메타 콘텐츠
- 스트리밍 콘텐츠
- 섹션 내용
- 헤더 콘텐츠
- 텍스트 내용
- 포함된 콘텐츠
- 대화형 콘텐츠
콘텐츠 카테고리: 스트리밍 콘텐츠.
선택 사항인 소개 및 탐색 요소를 그룹화합니다. 제목, 페이지 섹션의 내용, 검색 양식 또는 로고를 포함할 수 있습니다. HTML 문서는 동시에 여러 요소를 포함할 수 있으며 페이지의 모든 부분에 위치할 수 있습니다.
사이트 설명
- 에 대한
- 법정
- 다운로드
요소는 요소 또는 다른 요소 안에 배치할 수 없습니다.
2. 요소콘텐츠 카테고리:
웹 페이지 또는 전체 웹 사이트의 탐색 블록을 생성하도록 설계되었으며 . 한 페이지에 여러 요소가 있을 수 있습니다. 태그를 대체하지 않음
- 또는 그는 단지 프레임을 만듭니다. 페이지의 모든 링크 그룹을 래핑할 필요는 없습니다. 이 요소는 주로 기본 탐색 블록으로 구성된 섹션을 위한 것입니다.
목록 항목은 탐색 모음 요소로 사용할 수 있을 뿐만 아니라 다음과 같습니다.
...
요소 내부에 제목을 추가할 수도 있습니다.
...
3. 요소콘텐츠 카테고리: 스트리밍 콘텐츠, 섹션 콘텐츠.
게시물(간행물, 기사, 블로그 항목, 댓글)을 그룹화하는 데 사용됩니다. 반복 사용을 목적으로 하는 독립적인 개별 블록으로, 일반적으로 헤더로 시작합니다. 사이트의 다른 페이지에 복제할 수 있으며 외부 기사의 콘텐츠와 밀접하게 관련된 다른 요소를 내부에 포함할 수 있습니다. 제목과 텍스트 콘텐츠가 있는 페이지당 하나의 기사만 있는 경우 로 묶을 필요가 없습니다. 요소의 내용이 문서 개요에 명시적으로 명시된 경우에만 요소를 사용하는 것이 좋습니다.
어제 나는 서부 뉴저지, 특히 상대적으로 최근에 발견된 핫스팟인 Hyper Humus로의 연례 여행을 위해 Brooklyn Bird Club에 가입했습니다.
그러나 그것은 당신의 인생 목록에 포함됩니까?이제 인터넷을 통해 조류 관찰을 할 수 있는 것 같습니다. 아직 테스트해보지는 못했지만(분명히 20명의 사용자 제한) 개인적으로 이것이 실제로 현장에 있는 것을 조금이라도 대체한다고 상상할 수 없습니다.
« 이전 항목 4. 요소콘텐츠 카테고리: 스트리밍 콘텐츠, 섹션 콘텐츠.
요소는 문서의 일반 섹션을 나타냅니다. 주제 콘텐츠를 그룹화하고 일반적으로 제목을 포함합니다. 래퍼 블록이 아니므로 이러한 목적을 위해 . 콘텐츠는 목차, 과학 간행물 섹션, 이벤트 프로그램이 될 수 있습니다. 사이트의 홈페이지는 소개 정보, 뉴스 및 연락처 블록과 같은 섹션으로 나눌 수도 있습니다. 요소의 내용이 문서 개요에 명시적으로 명시된 경우에만 요소를 사용하는 것이 좋습니다.
... ... ...
내부에하나 이상의 요소를 포함하는 중첩 요소로 부모 요소를 생성할 수 있습니다. 모든 페이지를 이런 방식으로 배치할 필요는 없지만 요소를 중첩하는 유효한 방법입니다. 예를 들어 페이지의 기본 콘텐츠 영역에는 서로 다른 주제에 대한 기사가 포함된 두 개의 블록이 있습니다. 동일한 주제의 각 기사를 요소 안에 배치하여 이를 강조할 수 있습니다.
자연에 대한 메모 ... ... 역사적 메모 ... ...
다섯 번째 요소콘텐츠 카테고리: 스트리밍 콘텐츠, 섹션 콘텐츠.
주변 콘텐츠와 직접 관련이 있지만 별개로 간주될 수 있는 콘텐츠를 그룹화합니다. (즉, 이 블록을 제거해도 주요 콘텐츠 이해에는 영향을 미치지 않습니다.). 대부분의 경우 요소는 측면 열(책에서와 같이)에 배치되며 , 디지털 데이터, 따옴표, 광고 블록, 보관 레코드와 같은 요소 그룹을 포함합니다. 단순히 측면에 배치된 블록에는 적합하지 않습니다.
... ...
.........
6. 아이템콘텐츠 카테고리: 스트리밍 콘텐츠.
포함하는 섹션 또는 루트 요소의 바닥글을 나타냅니다. 일반적으로 기사 작성자에 대한 정보, 저작권 정보 등을 포함합니다. 전체 페이지 머리글로 사용되는 경우 컨텐츠는 저작권 정보, 사용 약관 링크, 연락처 정보, 관련 컨텐츠 링크 등으로 보완됩니다.
하나의 웹 문서에 여러 요소가 있을 수 있습니다. 각 페이지와 마찬가지로 각 기사는 자체 요소를 가질 수 있으며 실제로 인용 출처를 나타내기 위해 요소에 배치할 수 있습니다.
... @2014...
7. 요소콘텐츠 카테고리: 스트리밍 콘텐츠.
문서 또는 문서의 작성자/소유자에 대한 연락처 정보를 정의하는 데 사용됩니다. 문서의 작성자를 나타내기 위해 요소 안에 태그가 배치되어 태그 안에 기사의 작성자가 표시됩니다. 일반적으로 브라우저에서 이탤릭체로 렌더링됩니다.
콘텐츠 카테고리: 스트리밍 콘텐츠.
요소는 문서의 주요 내용(요소의 내용)을 나타냅니다. 요소 내부의 콘텐츠는 고유해야 하며 탐색 링크, 저작권 정보, 로고, 검색 양식(검색 양식이 문서의 주요 기능인 경우)과 같은 모든 사이트 문서에서 반복되지 않아야 합니다.
요소는 , , 또는 와 같은 요소의 하위일 수 없습니다.
푸들
품종에 대해 품종 모습 성격저작권 © 2016 My dog.ru 9. 요소콘텐츠 카테고리: 스트리밍 콘텐츠, 루트 섹션 콘텐츠.
요소는 기본 흐름의 독립형 요소인 독립형 콘텐츠(선택적으로 제목 포함)를 나타냅니다. 문서의 흐름에 영향을 주지 않고 요소를 문서의 기본 콘텐츠에서 사이드바 또는 애플리케이션으로 이동할 수 있습니다. 요소를 사용하여 일러스트레이션, 사진, 다이어그램, 코드 스니펫 등에 짧은 설명을 추가할 수 있습니다.
가을 숲
요소는 블록 요소이며 너비는 컨테이너 블록의 전체 너비에서 여백을 뺀 값을 차지합니다.
10. 요소요소는 요소의 하위 항목이며 콘텐츠 범주에 속하지 않습니다. 요소는 블록 요소이고 너비는 요소의 너비와 동일하며 기본 높이는 18px입니다.
11. 요소콘텐츠 카테고리:
그레고리력 시간(24시간) 또는 날짜를 선택적으로 시간 및 표준 시간대 오프셋과 함께 지정합니다. 이 태그로 묶인 텍스트는 브라우저에서 스타일이 지정되지 않습니다. datetime 속성은 태그에 사용할 수 있으며, 그 내용은 사용자가 자신의 컴퓨터 화면에서 볼 내용을 지정합니다.
날짜를 자동으로 읽으려면 YYYY-MM-DD 형식이어야 합니다. 또한 지정할 수 있는 시간은 구분 접두어 T(시간)를 추가하여 HH:MM 형식으로 지정됩니다.
12. 요소콘텐츠 카테고리: 스트리밍 콘텐츠, 텍스트 콘텐츠.
태그 안에 배치된 텍스트는 기본적으로 노란색으로 강조 표시됩니다(선택한 블록의 배경색 및 글꼴 색은 특정 css 스타일을 설정하여 변경할 수 있음). 이 태그는 키워드뿐만 아니라 중요한 콘텐츠를 표시하는 데 사용할 수 있습니다.
콘텐츠 카테고리: 스트리밍 콘텐츠, 텍스트 콘텐츠.
양방향 텍스트 서식을 위해 텍스트의 나머지 부분과 분리해야 하는 텍스트 부분을 분리합니다. 왼쪽에서 오른쪽으로, 오른쪽에서 왼쪽으로 읽는 언어로 동시에 작성된 텍스트에 사용됩니다.
콘텐츠 카테고리: 스트리밍 콘텐츠, 텍스트 콘텐츠.
단일 태그는 필요한 경우 긴 줄 바꿈을 추가할 브라우저를 보여줍니다.
콘텐츠 카테고리: 스트리밍 콘텐츠, 텍스트 콘텐츠.
이 요소를 사용하면 텍스트 콘텐츠 범주의 하나 이상의 요소를 루비 주석으로 표시할 수 있습니다. 루비 주석은 주로 동아시아 타이포그래피에서 발음 가이드로 사용되거나 다른 기능을 포함하기 위해 사용됩니다. 요소에는 다음이 포함될 수 있습니다.
- 하나 이상의 텍스트 노드 또는 요소
— 하나 이상의 요소 , 각각은 요소 앞이나 바로 뒤에 있습니다.
, 및 요소는 콘텐츠 범주에 속하지 않습니다.
요소는 중첩된 텍스트를 주석의 기본 구성요소로 정의합니다.
요소는 위 또는 아래 텍스트에 대한 주석을 표시합니다.
요소는 중첩된 텍스트를 선택적 주석으로 표시합니다.
브라우저가 요소를 지원하지 않는 경우 요소는 대체 텍스트를 표시합니다.