개발지식/FE

[HTML] 텍스트 관련 태그 정보

bumpy 2023. 12. 30. 10:43
728x90

html 작성 시 이용약관 등 텍스트로 된 페이지를 작성해야 할 때가 있는데

이러한 경우 css로 꾸며줘도 되지만 html에서 내부적으로 지원하는 텍스트 관련 태그들을 이용하면

SEO(검색 엔진 최적화)에도 용이하여 제작한 페이지가 검색엔진에 노출되는 것에도 도움을 준다

 

<h1~6> : 제목 태그

문서의 제목을 나타내는 태그, 숫자가 높아질수록 소제목이다

 

<p> : 본문 태그

본문을 작성할 때 쓰는 태그, 기본적으로 display : block이다

 

<br> : 줄바꿈 태그

줄넘김 할 때 사용하는 태그, 박스범위를 넘쳐서 줄넘김 되는것이 아니라 의도적으로 줄넘김이 필요할 때 사용한다

 

<strong> : 중요 태그

중요한 내용을 강조할 때 사용하는 태그, font-weight 값을 증가 시켜서 bold하게 보이도록 한다

 

<em> : 강조 태그

텍스트를 기울어지게 해주는 태그, 영어권에서는 강조할 때 주로 기울어서 표기한다

 

<s> : 취소 태그

취소선을 사용할 때 쓰는 태그, 이런식으로 취소선이 생긴다

 

<blockquote>, <q> : 인용 태그

외부에서 가져와서 인용한 부분에 사용하는 태그, 인용한 내용이 길면 blockquote, 짧으면 q를 사용한다

blockquote는 해당 태그안 내용들이 자동 들여쓰기가 되고 q는 ""로 감싸지게 된다

 

<sub>, <sup> : 위 첨자, 아래 첨자

화학기호나 수학기호에 쓰이는 위아래 첨자 태그, 화학식에 H2O나 수학식에 제곱을 표현할 때 사용한다

 

<hr> : 가로 선 태그

가로 선이 필요할 떄 사용하는 태그, 주제 전환할 때 가로선을 그어서 구분하는데 사용한다

 

<pre> : 자유 서식 태그

p태그처럼 이어서 보여주는 것이 아닌 작성한 대로 보여줄 때 사용하는 태그, 주로 코드 작성할 때 사용한다

 

<code> : 코드 태그

짧은 코드를 작성할 때 사용하는 태그, 글 안에 push()같이 짧은 코드를 표시할 때 사용한다

728x90