HTML 기초 공부 - 2. 실무에서 자주 사용하는 HTML 필수 태그 다루기 1

 

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

 

 

텍스트는 일반적인 설명일 수도 있고, 글의 제목이나 부제목일 수도 있고, 다른 인물의 말이나 글을 인용한 것일 수도 있다.

이처럼 다양한 텍스트를 웹 브라우저가 제대로 구분하게 하려면 텍스트의 목적에 맞는 태그를 사용해야 한다.

그럼 텍스트를 작성할 때 어떤 태그들을 사용하는지 배워 보자.

 

 

1. hn 태그

 

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

 

<hn>제목</hn>

 

hn 태그는 h1부터 h6 태그까지 6개가 있는데,

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

즉, 같은 hn 태그라고 하더라도 h1 태그가 가장 중요하며 h6 태그가 상대적으로 가장 덜 중요하다.

 

<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>

 

실행결과를 보면 중요도가 가장 높은 h1 태그일 때 글자가 가장 크고 굵으며

h6 태그로 갈수록 크기가 작아지고 가늘어지는 것을 확인할 수 있다.

 

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

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

+ ) 검색 엔진 최적화(SEO, Search Engine Optimization)는 구글이나 네이버와 같은 검색 엔진에서 상위에 랭크(rank)될 수 있도록 검색 엔진에 친화적으로 마크업(markup, 문서 구조)을 작성하는 것을 말한다.

 

 

2. p 태그

 

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

 

<p>내용</p>

 

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

 

<p>하나의 문단을 작성할 때는 p 태그를 사용한다.</p>

 

3. br 태그

 

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

 

<br>

 

p 태그를 이용해 다음과 같이 코드를 작성한다면 결과가 어떻게 나올까?

 

<p>
    안녕하세요.
    코딩 공부하기 좋은 날입니다.
</p>

 

예상한 실행결과는 코드처럼 '안녕하세요.' 다음에 줄 바꿈되어서 '코딩 공부하기 좋은 날입니다.'가 출력되는 것이었다.

그러나 실제로는 한 줄로 출력된다.

 

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

줄 바꿈하라는 간단한 명령조차도 태그를 이용하여야 한다.

 

다음과 같이 br 태그를 사용해 줄 바꿈해 보자.

 

<p>
    안녕하세요.<br>
    코딩 공부하기 좋은 날입니다.
</p>

 

 

4. blockquote 태그

 

blockquote 태그는 출처에서 인용한 문단 단위의 텍스트를 작성할 때 사용한다.

이때 출처가 확실한 인용문은 cite속성으로 출처 경로를 명시하여야 한다.

 

<blockquote cite="출처 URL">문단 단위 인용문</blockquote>

 

다음은 blockquote 태그를 사용한 예제 코드입니다.

 

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

 

 

5. q 태그

 

q 태그는 문단 안에 텍스트 단위의 짧은 인용문을 작성할 때 사용할 수 있는 태그이다.

q 태그를 사용한 콘텐츠는 큰따옴표(" ")로 묶인다.

 

<p>
    차세대웹기술지원센터의 데이터에 따르면
    <q cite="https://www.koreahtml5.kr/front/stats/browser/browseUseStats.do">
        2021년 대한민국에서 가장 점유율이 높은 웹 브라우저는 구글의 크롬입니다.
    </q>
</p>

 

 

6. ins와 del 태그

 

ins 태그를 사용한 콘텐츠에는 밑줄이, del 태그를 사용한 콘텐츠에는 취소선이 생긴다.

ins 태그는 새로 추가된 텍스트임을 나타낼 때 사용하고,

del 태그는 기존에 있던 텍스트가 삭제된 텍스트임을 나타낼 때 사용한다.

 

<ins>추가 텍스트</ins>
<del>삭제 텍스트</del>

 

다음은 ins 태그와 del 태그를 사용한 예제 코드이다.

 

<p>
    세일 기간을 맞이하여 온라인 강의 수강권을 할인된 금액
     (정가<del>36,000원</del><ins>20,000원</ins>)에 판매합니다.
</p>

 

 

7. sub와 sup 태그

 

sub 태그와 sup 태그는 각각 아래 첨자, 위 첨자에 해당하는 텍스트를 작성할 때 사용한다.

 

_{아래 첨자}
^{위 첨자}

 

다음은 sub 태그와 sup 태그를 사용한 예제 코드이다.

 

<p>
    공기의 원소 기호는 H₂O
</p>
<p>
    4²은 16입니다.
</p>