Home HTML 텍스트 태그
Post
Cancel

HTML 텍스트 태그

Posted Aug 30, 2022 Updated Sep 7, 2022
By Hyeri Kang
13 min read

제목 태그 (Heading Tag)

제목을 표현할 수 있는 태그로, <h1> 부터 <h6>까지 있다.

1
2
3
4
5
6

<h1>h1 태그의 크기</h1>
<h2>h2 태그의 크기</h2>
<h3>h3 태그의 크기</h3>
<h4>h4 태그의 크기</h4>
<h5>h5 태그의 크기</h5>
<h6>h6 태그의 크기</h6>
▶ 실행결과

h1 태그의 크기

h2 태그의 크기

h3 태그의 크기

h4 태그의 크기

h5 태그의 크기
h6 태그의 크기

  • ❗제목 태그의 또 다른 역할

    제목 태그는 제목의 표현이라는 기능 외의 중요한 역할이 있다.
    여러 검색 엔진은 각 웹사이트의 내용을 제목 태그를 이용하여 키워드를 수집하고, 그 내용을 파악한다.
    따라서 HTML 문서 내에 포함되는 제목은 <h>태그로 작성해야 검색엔진에 의해 제대로 검색될 확률을 높일 수 있다.

단락 태그 (Paragraph Tag)

단락이란 내용상 끊어서 구분할 수 있는 하나하나의 부분을 의미하며, 문단이라고도 한다.
HTML에서는 <p>태그를 이용하여 이러한 단락을 표현한다.

1
2

<p>단락 태그</p>
<p>단락 태그</p>
▶ 실행결과

단락 태그

단락 태그

  • 띄어쓰기와 줄 나누기

    HTML 코드에서는 띄어쓰기나 줄 나누기를 여러 번 하더라도 웹 브라우저를 통해 나타나는 화면에는 전혀 영향을 주지 못한다.
    웹 브라우저는 여러 번의 띄어쓰기나 줄 나누기를 오직 하나의 띄어쓰기나 줄로만 인식하기 때문이다.

    따라서 새로운 단락을 만들지 않고 줄 나누기를 하고 싶을 때에는 <br>태그를 쓴다.
    <br>태그는 종료 태그가 없는 빈 태그(empty tag)이다.

    1
2
3
4
5
6
7

      <p>
      태그 내 줄바꿈 테스트

      br없이 엔터 2번하고 쓴 문장
      <br>
      br태그를 하고 쓴 문장
  </p>
    ▶ 실행결과

    태그 내 줄바꿈 테스트 br없이 엔터 2번하고 쓴 문장
    br태그를 하고 쓴 문장

  • 텍스트(text) 서식 미리 정의하기

    HTML 코드에서 작성한 텍스트 서식을 그대로 표현하려면 <pre>태그를 사용한다.
    <pre> 태그(preformatted text) 내에 작성된 텍스트의 모든 띄어쓰기와 줄 나누기는 웹 브라우저에 그대로 표현된다.

    1
2
3
4
5
6
7

      <pre>
      태그 내 줄바꿈 테스트

      br없이 엔터 2번하고 쓴 문장
      <br>
      br태그를 하고 쓴 문장
  </pre>
    ▶ 실행결과
              태그 내 줄바꿈 테스트

          br없이 엔터 2번하고 쓴 문장
          
    
          br태그를 하고 쓴 문장

  • 수평 가로 구분선

    단락을 나눌 때나 내용상의 구분을 표현하고자 할 때 <hr>태그를 이용하여 수평 가로 구분선을 사용한다.

    1
2
3

      <p>단락1</p>
  <hr>
  <p>단락2</p>
    ▶ 실행결과

    단락1

    단락2



서식 태그 (Formatting Tag)

서식 태그는 텍스트에 다양한 효과를 주는 태그이다.

  • 강조 효과

    • 텍스트를 굵게 표현하는 태그

      <b>태그 : 단순히 텍스트를 굵게 표현한다.
      <strong>태그 : 텍스트를 굵게 표현하며 내용이 중요하다는 의미도 포함한다.

      1
2
3

        <p><b>"이 부분"</b>은 단순히 글씨가 굵은 부분이에요!</p>
  <p><strong>"이 부분"</strong>은 중요한 부분이라서 굵게 표현됐어요!</p>
      ▶ 실행결과

      "이 부분"은 단순히 글씨가 굵은 부분이에요!

      "이 부분"은 중요한 부분이라서 굵게 표현됐어요!

    • 이탤릭체를 표현하는 태그

      <i>태그 : 단순히 텍스트를 이탤릭체로 표현한다.
      <em>태그 : 텍스트를 이탤릭체로 표현하며 내용이 중요하다는 의미도 포함한다.

      1
