본문 바로가기
HTML, CSS

HTML 텍스트 관련 태그-2 (굵기, 기울임, 기타 태그들)

by ∴→∵→… 2022. 5. 4.

HTML 텍스트 태그 중 텍스트를 강조하기 위해 굵기(<strong>, <b>) 및 기울임(<em>, <i>)의 사용 방법과 의미 그리고 리스트 태그(<ol>, <ul>, <li>)에 대해 정리해보겠습니다.

 

 

HTML 태그 정리표 보러가기

 

HTML 태그 정리표 HTML 주요 태그들 정리

HTML 태그들은 각 구분 별로 시맨틱 태그, 텍스트 관련 태그, 이미지와 비디이 등 멀티미디어 관련 태그, 입력 양식 태그 등이 있습니다. HTML 태그 정리표로 한눈에 보기 편하게 정리해보았습니다.

kdevitworld.blogspot.com

 

텍스트 굵기 <strong>, <b> 태그

텍스트 크기를 굵게 표시하려면 굵게 강조할 텍스트를 <strong> 및 <b>로 감싸 주면 됩니다. <strong>과 <b>는 두 태그 모두 텍스트가 굵게 표시됩니다. <b>의 경우 디스플레이상으로 굵게 표시하여 강조하는 한편, <strong>의 경우는 브라우저에서 해당 텍스트는 중요하다고 인식하게끔 하여 화면 낭독기에서 텍스트를 읽을 때 강조하게 됩니다.

 

 

 

텍스트 기울임 <em>, <i> 태그

텍스트를 기울여서 표현하고 싶다면 <em>, <i> 태그를 <strong>, <b> 태그처럼 해당 텍스트를 감사 주면 됩니다. <em>은 텍스트 자체를 강조하고 싶을 때 사용하고 <i>는 일반적인 문장의 흐름에서 벗어나는 문장(외국어, 등장인물의 생각 관용구 등) 등에 사용합니다.

 

 

 

알면 좋은 텍스트 태그

줄임말 <abbr> 태그

텍스트가 줄임말을 사용했다는 것을 나타내는 <abbr> 태그가 있습니다.

줄임말을 <abbr>로 감싸고, <abbr> 태그 안에 title속성을 이용해서 원래 텍스트를 적어줍니다.

아래의 텍스트는 <abbr> 태그를 사용한 것이고 밑에는 HTML 코드입니다.

aka

<abbr title="also known as">aka</abbr>

 

웹문서의 내용 추가 및 삭제는 <ins>, <del>

간혹 웹문서를 보시면 텍스트에 취소선이 있거나, 밑줄이 있는 것들을 볼 수 있습니다. 단순히 텍스트를 꾸민 것이 아닌 기존 버전의 문서에서 보완 및 수정됐다는 의미입니다.

웹문서에 내용이 추가될 때, 그냥 추가하기보다는 <ins>를 사용하여 추가된 내용임을 표시하고, <del> 태그를 사용하여 취소 및 삭제된 내용을 알려주는 것이 좋습니다. 이렇게 해야 문서의 신뢰 및 HTML 문법 요소적으로도 좋습니다.  나무 위키 및 위키백과 사이트처럼 다수의 사람이 공동으로 문서를 만들거나 내용이 자주 갱신되는 문서에서 사용하면 좋습니다.

단순한 텍스트에 밑줄 표현은 <u> 취소선은 <s>를 사용하면 됩니다.

 

이 텍스트는 추가된 텍스트입니다.이 텍스트는 삭제된 텍스트입니다.

  <p><ins>이 텍스트는 추가된 텍스트입니다.</ins></p>
  <p><del>이 텍스트는 삭제된 텍스트입니다.</del></p>

 

댓글