이 글에서는 HTML(HyperText Markup Language) 에서 텍스트 관련 태그(h1~h6, title, p, ...) 가 무엇이고 어떤 것들이 있는지 정리했습니다.

HTML: 텍스트 관련 태그

HTML 은 글자를 보여주는 태그들이 여러 개 존재합니다. 텍스트를 굵게, 기울임, 줄바꿈, 목록처럼 표현 방식과 역할을 적절히 조합하면, 읽기 좋은 문서 구조를 만들 수 있습니다.

HTML: 블록/인라인 태그란 ?

텍스트 관련 태그는 크게 블록 태그와 인라인 태그로 나눌 수 있습니다. 이 두 태그의 가장 큰 차이는 해당 태그를 사용했을 때 “줄바꿈이 생기느냐” 입니다.

• **블록 태그 **: 줄바꿈이 생긴다.

  요소 하나가 한 줄 전체를 차지하고, 보통 앞뒤에 여백이 생기면서 다른 블록과 구분됩니다.

• ** 인라인 태그 **: 줄바꿈이 생기지 않고, 줄 안에 공간 일부만 차지한다.

  문장 흐름 안에서 필요한 텍스트 부분만 감싸고, 좌우로 다른 텍스트와 자연스럽게 이어집니다.

다만 블록 · 인라인 태그로의 구분은 해당 태그를 사용했을 때의 “줄바꿈 여부”를 기준으로 나눈 것일 뿐이고, 진짜 중요한 것은 각 태그가 가진 의미입니다. 태그마다 어떠한 의미를 가지는지를 기억해 두고, 나중에 사용할 때 텍스트의 의미에 따라 알맞은 태그를 골라 쓰면 됩니다.

HTML: 블록(Block) 태그

블록 태그는 화면에서 하나의 “덩어리”로 취급되는 태그입니다. 덩어리로 취급되기 때문에 항상 새로운 줄에서 시작하고, 요소 하나가 한 줄 전체를 차지해서 줄바꿈이 일어납니다.

제목: <h1></h1> ~ <h6></h6>

문서의 제목과 소제목을 나타내는 태그로서, 문서 구조를 계층적으로 표현할 때 사용합니다. <h1> 에서, <h6> 로 갈수록 페이지/문서 에서 중요도가 낮은 제목임을 의미합니다.

일반적으로 페이지 하나에 대표 주제를 나타내는 <h1> 을 한 번만 사용하고, 섹션 제목은 <h2>, 그 하위는 <h3> 처럼 숫자를 순서대로 내려가며 사용합니다.

문단: <p></p>

일반적인 문단 텍스트를 나타내며, 하나의 <p> 가 하나의 단락이 되고, 자동으로 위아래 여백이 들어가서 문단 간 구분이 생깁니다. 만약 같은 문단(<p>) 안에서 줄만 바꾸고 싶을 때는 <br> 태그를 사용하고, 내용상 다른 문단이라면 새로운 <p> 태그를 사용하는 것이 좋습니다.

줄바꿈: <br/>

문단 안에서 강제로 줄바꿈을 할 때 사용하는 태그입니다. <p> 안에서 문장 흐름은 유지하되 줄만 바꾸고 싶을 때 <br> 을 넣어 줍니다.

수평선: <hr/>

수평선을 그려서 앞뒤 내용을 시각적으로 나눌 때 사용합니다.

문단 단위 인용: <blockquote></blockquote>

문단 단위의 긴 인용문을 나타내며 보통 좌우 여백이 생기기 때문에 본문과 구분되어 보입니다. 기사나 블로그에서 인용 블록을 만들 때 자주 사용합니다.

리스트 목록: <ul>, <ol>, <li>

목록을 구성하는 태그입니다. <ul> 은 순서 없는 목록(불릿), <ol> 은 순서 있는 목록(번호), <li> 는 각각의 목록 항목을 의미합니다.

의미 목록: <dl>, <dt>, <dd>

