HTML의 <ins> 요소는 문서에 새로 추가된 텍스트를 표시할 때 사용합니다. 이때 datetime 속성을 함께 사용하면 해당 텍스트가 언제 삽입되었는지 정확한 날짜와 시간을 명시할 수 있습니다.
datetime 속성의 기본 문법
<ins> 태그에 datetime 속성을 적용하는 기본 문법은 다음과 같습니다.
<ins datetime="YYYY-MM-DDThh:mm:ssTZD">
날짜와 시간은 아래 형식에 맞추어 작성해야 합니다.
- YYYY – 연도 (4자리)
- MM – 월
- DD – 일
- hh – 시간
- mm – 분
- ss – 초
- TZD – 시간대 표시자(Time Zone Designator), 예: Z 또는 +09:00
사용 예제
이제 <ins> 요소의 datetime 속성을 실제로 적용한 예제를 살펴보겠습니다.
<!DOCTYPE html>
<html>
<body>
<h1>데모 제목</h1>
<ins cite="new.htm" datetime="2019-05-11T18:30:03Z">삽입된 텍스트입니다.</ins>
</body>
</html>
위 코드를 실행하면 화면에는 밑줄이 그어진 형태로 삽입된 텍스트가 표시됩니다. 브라우저는 기본적으로 <ins>로 감싼 텍스트에 밑줄을 적용하여, 삭제된 내용을 나타내는 <del>(취소선)과 시각적으로 구분됩니다.
코드 상세 설명
위 예제에서는 <ins> 요소를 사용해 문서에 새 텍스트를 삽입했습니다.
<ins cite="new.htm" datetime="2019-05-11T18:30:03Z">
삽입된 텍스트입니다.
</ins>
cite 속성 – 삽입 이유 명시
cite 속성은 해당 텍스트가 왜 삽입되었는지 그 근거가 되는 문서의 URL을 지정합니다. 위 예제에서는 다음과 같이 설정했습니다.
cite="new.htm"
datetime 속성 – 삽입 시점 명시
datetime 속성은 텍스트가 삽입된 날짜와 시간을 지정합니다. 위 예제에서는 2019년 5월 11일 18시 30분 3초(UTC 기준)로 설정했습니다.
datetime="2019-05-11T18:30:03Z"
정리
<ins> 태그의 datetime 속성은 단순히 화면에 보이지 않더라도 검색 엔진이나 스크린 리더, 문서 편집 도구가 수정 이력을 이해하는 데 중요한 역할을 합니다. 문서 변경 사항을 추적 가능한 형태로 관리하고 싶다면 cite 속성과 함께 활용하는 것이 좋습니다.