figure figcaption 태그

 

---

 

1. 시맨틱 태그

시맨틱 태그는 사용자가 아닌 브라우저와 개발자에게 그 태그의 의미를 전달 하는 것 입니다.

시맨틱 태그 중 <header> 태그는 그 영역이 웹사이트에서 헤더라는 의미를 전달 합니다.

<footer> 태그는 웹사이트에서 하단 영역 이라는 의미 합니다.

대표적인 non-semanitc 태그는 <div>, <span> 태그 입니다.

<header>, <footer> 태그 대신에 <div class="header"> <div class="footer">를 사용해도 웹 사이트를 이용하는 사용자들은 전혀 차이점을 느낄 수 없습니다.

시맨틱 태그의 종류는 

- article

- aside

- details

- figcaption

- figure

- footer

- header

- main

- mark

- nav

- section

- summary

- time

이렇게 존재 합니다.

 

1. figure 시맨틱 태그

figure 시맨틱 태그는 img 태그와 그 이미지를 설명 하는 figcaption 태그를 묶어 놓은 태그 입니다.

<figure>
  <img src="apple.jpg" alt="apple">
  <figcaption>Fig1. - 과수원 안에 사과들</figcaption>
</figure>

figcation 태그는 img 태그의 이미지에 시각적인 설명을 추가 하는 것 입니다.

 

2. img 태그의 alt 속성

참고로 img 태그의 alt 속성은 'alternate' 단어의 줄인말로 이미지의 문제가 있어 출력 되지 않았을때 'alt의 메세지를 대체해서 출력 시켜 줍니다' 이미지를 볼 수 없는 시각 장애인들 에게는 리더기를 통해서 이미지 대신에 alt 문구를 읽어 줍니다. 따라서 alt 속성은 웹접근성을 위해 필수로 사용 해야 겠죠?

시맨틱 태그 중에 details 태그와 summary 태그에 대해서 궁금 하신 분들은 여기를 참고해 주세요~

 

https://blog.naver.com/world9604/221937696377

details summary 태그