빠른 팁 : 피겨 및 그림 요소를 사용하는 올바른 방법

및

요소는 의미 적으로 쌍을 이루는 HTML5 태그가 자주 컨텐츠 구조와 접근성을 향상시키는 데 사용됩니다. 이 안내서는 올바른 구현을위한 모범 사례를 제공합니다 <code>figure 요소는 삽화, 코드 스 니펫 또는 다이어그램과 같은 독립형 내용을 캡슐화합니다. 문서 내에 배치하면 전반적인 의미를 변경하지 않습니다. 결정적으로, 모든 이미지가 figcaption 요소가 필요하지는 않습니다. 독립적 인 정보 단위 인 것들만 그림 내의 여러 이미지 :

다중 관련 이미지는 단일 figure 요소 내에 상주 할 수 있습니다 : <code>figure 이미지를 넘어서 :

요소는 이미지에만 국한되지 않습니다. 에 적합합니다

코드 블록 비디오 오디오 클립 광고

코드 블록이있는 예 : <code>figure 중첩 된 그림 :

<figure>
  <img src="/static/imghw/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/174018847332126.jpg"  class="lazy" alt="Quick Tip: The Right Way to Use Figure & Figcaption Elements " />
  <img src="/static/imghw/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/174018847481580.jpg"  class="lazy" alt="Quick Tip: The Right Way to Use Figure & Figcaption Elements " />
  <img src="/static/imghw/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/174018847567268.jpg"  class="lazy" alt="Quick Tip: The Right Way to Use Figure & Figcaption Elements " />
</figure>

네스팅 요소는 논리적으로 적절할 때 허용됩니다. ARIA 속성을 사용하면 의미론을 더욱 향상시킬 수 있습니다

효과적인 피겨 캡션 사용 : 요소는

에 대한 캡션 또는 범례를 제공합니다. 항상 필요한 것은 아니지만, 사용하면 : 내의 컨텐츠 전후에 이상적으로 배치해야합니다.

<code>figure 또는 :

리치 Figcaptions :
• 자세한 캡션을 위해 는 제목과 단락을 통합하십시오
• 자주 묻는 질문 (faqs) :
제공된 FAQ 섹션은
• 및 사용에 대한 일반적인 질문을 정확하게 다루기 때문에 크게 변경되지 않은 상태로 남아 있습니다. 정보는 이미 간결하고 잘 구조화되어 있습니다.

위 내용은 빠른 팁 : 피겨 및 그림 요소를 사용하는 올바른 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!