HTML 그림 및 그림 요소를 사용하여 캡션을 이미지 또는 미디어와 연결하는 방법은 무엇입니까?

html의 및 <figcaption>을 사용하여 캡션 텍스트를 이미지 또는 미디어에 직관적이고 의미 적으로 추가하십시오. 1. 은 그림, 비디오 또는 코드 블록과 같은 독립적 인 미디어 컨텐츠를 래핑하는 데 사용됩니다. 2. <figcaption>은 설명 텍스트로 배치되며 미디어 위 또는 아래에 위치 할 수 있습니다. 3. 그들은 페이지 구조의 선명도를 향상시킬뿐만 아니라 접근성 및 SEO 효과를 향상시킵니다. 4. 그것을 사용할 때는 학대를 피하기 위해주의를 기울여야하며, 일반적인 장식 이미지가 아닌 강조되고 지침을 동반 해야하는 컨텐츠에 적용해야합니다. 5. <img alt="HTML 그림 및 그림 요소를 사용하여 캡션을 이미지 또는 미디어와 연결하는 방법은 무엇입니까?" >의 ALT 속성은 무시 될 수 없으며, 이는 무시와 다릅니다. 6. 그림은 유연하며 필요에 따라 그림의 상단 또는 하단에 배치 할 수 있습니다. 이 두 태그를 올바르게 사용하면 의미 있고 이해하기 쉬운 웹 컨텐츠를 구축하는 데 도움이됩니다.

캡션 텍스트를 이미지 나 미디어에 추가 할 때 html <figure></figure> <figcaption></figcaption> 사용하는 것은 매우 직관적이고 의미 적 접근법입니다. 그들은 페이지 구조를 구성 할뿐만 아니라 접근성 및 SEO 성능을 향상시키는 데 도움이됩니다. 열쇠는이 두 태그를 작성하는 목적과 올바른 방법을 이해하는 것입니다.

기본 구조 : 그림과 설명 텍스트를 연결하는 방법

<figure></figure> 태그는 그림, 차트, 비디오 등과 같은 독립적 인 컨텐츠 블록을 래핑하는 데 사용됩니다. <figcaption></figcaption> 은 "제목"또는 "설명 텍스트"이며 일반적으로 <figure></figure> 에 배치되며 내용 앞이나 뒤에 나타날 수 있습니다.

예를 들어:

 <그림>
  <img src="/static/imghw/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/175182660322237.jpeg"  class="lazy"  src = "example.jpg"alt = "example picture">
  <Figcaption> 이것은 그림에 대한 간단한 설명입니다 </figcaption>
</그림>

이런 식으로 브라우저와 스크린 리더는이 텍스트가 이미지에 대한 설명이라는 것을 알게 될 것입니다. <figcaption> <figure> 상단에 놓고 캡션 텍스트를 그림 위에 표시하도록 할 수도 있습니다.

사진뿐만 아니라 다양한 미디어가 적합합니다

가장 일반적인 것은 <img alt="HTML 그림 및 그림 요소를 사용하여 캡션을 이미지 또는 미디어와 연결하는 방법은 무엇입니까?" > 과 함께 사용하는 것이지만 <figcaption> <figure> 오디오, 비디오 또는 코드 블록과 같은 다른 유형의 미디어에도 적합합니다.

예를 들어, 지침이 포함 된 비디오를 포함시킵니다.

 <그림>
  <비디오 컨트롤>
    <소스 src = "example.mp4"type = "video/mp4">
    브라우저는 비디오 재생을 지원하지 않습니다.
  </video>
  <Figcaption> 이것은 제품 사용 프로세스를 보여주는 데모 비디오입니다 </figcaption>
</그림>

예를 들어 코드를 표시합니다.

 <그림>
  <fre> <code> 함수 helloorld () {console.log ( "Hello, World!"); } </code> 

컨텐츠가 "독립 장치"인 한 <figure></figure> 로 래핑하고 <figcaption></figcaption> 과 함께 지침을 추가하는 것을 고려할 수 있습니다.

실제 응용 분야에서주의를 기울여야 할 몇 가지 세부 사항

• 남용하지 마십시오 : 일반적인 인라인 그림 (기사의 장식 사진과 같은)이라면 <figure></figure> 사용할 필요가 없습니다. 별도의 강조와 설명이 필요한 미디어 컨텐츠에 더 적합합니다.
• 시맨틱 우선 순위 :이 태그는 주로 스타일 레이아웃보다는 문서 의미를 향상시키는 데 사용됩니다. CSS를 사용하여 스타일을 사용자 정의 할 수 있지만 타이포그래피를 위해 스타일을 적용하도록 강요하지 마십시오.
• Alt Text는 여전히 중요합니다 . <figcaption></figcaption> 이 있더라도 <img alt="HTML 그림 및 그림 요소를 사용하여 캡션을 이미지 또는 미디어와 연결하는 방법은 무엇입니까?" > 의 alt 속성을 잊지 마십시오. alt 이미지 자체가 표시되지 않을 때 대체 텍스트이며, Figcaption은 추가 설명입니다.
• 유연한 위치 : <figcaption></figcaption> 미디어 위 또는 아래에 나타나려는 지에 따라 <figure></figure> 내부의 상단 또는 하단에 배치 할 수 있습니다.

기본적으로 그게 다야

전반적으로 <figure></figure> 및 <figcaption></figcaption> 은 HTML에서 미디어 컨텐츠에 지침을 추가하는 데 사용되는 매우 실용적인 태그 세트입니다. 구조를 더 명확하게 만들뿐만 아니라 접근성 및 검색 엔진이 컨텐츠 의도를 식별하는 데 도움이됩니다. 시맨틱과 장면을 사용할 때주의를 기울이고 과도하게 사용하지 마십시오.

위 내용은 HTML 그림 및 그림 요소를 사용하여 캡션을 이미지 또는 미디어와 연결하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!