📝 텍스트를 표현하는 HTML 태그들!

• 텍스트를 표현하는 태그들은 크게 2가지, 블록(Block) 태그와 인라인(Inline) 태그로 구분할 수 있다.
  (블록과 인라인에 대해서는 이전 글 참고)
• 블록 태그들은 주로 제목, 문단과 같이 글의 구조에 관련있다.
• 인라인 태그들은 주로 굵게, 기울이게 등 글자를 꾸며주는데 관련이 있다.

 

텍스트를 표현하는 블록 태그들

<h1> ~ <h6> : 제목 표시하기

<h1> 가장 큰 제목 </h1>
<h6> 가장 작은 제목 </h6>

• h1이 1등, 가장 크고 중요한 제목에 쓰인다.
• 🐍 h1 태그는 문서당 한 개만 있는게 좋다. (웹 표준, 구글 SEO)
• 나머지 h2 ~ h6은 소제목들에게 써주는게 좋다.

 

<p>, <br> : 단락 만들기, 줄 바꿈

<p>
    안녕하세요!<br>
    반갑습니다!
</p>

• <p> : 대부분 문서 내용을 표현할 때 쓰인다.
• <br> : 줄을 바꾸는데 쓰인다. 단독으로 한 번만 입력하면 된다. (Self closing Tag)

 

기타 텍스트를 표현하는 블록 태그들

• <hr> : 가로줄 입력
• <blockquote> : 인용문 입력
• <pre> : 입력하는 그대로 화면에 표시하기

🐍 <pre>는 <code>나 <samp>, <kdb> 같은 태그를 사용해 프로그램 소스를 표시할 때도 소스의 형태를 그대로 브라우저창에 보여줘야 하기 때문에 사용됨. 웹문서를 소리로 읽어주거나 점자로 표시해주는 기계에는 인식이 안 되기 때문에 대체 텍스트를 추가하는 것이 좋다.

 

 

텍스트를 표현하는 인라인 태그들

<strong> <b> : 굵게 표시하기

• <strong> <b> 둘 다 글씨를 굵게 표시하기 위해 쓰임
• 그러나 <strong>은 강조의 의미가 있지만, <b>는 단순히 글씨를 굵게 표시하는 의미
• 구분하는 이유는 웹 접근성 때문, <strong> 태그를 사용하면 화면 낭독기에서 좀 더 강조해서 읽는다.
• 🐍 중요도를 높이고 싶으면 <strong>을 겹쳐서 쓸 것!

 

<em> <i> : 기울여서 표시 

• <em> 강조하고 싶을 때. <i> 단순히 글씨를 기울이고 싶을 때
• 🐍 마음 속의 생각, 꿈, 기술적인 용어, 다른 언어의 관용구 표시시 주로 글씨를 기울임

 

기타 텍스트를 표현하는 인라인 태그들

• <q> : 인용 내용 표시
• <mark> : 형광팬 효과
• <span> : 줄 바꿈 없이 영역 묶기. 주로 글자색 바꿀 때등 CSS와 함께 쓰임
• <ruby> : 동아시아 글자 표시하기 (음독, 훈독)
• <abbr> : 약어 표시, title 속성에 원말을 함께 사용
• <cite> : 웹 문서나 포스트에서 참고 내용을 표시
• <code> : 컴퓨터 인식을 위한 코드
• <kbd> : 키보드 입력이나 음성 명령같은 사용자 입력 내용
• <small> : 부가 정보처럼 작게 표시해도 되는 텍스트
• <sub> : 아래 첨자
• <sup> : 윗 첨자
• <s> : 취소선
• <u> : 밑줄