<summary> 태그는
<details> 태그로 생성된 대화형 웨젯의 세부 정보를 요약하거나 제목을 정의하는 역할을 합니다.

HTML <details> 태그
HTML <summary> 태그는 <details> 태그로 생성된 대화형 웨젯의 세부 정보를 요약하거나 제목을 정의하는 역할을 합니다. 
<details>
    <summary>요약 내용</summary>
    추가 정보나 세부 내용
</details>
브라우저에서 실제 표시된 모습 '요약 내용'이라는 텍스트를 클릭하여 세부 정보를 보거나 숨길 수 있습니다.

<summary> 태그의 정의 및 사용법

<summary> 태그의 조상 요소에 반드시 <details> 태그가 있어야 합니다.

만약 <details> 태그에 <summary> 태그가 없다면 사용자 에이전트(브라우저 등)는 자체적인 요약 정보나 제목을 <details> 태그에 제공합니다(예: "세부 정보").

구문

HTML <summary> 태그를 사용하면 제목을 나타냅니다. 
<details>
    <summary>요약 내용</summary> <!-- <summary> 태그는 제목을 나타냄 -->
    추가 정보나 세부 내용
</details>
브라우저에서 실제 표시된 모습 <summary> 태그를 사용해서 제목을 나타낸 모습입니다.

다음의 예제는 <summary> 태그를 사용하지 않았습니다.

HTML <summary> 태그를 사용하지 않았습니다. 
<details>
    추가 정보나 세부 내용
</details>
브라우저에서 실제 표시된 모습 <summary> 태그를 사용하지 않았을 경우 사용자 에이전트(브라우저 등)는 자체적인 제목을 제공합니다(예: "세부 정보").
CSS <details> & <summary> 태그 - 스타일 꾸미기

주의사항 - <summary> 태그의 위치

<summary> 태그는 제목(요약 내용)을 나타내는 요소로써, <details> 태그에 사용할 경우 시각장애인을 위한 웹접근성의 보조 기구인 스크린 리더를 위해 첫 번째 자식 요소로 마크업 해야합니다. 그래야 스크린 리더는 <summary> 태그의 제목을 먼저 읽고 세부 정보를 읽을 수 있기 때문에 가독성에 중요한 사항입니다. 이와 같은 이유로 <summary> 태그를 생략하는 것은 권장하지 않습니다.

주의사항 - role 속성은 허용되지 않음

<summary> 태그는 role 속성이 허용되지 않습니다. <summary> 태그의 암시적인 role 속성 값은 button입니다.

role 속성에 대한 자세한 내용은 다음의 링크를 참조하시기 바랍니다.

브라우저 호환성

details 태그, open 속성, summary 태그의 브라우저 호환성
태그와 속성
Chrome
Chrome
Edge
Edge
Firefox
Firefox
Safari
Safari
<summary> 12 79 49 9
<details> 12 79 49 9
open 12 79 49 9

caniuse.com에서 더 자세한 정보를 확인해 보세요.

명세서

deetails 태그와 summary 태그의 명세서 사양
명세서 사양
<summary> HTML Standard
#the-summary-element
<details> HTML Standard
#the-details-element

참고문헌

같이 보기