html5 & lt; figure & gt; 및 & lt; figcaption & gt; 캡션이있는 이미지를 제시하는 요소?

캡션이있는 이미지에 <figure></figure> 및 <figcaption></figcaption> 사용

<figure></figure> <figcaption></figcaption> 요소는 캡션과 함께 이미지 (또는 다른 미디어)를 제시하는 의미 적으로 올바른 방법을 제공합니다. <figure></figure> 요소는 매체 및 캡션의 컨테이너 역할을하는 반면 <figcaption></figcaption> 요소는 구체적으로 캡션 텍스트를 보유합니다. 이 구조는 웹 사이트의 접근성과 SEO를 향상시킵니다. 사용 방법은 다음과 같습니다.

 <code class="html"><figure> <img src="/static/imghwm/default1.png" data-src="image.jpg" class="lazy" alt="Descriptive alt text"> <figcaption>This is the caption for the image.</figcaption> </figure></code>

이 예에서 <img src="/static/imghwm/default1.png" data-src="video.mp4" class="lazy" alt="html5 & lt; figure & gt; 및 & lt; figcaption & gt; 캡션이있는 이미지를 제시하는 요소?" > 요소는 <figure></figure> 요소 내부에 있습니다. 캡션을 포함하는 <figcaption></figcaption> 요소는 이미지를 따릅니다. 순서는 중요합니다 - 캡션은 <figure></figure> 내의 미디어와 논리적으로 관련되어야합니다. <img src="/static/imghwm/default1.png" data-src="video.mp4" class="lazy" alt="html5 & lt; figure & gt; 및 & lt; figcaption & gt; 캡션이있는 이미지를 제시하는 요소?" > 태그의 alt 속성은 접근성에 중요하므로 이미지를 볼 수없는 사용자에게 텍스트 설명을 제공합니다.

접근성 및 SEO를위한 모범 사례

<figure></figure> 및 <figcaption></figcaption> 사용은 접근성과 SEO를 올바르게 향상시킵니다. 방법은 다음과 같습니다.

• 접근성 : 시맨틱 구조는 이미지와 캡션 간의 관계를 명확하게 정의하여 스크린 리더 및 기타 보조 기술이 내용을 해석 할 수 있도록합니다. <img src="/static/imghwm/default1.png" data-src="video.mp4" class="lazy" alt="html5 & lt; figure & gt; 및 & lt; figcaption & gt; 캡션이있는 이미지를 제시하는 요소?" > 요소의 alt 속성이 가장 중요합니다. 시각 장애가있는 사용자에게 컨텍스트를 제공합니다. 잘 작성된 alt 속성은 이미지의 내용과 목적을 간결하게 설명해야합니다. "이미지"와 같은 문구를 사용하지 마십시오.
• SEO : 검색 엔진은 <figure></figure> <figcaption></figcaption> 의미 론적 의미를 이해합니다. 이를 통해 이미지의 맥락을 더 잘 이해하여 관련 이미지 검색에 대한 웹 사이트 순위를 향상시킵니다. 설명 캡션을 사용하면 검색 엔진 및 사용자에게 키워드가 풍부한 컨텍스트를 제공하여 SEO가 더욱 향상됩니다. 캡션이 이미지 컨텐츠를 정확하게 반영해야합니다.
• 논리적 흐름 유지 : 문서 내의 <figure></figure> 요소의 배치는 내용의 흐름 내에서 의미가 있어야합니다. 임의로 배치하지 마십시오. 주변 텍스트와 관련이 있어야합니다.

CSS를 사용하여 스타일링 <figure></figure> 및 <figcaption></figcaption>

CSS를 사용하여 스타일링 <figure></figure> <figcaption></figcaption> 을 통해 시각적으로 매력적인 프레젠테이션이 가능합니다. 두 요소의 간격, 정렬 및 모양을 제어하여 웹 사이트 디자인에 원활하게 통합 할 수 있습니다. 예는 다음과 같습니다.

 <code class="css">figure { margin: 20px auto; /* Center the figure */ max-width: 600px; /* Limit the width */ text-align: center; /* Center the caption */ } figcaption { font-style: italic; font-size: 0.9em; margin-top: 10px; /* Add some space above the caption */ text-align: center; /* Center the caption */ }</code>

이 CSS 코드는 그림을 중심으로하고 너비를 제한하며 이탤릭체와 더 작은 글꼴 크기로 캡션을 스타일링합니다. 웹 사이트의 디자인에 맞게 이러한 스타일을 사용자 정의 할 수 있습니다. 응답 성을 고려하고 스타일이 다양한 화면 크기에 적응하도록해야합니다.

다른 미디어 유형과 함께 <figure></figure> 및 <figcaption></figcaption> 사용

예, 이미지를 넘어서 미디어 유형과 함께 <figure></figure> 및 <figcaption></figcaption> 사용할 수 있습니다. 비디오, 오디오 파일, 코드 스 니펫, 다이어그램 등과 같은 다른 임베디드 컨텐츠와 완벽하게 잘 작동합니다. 핵심은 <figcaption></figcaption> 이 <figure></figure> 내의 임베디드 미디어에 대한 캡션 또는 설명을 제공한다는 것입니다. 비디오가 포함 된 예는 다음과 같습니다.

 <code class="html"><figure> <video controls> Your browser does not support the video tag. </video> <figcaption>A captivating video demonstrating [video content description].</figcaption> </figure></code>

임베디드 미디어에 액세스 할 수없는 사용자에게 항상 적절한 대체 콘텐츠를 제공해야합니다 (예 : 비디오의 성적표). 의미 적 의미 <figcaption></figcaption> <figure></figure> 미디어와 설명 캡션이 포함됩니다.

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