2.1 HTML 태그로 텍스트 작성하기

웹페이지를 구성하는 요소는 여러가지가 있지만, 가장 큰 비중을 차지하는 요소는 바로 텍스트이다.

이번에는 텍스트를 작성할때 어떤 태그를 사용하는지 정리한다.

1. hn 태그

hn 태그는 제목이나 주제를 나타내는 텍스트를 표현할 때 사용한다.

hn 태그는 h1부터 h6까지 6개가 있다.

여기서 h는 heading을 의미하고 n은 들어가는 숫자는 중요도를 나타낸다.

형식

💡 <hn> 제목 </hn>

<h1>Heading level 1</h1>
<h2>Heading level 2</h2>
<h3>Heading level 3</h3>
<h4>Heading level 4</h4>
<h5>Heading level 5</h5>
<h6>Heading level 6</h6>

1부터 6으로 갈수록 중요도가 적어지며, 굵기와 크기가 가늘고 작아진다.

또한, hn 태그로 작성된 텍스트는 검색엔진에서 키워드로 인식한다.

따라서 검색엔진 최적화(SEO)를 위해서 본문에서 핵심이 되는 내용으로 제목이나 주제를 잘 선택해서 작성해야한다.

Search Engine Optimization (SEO)란?

• SEO는 어떤 한 부분으로 결정하지 않고, 여러 요인을 종합해 결정하기에 태그의 목적에 맞는 쓰임새로 마크업을 작성해야한다.
• SEO는 구글이나 네이버와 같은 검색엔진에서 상위에 랭크(rank) 될 수 있도록 검색엔진에 친화적인 마크업(mark up, 문서구조)을 작성하는 것을 말한다.

여기서 h는 heading을 의미하고 n은 들어가는 숫자는 중요도를 나타낸다.

Tip.

검색엔진은 hn태그를 검색할때 h1부터 단계적으로 검색한다.

만약 h4 태그를 사용하지 않고 h1, h2, h3, h5, h6 태그를 쓴다면 검색엔진은 h1 태그부터 단계적으로 검색하다가 h4가 없으면 h5, h6를 검색하지 않는다.

따라서 hn 태그는 중간에 숫자를 건너뛰지말고 h1부터 단계적으로 사용해야한다.

2. p 태그

p태그는 본문의 문단을 작성할 때 사용한다.

HTML에서는 제목이나 주제를 나타내는 텍스트가 아니면 대부분 본문이기 때문에 p 태그를 자주 사용한다.

형식

💡 <p> 하나의 문단 </p>

3. br 태그

br 태그는 문단에서 줄 바꿈할 때 사용합니다.

• 빈 태그
• 줄바꿈 역할만 수행

형식

💡 <br>

<p>내이름은 김준서, 
배가고프네요</p>

<p>내이름은 김준서,<br> 배가고프네요</p>

위 처럼 <p>태그 안에서 enter로 줄바꿈을 해주어도 출력에는 줄바꿈이 되질 않는다.

그러나 <br>태그를 쓰니 줄바꿈이 되어 출력된다.

HTML은 모든 명령이나 지시를 태그로 해야하기 때문이다.

4. blockquote 태그

• blockquote 태그는 출처에 인용한 문단 단위의 텍스트를 작성할때 사용한다.
• 반드시 한개 이상의 p 태그를 포함해야한다.
• p태그 안에는 blockquote 태그를 사용할 수 없다.

형식

💡 <blockquote cite = “출처 URL”> 문단 단위 인용문 </blockquote>

<blockquote cite = "https://ko.wikipedia.org/wiki/HTML"><p>하이퍼 텍스트 마크업 언어(영어:
 Hyper Text Markup Language, HTML, 문화어: 초본문표식달기언어, 하이퍼본문표식달기언어)는 
웹 페이지 표시를 위해 개발된 지배적인 마크업 언어다. 또한, HTML은 제목, 단락, 목록 등과 같은 본
문을 위한 구조적 의미를 나타내는 것뿐만 아니라 링크, 인용과 그 밖의 항목으로 구조적 문서를 만들 수
 있는 방법을 제공한다.</p></blockquote>

5. q 태그

• 문단 안에 짧은 인용문을 작성할 때 사용할 수 있는 태그이다.

형식

💡 <q cite = "출처 URL"></q>

<p>위키피디아에 따르면 <q cite = "https://ko.wikipedia.org/wiki/HTML">HTML는 웹 페이지 표시
를 위해 개발된 지배적인 마크업 언어다.</q></p>

q태그를 사용한 콘텐츠는 “”로 묶여서 출력된다.

6. ins와 del 태그

ins태그

• 텍스트에 밑줄 효과를 준다.
• 새로 추가된 텍스트임을 나타낼때 사용함

del태그

• 텍스트에 취소선이 생기는 효과를 준다.
• del태그는 기존에 있던 텍스트가 삭제된 텍스트임을 나타낼때 사용한다.

<p>세일 기간을 맞이하여 케이크를 <del>31000원</del>에서 
할인된 금액인 <ins>4990원</ins>에 판매합니다.</p>

7. sub와 sup 태그

sub태그

• 텍스트에 아래첨자를 붙여준다

sup태그

• 텍스트에 위첨자를 붙여준다.