& lt; figure & gt; 및 & lt; figcaption & gt; 시맨틱 이미지 캡션 요소?

시맨틱 이미지 캡션에는 <figure></figure> 및 <figcaption></figcaption> 사용

<figure></figure> 및 <figcaption></figcaption> 요소는 HTML5로 특별히 설계되어 캡션과 함께 이미지 (또는 다이어그램, 코드 스 니펫 등과 같은 다른 자체 포함 된 콘텐츠)를 의미 적으로 그룹화합니다. <figure></figure> 요소는 <figcaption></figcaption> 요소는 <figure></figure> 요소 에

태그 내에 캡션 텍스트를 배치하면 이미지를 랩핑하고 캡션 텍스트 <figcaption></figcaption> 배치하십시오.

예를 들어:

 <code class="html"><figure> <img src="/static/imghw/default1.png" data-src="image.jpg" class="lazy" alt="Descriptive alt text"> <figcaption>A captivating sunset over the ocean.</figcaption> </figure></code>

이것은 이미지와 캡션을 명확하게 분리하여 코드를보다 읽기 쉽고 의미 적으로 의미있게 만듭니다. 브라우저는 자연스럽게이를 시각적으로 매력적인 방식으로 렌더링하여 종종 이미지 아래에 캡션을 배치합니다. 배치는 웹 사이트에 적용되는 CSS 스타일에 따라 약간 다를 수 있습니다.

<figure></figure> 및 <figcaption></figcaption> 사용의 이점

<figure></figure> <figcaption></figcaption> 하면 단락 태그 ( <p></p> ) 또는 기타 인라인 메소드를 사용하여 이미지 다음에 캡션 텍스트를 배치하는 것과 같은 다른 방법에 비해 몇 가지 장점이 있습니다.

• 시맨틱 명확성 : 주요 이점은 의미 적 정확성입니다. 이러한 요소는 이미지와 캡션 간의 관계를 명시 적으로 명시하여 인간과 기계 (스크린 리더 및 검색 엔진 포함)에 대한 코드를 쉽게 이해할 수 있도록합니다. 이는 코드 유지 관리 및 가독성을 향상시킵니다.
• 접근성 향상 : 스크린 리더는 캡션을 이미지와 관련된 것으로 쉽게 식별하여 시각 장애가있는 사용자에게 중요한 컨텍스트를 제공 할 수 있습니다. 이는 명시 적 의미 관계가없는 방법에 비해 접근성을 크게 향상시킵니다.
• 유연성과 스타일링 : 이미지와 캡션의 분리를 통해 스타일을 더 잘 제어 할 수 있습니다. 다른 CSS 스타일을 이미지와 캡션에 독립적으로 쉽게 적용 할 수 있으므로 웹 사이트 디자인에 더 많은 유연성을 제공합니다.
• SEO 혜택 : 검색 엔진은 이미지의 컨텍스트를 더 잘 이해하여 SEO가 향상 될 수 있습니다. 캡션은 검색 엔진을 색인하고 이미지를보다 효과적으로 순위에 올리는 데 도움이되는 귀중한 메타 데이터를 제공합니다.

<figure></figure> 및 <figcaption></figcaption> 로 접근성을 보장합니다

이미지와 캡션을 사용할 때 접근성이 가장 중요합니다. 구현에 액세스 할 수 있도록하는 방법은 다음과 같습니다.

• 설명적인 alt 텍스트 : 항상 <img alt="& lt; figure & gt; 및 & lt; figcaption & gt; 시맨틱 이미지 캡션 요소?" > 태그에 설명적인 alt 텍스트를 제공하십시오. 이 텍스트는 이미지의 내용과 목적을 간결하게 설명하여 시각적 액세스없이 컨텍스트를 제공해야합니다. 단순히 캡션을 반복하는 중복 ALT 텍스트를 피하십시오.
• 명확하고 간결한 캡션 : 캡션은 이미지의 내용을 명확하고 간결하며 정확하게 반영해야합니다. 전문 용어 나 지나치게 기술적 인 언어를 피하십시오.
• 적절한 언어 : 대상 고객에게 적절한 언어를 사용하십시오. 속어 나 비공식 언어를 사용하지 마십시오.
• 보조 기술 테스트 : 화면 리더 및 기타 보조 기술로 구현을 테스트하여 캡션을 올바르게 읽고 이미지와 관련시켜야합니다.

<figure></figure> 및 <figcaption></figcaption> 의 검색 엔진 처리

검색 엔진은 일반적으로 의미 적으로 올바른 HTML을 선호합니다. <figure></figure> 및 <figcaption></figcaption> 사용하면 검색 엔진 크롤러가 이미지와 캡션의 관계를 더 잘 이해할 수 있습니다. 이로 인해 이미지가 올바르게 색인화 될 가능성이 향상되고 캡션에 포함 된 관련 키워드에 대한 이미지 검색 결과에 나타납니다. 이러한 요소로 인해 순위가 향상된다는 보장은 없지만, 사용은 일반적으로 SEO에 유리한보다 체계적이고 이해할 수있는 웹 사이트에 기여합니다. 대조적으로, 시맨틱 마크 업없이 이미지 근처에 캡션을 배치하는 방법은 검색 엔진에 대한 컨텍스트를 제공하지 않습니다. <figure></figure> 및 <figcaption></figcaption> 이 제공 한 구조화 된 데이터는 검색 엔진에 콘텐츠를 정확하게 이해할 수있는 더 많은 단서를 제공합니다.

위 내용은 & lt; figure & gt; 및 & lt; figcaption & gt; 시맨틱 이미지 캡션 요소?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!