HTML 태그 종류와 사용 예시 소개

farsilo 생활정보 2025년 06월 01일 | 0

HTML 태그의 기초

HTML(HyperText Markup Language)은 웹 페이지의 구조를 설계하는 마크업 언어입니다. 웹사이트는 이 마크업 언어를 통해 콘텐츠를 표시하며, HTML 태그는 이러한 콘텐츠의 구성 요소들을 정의하는 역할을 합니다. 오늘은 HTML에서 가장 기본적이고 자주 사용되는 태그에 대해 알아보겠습니다.

주요 HTML 태그 종류

HTML에서는 다양한 태그를 사용하여 웹 페이지를 구성하게 됩니다. 그 중에서도 가장 기본적이고 필수적인 태그들에 대해 살펴보겠습니다.

 태그: 문단을 나타내는 태그입니다. 콘텐츠를 구분하기 위해 사용하며, 새 문단을 시작할 때마다 이 태그를 사용합니다.
  태그: 줄 바꿈을 생성하는 태그입니다. 반드시 종료 태그가 필요하지 않으며, 주로 텍스트의 특정 위치에서 줄을 나누고자 할 때 활용됩니다.
<pre> 태그: 사전 형식의 텍스트를 표현하는 태그입니다. 입력한 대로 공백과 줄 바꿈이 유지되며, 주로 코드와 같은 형식이 중요한 내용을 표시할 때 사용합니다.
: 비공식적인 공백을 삽입할 수 있는 방법으로, 여러 개의 공백을 만들어줄 때 사용됩니다.

태그 사용하기

태그는 ‘paragraph’의 약자로, 웹 페이지 내에서 문단의 시작을 알리기 위해 사용됩니다. 이 태그를 사용하게 되면 문단 전후로 일정한 여백이 자동으로 설정됩니다. 예를 들어:

<p>안녕하세요! 저희 웹사이트에 방문해 주셔서 감사합니다.</p>
<p>이 곳에서는 다양한 정보를 제공하고 있습니다.</p>

위 코드의 실행 결과, 두 문장은 각각 별도의 문단으로 표시됩니다.

태그로 줄 바꿈 하기

태그는 줄 바꿈을 생성하는 태그로, 주로 문장 중간에 줄을 나누고 싶을 때 사용됩니다. 예를 들어:

안녕하세요. 저의 블로그입니다.<br>여기서 다양한 정보들을 얻으실 수 있습니다.

위와 같은 코드로 작성하면, ‘블로그입니다.’와 ‘여기서’ 사이에 줄 바꿈이 발생하여 출력됩니다.

<pre> 태그의 활용

<pre> 태그는 주로 코드와 같은 미리 포맷된 텍스트를 표시할 때 유용합니다. 이 태그를 사용하면 입력한 내용이 그대로 표시되며, 줄 바꿈이나 공백이 유지됩니다. 예를 들면:

<html>
  <head>
    <title>페이지 제목</title>
  </head>
  <body>
    <p>여기에는 다른 내용이 있습니다.</p>
  </body>
</html>

이렇게 작성된 코드는 브라우저에 그대로 출력돼, 문서의 구조를 명확하게 표현할 수 있습니다.

(Non-breaking Space) 이해하기

HTML에서는 여러 개의 공백을 연속으로 입력해도 하나의 공백으로 처리됩니다. 이러한 상황을 보완하기 위해 (Non-breaking Space)를 사용하여 공백을 추가할 수 있습니다. 예를 들면:

저희 웹사이트는   최고의 서비스를 제공합니다.

위 코드를 사용하면 ‘저희 웹사이트는’ 다음에 여러 개의 공백을 추가할 수 있습니다.

마무리하며

HTML 태그들은 웹 페이지를 구성하는 데 필수적인 요소들입니다. 여기서 소개한 기본적인 태그들 외에도 HTML에는 수많은 태그가 존재하며, 각각의 태그는 특정한 기능과 역할을 가지고 있습니다. 이러한 태그들을 이해하고 활용함으로써, 여러분은 더욱 풍부하고 다양한 웹 콘텐츠를 만들 수 있게 될 것입니다. 앞으로도 HTML에 대한 학습을 지속적으로 이어 나가시길 바랍니다!

자주 찾는 질문 Q&A

HTML 태그란 무엇인가요?

HTML 태그는 웹 페이지의 구조를 정의하는 마크업 언어의 요소로, 콘텐츠의 표시 및 배치를 위한 지침을 제공합니다.

주요 HTML 태그에는 어떤 것들이 있나요?

기본적인 HTML 태그로는 문단을 나타내는 , 줄 바꿈을 하는 , 코드 형식을 유지하는 <pre> 태그가 있습니다.

Non-breaking Space는 어떻게 사용하나요?

를 사용하면 HTML에서 연속된 공백을 추가할 수 있어, 특정 텍스트 사이에 여유 공간을 만들 수 있습니다.

HTML 태그 종류와 사용 예시 소개