HTML 텍스트 관련 태그 간단 정리

블럭 요소관련 태그들

블럭 요소란 한 개의 독립된 덩어리라는 의미로 일반적으로 앞 뒤로 줄바꾸기가 일어남

<pre></pre>

입력하는 그대로 화면에 표시합니다.

HTML은 연속적으로 공백을 많이 넣더라도 한개의 공백만 표시되지만 pre태그를 이용하면 입력한 그대로 표시됨

다만, 웹 접근성에서 점자로 표시해주는 기계나 텍스트를 읽어 주는 기계를 사용 시 pre태그는 건너 뛰기 때문에 pre부분의 내용을 알 수 있도록 텍스트를 따로 추가하는 것이 좋습니다.

<h1></h1>

h1~h6까지 있으며 글씨크기를 조절합니다. h1이 가장 크며 h6가 가장 작습니다.

<p></p>

텍스트 단락을 만들며 앞뒤에 줄바꿈이 있는 텍스트 덩어리를 말함 만약에 웹페이지 창의 너비보다 길어질 경우 자동 줄바꿈이 일어남

<hr>

가로선을 삽입하는 태그이며 닫는 태그는 없음

<blockquote></blockquote>

다른 글을 인용할 경우 사용하는 것으로 다른 텍스트보다 안으로 들여써지는게 특징이며, cite속성을 사용하여 인용하는 사이트를 표시할 수 있습니다. cite태그 사용 시 이탤릭체로 표시가 됩니다.

인라인 요소관련 태그들

인라인 요소란 줄바꿈 없이 기본적으로 문장이 흐르듯 흐르는 모양을 가짐

<br>

줄바꿈하는 태그이며 닫는 태그는 없습니다.

<strong></strong>, <b></b>

strong태그와 b태그는 화면에서 굵은 글씨를 표현할 때 사용하지만, 화면을 읽어주는 기능을 사용할 때에는 strong만 강조해주고  b는 강조하지 않는다의 차이점이 있습니다. 단순히 볼드체를 원하실 경우에는 b태그를 사용하고 의미까지 강조하고 싶을 경우에는 strong태그를 사용하시는게 좋습니다.

<em></em>, <i></i>

em과 i태그는 기본적으로 이탤릭체로 나타내고 싶을 경우 사용하지만, strong,b 태그들 처럼 의미까지 강조하고 싶을경우 em태그를 그냥 이탤릭체로 나타내고 싶을경우에는 i태그를 사용하시는게 좋습니다.

<q></q>

blockquote태그와 같은 인용 내용을 표시하는 태그지만, blockquote와 다르게 줄바꿈이 없고 들여쓰지도 않으며 인용 내용에는 따옴표를 붙여 표시합니다.

<mark></makr>

텍스트에 형광펜 효과를 줄 경우에 사용

<span></span>

텍스트를 묶어 스타일을 적용할 때 주로 사용

<abbr></abbr>

약자 표시용으로 마우스를 올리면 풀네임이 나옵니다.

<kbd></kbd>

키보드 입력이나 음성 명령 같은 사용자 입력 내용

<small></small>

작게 표시하고 싶을 경우

, 

문자 첨자