HTML5 - 텍스트(수정태그) <small>, <del>, <ins>

2022. 2. 22. 14:16

<small></small> 태그 요소

이 태그는 덧붙이는 글, 주변 글을 보완하는 짧은 설명을 나타낼 때,

저작권과 법률 표기 등 작은 텍스트를 나타낼 때 사용한다.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>

</head>
<body>
    <p>small 태그를 테스트<small>(test)</small> 해보겠습니다.</p>
</body>
</html>

결과 화면

<del></del> 태그 요소

이 태그는 문서에서 제거된 텍스트의 범위를 나타낸다.

웹 접근성 관련해서 스크린리더기는 del 태그를 무시한다.

그러나 CSS content 속성으로 적용하면 스크린리더기로 읽을 수 있게 만들 수 있다.

자세한 설명을 원하면 아래 링크로 확인하면 된다.

https://developer.mozilla.org/ko/docs/Web/HTML/Element/del

<del> - HTML: Hypertext Markup Language | MDN

HTML <del> 요소는 문서에서 제거된 텍스트의 범위를 나타냅니다.

developer.mozilla.org

CSS 예로 확인해보면

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <style>
    del::before {
      content: " [제거 부분 시작] ";
    }

    del::after {
      content: " [제거 부분 끝] ";
    }    
  </style>
</head>
<body>
  <p><del>del 태그를 테스트 해보겠습니다.</del></p>
</body>
</html>

결과 화면

https://developer.mozilla.org/ko/docs/Web/HTML/Element/ins

<ins> - HTML: Hypertext Markup Language | MDN

HTML <ins> 요소는 문서에 추가된 텍스트의 범위를 나타냅니다.

developer.mozilla.org

이 처럼 CSS를 활용하면 취소선 앞뒤로 CSS의 content의 속성 텍스트가 붙어

스크린리더기가 저 부분을 읽히도록 할 수 있다.

만약 시각장애인을 위한 웹페이지를 개발해야 한다면 이런 식으로 적용해야 바람직하다.

<ins></ins> 태그 요소

이 태그는 일반적으로 밑줄과 함께 표시되는 '할 일' 목록의 새 추가 항목과 같이

문서에 추가된 텍스트의 범위를 나타낸다.

아래 사이트 들어가면 더욱더 자세한 설명이 있다.

https://developer.mozilla.org/ko/docs/Web/HTML/Element/ins

<ins> - HTML: Hypertext Markup Language | MDN

HTML <ins> 요소는 문서에 추가된 텍스트의 범위를 나타냅니다.

developer.mozilla.org

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
 
</head>
<body>
  <p>삭제 된 부분은 <del>이렇게</del> 추가된 부분은 <ins>요렇게</ins></p>  
</body>
</html>

결과 화면

이렇게 <ins> 태그를 사용하면 결과 화면에 나오는 것처럼 밑줄 그어진 부분으로 나타내 진다.

'web 언어 > HTML5 & CSS & Javascript' 카테고리의 다른 글

HTML5 - 텍스트(서식유지, 위 - 아래 첨자 태그) <pre>, <sub>, <sup> (0)	2022.02.23
HTML5 - 텍스트(본문 내에서 특수 처리를 위한 구문추가) <s>, <u>, <mark>, <wbr> (0)	2022.02.23
HTML5 - 텍스트(강조태그) <b>, <i>, <strong>, <em> (0)	2022.02.22
HTML5 - 텍스트(인용 구문 태그)<blockquote>, <q> (0)	2022.02.21
HTML5 - 텍스트(text 단락구분 태그) <p>, <hr>, <br> (0)	2022.02.21

열공의 기록