2
3

        <p><i>"이 부분"</i>은 단순히 글씨가 이탤릭체인 부분이에요!</p>
  <p><em>"이 부분"</em>은 중요한 부분이라서 이탤릭체로 표현됐어요!</p>
      ▶ 실행결과

      "이 부분"은 단순히 글씨가 이탤릭체인 부분이에요!

      "이 부분"은 중요한 부분이라서 이탤릭체로 표현됐어요!

  • 하이라이팅 효과

    <mark>태그 : 텍스트에 하이라이팅(highlighting) 효과를 적용시켜준다.

    1

      <p><mark>"이 부분"</mark>만 하이라이팅하고 싶어요.</p>
    ▶ 실행결과

    "이 부분"만 하이라이팅하고 싶어요.

  • 삭제 효과

    <del>태그 : 텍스트 중앙에 가로줄을 만들어 텍스트를 지운 것과 같은 효과를 준다.

    1

      <p><del>"이 부분"</del>을 지운 것처럼 하고 싶어요.</p>
    ▶ 실행결과

    "이 부분"을 지운 것처럼 하고 싶어요.

  • 삽입 효과

    <ins>태그(insert)는 텍스트 밑에 가로줄을 만들어 마치 빈칸에 텍스트를 삽입한 것과 같은 효과를 준다.

    1

      <p><ins>"밑줄 친 부분"</ins>에 들어갈 알맞은 말을 고르세요.</p>
    ▶ 실행결과

    "밑줄 친 부분"에 들어갈 알맞은 말을 고르세요.

  • 위첨자와 아래첨자 효과

    위첨자는 <sup>태그(superscript)를 사용하여, 아래첨자는 <sub>태그(subscript)를 사용하여 각각 표현할 수 있다.

    1
2

      <p>X<sup>2</sup> + Y<sup>3</sup> = Z</p>
  <p>물을 나타내는 화학식은 H<sub>2</sub>O 입니다.</p>
    ▶ 실행결과

    X2 + Y3 = Z

    물을 나타내는 화학식은 H2O 입니다.



인용구 태그(Quotation Tag)

  • 짧은 인용구

    짧은 인용구는 <q>태그(quotation)를 사용하여 표현할 수 있으며, 자동으로 앞뒤에 큰 따옴표가 붙는다.

    1
2
3
4
5

      <p>
      HTML의 정의는 
      <q>웹 페이지를 만들기 위한 하이퍼텍스트 마크업 언어</q>
      입니다.
  </p>
    ▶ 실행결과

    HTML의 정의는 웹 페이지를 만들기 위한 하이퍼텍스트 마크업 언어 입니다.

  • 블록 인용구

    길이가 긴 인용문은 <blockquote>태그(block quotation)를 사용하여 표현할 수 있다.
    <blockquote>태그는 이러한 인용 부분을 별도의 단락으로 구분하여 나타낸다.

    1
2
3
4

          <p>HTML의 정의</p>
      <blockquote>
      인터넷 서비스의 하나인 월드 와이드 웹을 통해 볼 수 있는 문서를 만들 때 사용하는 프로그래밍 언어의 한 종류이다.
      </blockquote>
    ▶ 실행결과

    HTML의 정의

    인터넷 서비스의 하나인 월드 와이드 웹을 통해 볼 수 있는 문서를 만들 때 사용하는 프로그래밍 언어의 한 종류이다.

  • 축약형 표현

    HTML에서 용어의 축약형을 표현하기 위해서는 <abbr>태그(abbreviation)를 사용한다.
    <abbr>태그 위에 마우스를 위치시키면 title 속성에 명시한 용어의 원형이 나타난다.

    1
2

          <p><strong><abbr title="HyperText Markup Language 5">HTML5</abbr></strong>
      란 웹 문서를 제작하는 데 쓰이는 프로그래밍 언어인 HTML의 최신규격입니다.</p>
    ▶ 실행결과

    HTML5 란 웹 문서를 제작하는 데 쓰이는 프로그래밍 언어인 HTML의 최신규격입니다.

  • 주소 표현

    <address>태그를 사용하면 HTML에서 주소를 표현할 수 있습니다.
    이러한 주소는 이탤릭체로 표현되며, 위아래로 약간의 공백이 자동으로 삽입된다.

    1

      <address>깃허브시<br>HyeL99구 블로그로</address>
    ▶ 실행결과
    깃허브시 HyeL99구 블로그로



주석

HTML 문서 내에서 주석 처리는 아래와 같이 한다.
<!-- 주석 내용 -->
주석의 시작태그는 <!--이며, 주석의 종료태그는 -->이다.
❗주석 내부에 주석을 중첩하는 것은 불가능하다.

1

<p>본문 내용</p><!-- 주석 내용 -->
▶ 실행결과

본문 내용


위와 같이 HTML 주석은 절대 웹 페이지에 나타나지 않으며, HTML 코드에 삽입된 주석을 읽고싶다면, 웹 브라우저의 페이지 소스 보기 등을 통해 확인할 수 있다.

문자셋 (Character set)

웹 브라우저가 HTML 문서를 정확하게 나타내기 위해서는 해당 문서가 어떠한 문자셋으로 저장되었는지를 알아야 한다.
따라서 HTML 문서가 저장될 때 사용된 문자셋에 대한 정보를 <head>태그 내의태그에 명시한다.

HTML4에서 UTF-8의 경우 :
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
HTML5에서 UTF-8의 경우 :
<meta charset="UTF-8">
위의 두 예제는 해당 HTML 문서가 UTF-8 문자셋을 사용하여 저장되었음을 웹 브라우저에 알려준다.

  • 문자셋의 종류

    • ASCII : 가장 처음 만들어진 문자셋으로, 인터넷에서 사용할 수 있는 127개의 영문자와 숫자로 이루어져 있다.
    • ANSI : 윈도우즈에서 만든 문자셋으로, 총 256개의 문자 코드를 지원한다.
    • ISO-8859-1 : 256개의 문자 코드를 지원하는 HTML4의 기본 문자셋이다.
    • UTF-8 : 세상에 있는 거의 모든 문자를 표현할 수 있는 유니코드 문자를 지원하는 HTML5의 기본 문자셋이다.

출처

TCP SCHOOL HTML

Coding Diary, HTML/CSS
html 코딩일지 제목 단락 서식 인용구 주석 문자셋
This post is licensed under CC BY 4.0 by the author.
Recently Updated
Contents