HTML 텍스트 태그 다양한 의미를 담고 있는 여러 가지 태그들

HTML 텍스트 굵기 및 기울임꼴 지정

텍스트를 다른 글자보다 강조하고 싶을 때, 흔히 해당 텍스트를 굵게 하거나 기울임꼴로 지정하거나 합니다.

HTML에서는 해당 텍스트를 굵게 할 때는 strong 태그나 b 태그를 사용하면 되고, 기울임꼴을 지정하고 싶을 대는 em 태그나 i 태그를 사용하면 됩니다.

텍스트를 굵게 하거나 기울임 꼴을 지정할 때 태그의 종류가 각각 두 개가 있는데 이들의 차이는 브라우저가 알아보느냐 못 알아보느냐 하는 차이가 있습니다.

b 태그와 i 태그를 사용할 경우 웹페이지의 텍스트에서 굵거나 기울여 보일 뿐 웹 크롤러 및 브라우저는 그저 단순한 텍스트로 인식하게 됩니다.

반면 strong 태그나 em 태그를 사용하게 되면 웹 크롤러 및 브라우저는 문서에서 강조된 부분이라고 인식하게 됩니다.

되도록이면 b 태그와 i 태그 대신 strong 태그와 em 태그를 사용해야 합니다.

줄임말 표현시 사용되는 abbr 태그

예전과 달리 줄임말을 많이 사용하는데요. 웹페이지에서도 줄임말을 표현할 수 있습니다. 

단순히 텍스트만 줄여서 사용하는 것이 아니라, 줄임말과 함께 abbr 태그를 사용하고 abbr 태그의 title 속성에 원래 단어를 기입해서 사용하면 됩니다.

abbr 태그 사용 예시

<abbr title = "too much information">TMI</abbr>

코드블럭에 사용되는 code 태그

html 문서를 작성하다 보면 실제 html 문법을 html 코드에 넣고 웹페이지에서 html 코드가 디스플레이 되게 하고 싶을 때가 있는데요.

이렇게 컴퓨터 소스 코드를 화면상에 출력하고 싶을 때 code 태그를 사용하면 됩니다.

code 태그를 사용하게 되면 브라우저가 해당 코드는 html 코드로 인식하지 않고 단순 텍스트로 인식하여 화면에 출력해 줍니다.

텍스트 크기를 조절하는 여러 태그들

상황에 따라 보통 텍스트 크기보다 다르게 보여줘야 할 때가 있습니다. 이럴 때 사용하는 여러 가지 태그들이 있으니 상황에 맞게 사용하면 됩니다.

태그	설명
<small>	텍스트를 작게 표현 할 때 사용
<sub>	아래 첨자 표현
<sup>	윗 첨자 표현
<u>	밑줄 표시

기존 문서에 삽입(ins) 또는 삭제(del) 그리고 취소선 s 태그

가령 하나의 웹페이지를 작성하여 게시한 후에 기존의 내용에서 추가되어야 할 사항이 있다면 추가된 내용에는 가급적 ins 태그를 사용하여 추가된 내용임을 명시해 주는 것이 좋습니다.

특히 블로그 포스팅에서는 ins 태그를 사용하면 문서가 업데이트된 내용이라는 것을 브라우저 및 웹 크롤러가 인식 하게 됩니다.

반대로 기존 내용에서 삭제되어야 할 내용이 있다면 그냥 내용을 삭제하기보다는 삭제할 부분에 del 태그를 사용해서 감싸 주는 것이 좋습니다.

이 역시 브라우저 및 웹 크롤러가 문서가 업데이트된 사항임을 인식 할 수 있기 때문입니다.

del 태그를 사용하면 del 태그가 적용된 텍스트가 취소선이 그어지는 것을 알 수 있게 됩니다.

s 태그 역시 취소선을 적용하는 태그이나 이 역시 위에서 말씀드린 em 태그와 b 태그처럼 del 태그는 브라우저와 웹 크롤러가 인식을 하고 s 태그의 경우 단순한 디스플레이용으로 사용하는 것임을 숙지해야 합니다.