HTML5에서는 <summary> 태그를 사용하여 <details> 태그로 추가한 내용의 요약(제목)을 지정할 수 있습니다. 이 두 태그를 함께 사용하면 사용자가 요약 부분을 클릭했을 때 상세 내용이 펼쳐지거나 접히는 인터랙티브한 위젯을 자바스크립트 없이 간단하게 만들 수 있습니다.
예제
다음 코드를 실행하면 HTML5에서 요약이 어떻게 표시되는지 직접 확인할 수 있습니다.
<!DOCTYPE html> <html> <head> <title>HTML Summary Tag</title> </head> <body> <details> <summary>Some More Information</summary> <p>Providing more info about the details here.</p> </details> </body> </html>
참고 사항
<summary> 요소는 반드시 <details> 요소의 첫 번째 자식으로 작성해야 합니다. 브라우저에서는 기본적으로 요약 앞에 삼각형 모양의 화살표가 표시되며, 클릭할 때마다 아래의 상세 내용이 열리고 닫힙니다. CSS를 활용하면 이 화살표와 요약 영역의 디자인도 자유롭게 변경할 수 있습니다.