HTML의 <ins> 태그는 문서에 새로 추가된 텍스트를 표시할 때 사용합니다. 예를 들어 새롭게 삽입된 내용이나 업데이트된 가격 정보 등을 나타낼 수 있습니다. 브라우저에서는 기본적으로 해당 텍스트에 밑줄(underline)이 그려져 렌더링되므로, 독자가 어떤 부분이 추가되었는지 한눈에 파악할 수 있습니다.
<ins> 태그의 주요 속성
<ins> 태그에서 사용할 수 있는 주요 속성은 다음과 같습니다.
- cite − 추가된 텍스트의 출처나 변경 사유를 설명하는 문서의 URL을 지정합니다.
- datetime − 텍스트가 삽입된 날짜와 시간을 지정합니다. 형식은 YYYY-MM-DDThh:mm:ss와 같이 작성합니다.
사용 예제
이제 HTML에서 <ins> 요소를 실제로 구현하는 예제를 살펴보겠습니다. 아래 코드는 선수 정보와 보고 시간을 입력받는 폼에 <ins> 태그를 적용한 사례입니다.
<!DOCTYPE html> <html> <body> <h2>Player Details with Reporting Time</h2> <form> <p>These are the <ins>details with reporting time</ins>:</p> <fieldset> <legend>New Details:</legend> Player: <input type="text"><br> Rank: <input type="number"><br> Email: <input type="email"><br> Reporting Time: <input type="time"> </fieldset> </form> </body> </html>
실행 결과
위 코드를 실행하면 <ins> 태그로 감싼 텍스트에 밑줄이 그려진 상태로 화면에 출력됩니다.
코드 구조 살펴보기
위 예제에서는 <form> 요소 안에 <fieldset>을 배치하고, 그 안에 총 4개의 입력 요소를 구성했습니다.
<fieldset> <legend>New Details:</legend> Player: <input type="text"><br> Rank: <input type="number"><br> Email: <input type="email"><br> Reporting Time: <input type="time"> </fieldset>
그리고 그 앞부분에는 <ins> 태그를 사용해 새로 추가된 텍스트임을 표시했습니다.
<p>These are the <ins>details with reporting time</ins>:</p>
정리
<ins> 태그는 문서 수정 이력을 명확하게 전달하는 데 유용한 시맨틱 요소입니다. 반대로 삭제된 텍스트를 표시할 때는 <del> 태그를 함께 사용하면 변경 전후를 직관적으로 비교할 수 있어, 공지사항이나 가격 변동 안내 등 다양한 상황에서 활용도가 높습니다.