<dl>, <dt>, <dd>는 “용어 : 설명” 구조(key: value)를 의미로 표현하는 태그입니다. <dl> 이 전체 목록, <dt> 가 용어, <dd> 가 설명 역할을 하며, FAQ 나 용어 사전 같은 형태를 만들 때 유용합니다.

HTML: 인라인(Inline) 태그

인라인 태그는 “텍스트 줄 안에서” 일부만 차지하는 요소들입니다. 자체로 줄바꿈을 만들지 않고, 앞뒤 텍스트와 한 줄 안에서 자연스럽게 이어지는 것이 특징입니다.

<a></a>

<a> 는 닻(anchor) 의 약자로, 다른 페이지·파일·이메일·같은 페이지 안의 위치 등 어떤 URL로든 이동하는 하이퍼링크를 만드는 태그입니다.

<a> 속성

• href: 목적지가 되는 URL 로 href 가 없으면 target, download, rel, hreflang, type 등을 사용할 수 없다.
• target: 링크를 클릭했을 때 어디에서 열지(탭·창·프레임)를 지정한다.
  • _self: 기본 값으로 현재 탭 또는 프레임에서 열린다.
  • _blank: 새 탭, 새 창에서 열린다.
  • _parent: 현재 문서가 프레임/iframe 안에 있을 때, 부모 프레임에서 열린다.
  • _top: 여러 단계로 중첩된 프레임 안이라도 최상위 창 전체에서 열리게 한다.
• rel: 현재 문서와 링크 대상 간의 ** 관계 **를 나타내는 속성이다.
• download: 클릭 시 이동 대신 파일을 다운로드하고, 값이 있으면 그 값으로, 없으면 원래 파일 이름으로 저장한다.
• hreflang: 링크된 문서의 ** 언어(및 지역)** 코드(ko, en, en-US, ja, fr)를 명시한다.
• type: 링크 대상 리소스의 **MIME 타입 **(text/html, application/pdf)을 나타낸다.

굵게: <strong></strong>, <b></b>

• <strong></strong>

  의미상 중요한 텍스트를 나타내며 굵게 보이게합니다. 스크린 리더 등에서 강조해서 읽기 때문에 “진짜 중요한 부분”을 표시할 때 사용합니다.

• <b></b>

  텍스트를 단순히 굵게 보이게 합니다. 의미적인 강조보다 시각적으로 눈에 띄게 하고 싶을 때 사용합니다.

기울이기: <em></em>, <i></i>

• <em></em>

  텍스트를 기울여 강조하는 태그로, 문장 안에서 특정 단어나 구절을 강조할 때 사용합니다.

• <i></i>

  텍스트를 기울이는 태그로 외래어, 생각, 용어, 다른 톤의 텍스트 등을 구분할 때 사용합니다.

하이라이트: <mark></mark>

형광펜으로 칠한 것처럼 배경에 하이라이트를 줄 때 사용하며, 검색 결과에서 매칭된 텍스트를 표시하거나 본문 중 중요한 부분을 눈에 띄게 만들고 싶을 때 사용합니다.

작게: <small></small>

텍스트를 작은 글씨로 표현하여 저작권, 부연 설명, 각주임을 나타냅니다.

위/아래 첨자: <sup></sup>, <sub></sub>

위첨자(superscript)와 아래첨자(subscript)와 를 나타내며, 수학식 지수, 화학식, 단위 등을 표현할 때 자주 쓰입니다.

취소선: <del></del>, <s></s>

• <del></del>

  텍스트에 취소선을 표현하여 문서에서 삭제된 내용을 의미적으로 표현합니다.

• <s></s>

  텍스트에 취소선을 표현하여 더 이상 유효하지 않은 텍스트를 시각적으로만 표시할 때 사용합니다.

인라인 래퍼: <span></span>

텍스트 줄 안에서 일부만 묶어 스타일이나 스크립트를 적용할 때 사용하며 자체적인 의미는 없습니다.

주의할 점

1. 브라우저마다 기본 스타일이 다르다

같은 HTML이라도 Chrome, Safari, Firefox에서 다르게 보일 수 있다. CSS Reset이나 Normalize.css를 사용해서 기본 스타일을 통일해야 한다.