헷갈리기 쉬운 HTML 태그 총 8가지 비교!

HTML을 작성하다 보면 비슷해 보이지만 용도가 다른 태그들로 인해 다소 혼란스러울 수 있는데요. 이번 포스트에서는 자주 헷갈리는 태그들을 비교하고 그 차이점을 짚어보도록 하겠습니다!!

1. <p> 태그 vs <span> 태그 vs <div> 태그

이 세 태그는 웹 페이지에서 자주 사용되며 각각 고유한 특성과 용도가 있어 헷갈리기 쉬운데요.

예시 이미지

1. <p> 태그

<p> 태그는 블록 요소로, 하나의 문단을 나타냅니다. 텍스트를 그룹화하여 문단을 형성하고, 항상 새로운 줄에서 시작합니다

<p>This is a paragraph of text.</p>

• 디폴트 스타일: 각 <p> 태그는 위아래에 여백이 있어, 문단 간에 공간을 만듭니다. 이는 읽기 편한 구조를 제공하는 데 도움이 됩니다.
• 사용 상황: 문장이나 텍스트 블록을 정의할 때 사용하며, 문서의 텍스트 구조를 논리적으로 구성할 때 유용합니다.

⭐ 중요 : <p>는 기본적으로 블록 레벨이기 때문에 다른 블록 요소를 포함할 수 없습니다. <p> 내부에 블록 요소를 넣으면 예기치 않은 레이아웃 문제가 발생할 수 있습니다.

 

   2. <span> 태그

 <span>은 인라인 요소로, 특정 부분의 텍스트를 강조하거나 스타일링할 때 사용됩니다. <span> 자체로는 아무런 의미를 가지지 않지만, CSS나 JavaScript와 결합해 원하는 효과를 줄 수 있습니다.

<p>This is a <span style="color: red;">highlighted</span> text inside a paragraph.</p>

 

• 디폴트 스타일: 기본적으로 추가적인 스타일이 없으며, 같은 줄에 위치합니다.
• 사용 상황: 텍스트의 일부분에 스타일을 적용하거나, 특정한 텍스트를 선택적으로 조작할 때 사용합니다.

⭐ 중요 :  <span>은 시맨틱한 의미를 전달하지 않으므로, 단순히 스타일링이나 스크립트로 제어할 목적으로 사용됩니다.

 

   3. <div> 태그 

 

<div>는 블록 요소로, 콘텐츠를 그룹화할 때 사용됩니다. 시맨틱한 의미가 없는 단순한 컨테이너이며, 주로 레이아웃을 구성하거나 스타일링을 위해 사용합니다.

<div class="container">
  <h2>Section Title</h2>
  <p>This is a paragraph inside a div.</p>
</div>

• 디폴트 스타일: 각 <div>는 새로운 줄에서 시작하고, 전체 가로 너비를 차지합니다.
• 사용 상황: 콘텐츠의 그룹화, 레이아웃 구성, 스타일링 적용 등을 위해 사용하며, 그리드나 Flexbox와 결합하여 웹 페이지의 구조를 만들 때 필수적입니다.

 

 

⭐ 중요: <div>는 시맨틱한 의미를 제공하지 않기 때문에, 레이아웃을 구성하거나 CSS의 스타일링 적용 목적으로만 사용해야 합니다. 실제 콘텐츠의 의미를 나타낼 수 있는 시맨틱 태그가 있다면, <div> 대신 그것을 사용하는 것이 좋습니다.

태그 간의 차이점 요약

태그	요소 타입	주 사용 목적	시맨틱 의미	기본 스타일
<p>	블록	문단, 텍스트 구조화	의미 있음	문단 간 기본 여백 적용
<span>	인라인	텍스트 강조, 스타일 적용	의미 없음	추가 스타일 없음
<div>	블록	레이아웃 구성, 콘텐츠 그룹화	의미 없음	새로운 줄 시작, 전체 너비

2. 인라인과 블록 요소의 차이점과 인블록 요소

HTML에서는 요소들이 인라인(inline), 블록(block), 그리고 그 중간 형태인 인블록(inline-block)으로 나뉩니다. 이 구분은 요소의 디스플레이 특성에 따라 레이아웃을 어떻게 구성할지 결정하는 중요한 요소입니다. 특히, 인라인 요소와 블록 요소의 특성을 동시에 가지는 인블록 요소는 헷갈리기 쉽기 때문에 정확하게 이해하는 편이 좋습니다.

1. 인라인 요소 (Inline Elements)

 

• 특징: 요소가 같은 줄에 위치하며, 요소의 크기가 내용의 길이에 따라 결정됩니다. 인라인 요소는 새로운 줄을 만들지 않습니다.
• 예시: <span>, <a>, <img>, <strong>, <em> 등.
• 사용 상황: 텍스트를 강조하거나 링크, 이미지 등을 같은 줄에 배치할 때 사용합니다.

<p>This is a <span>highlighted</span> text with <a href="#">a link</a>.</p>

 

2.  블록 요소 (Block Elements)

• 특징: 요소가 새로운 줄에서 시작하며, 가로 전체를 차지합니다. 블록 요소는 다른 블록 요소를 포함할 수 있습니다.
• 예시: <div>, <p>, <h1>, <ul>, <li>, <header>, <footer> 등.
• 사용 상황: 독립적인 섹션이나 구조를 나타낼 때 사용됩니다.

<div>
  <h1>Title</h1>
  <p>This is a paragraph inside a div.</p>
</div>

 

 

3. 인블록 요소 (Inline-block Elements)

• 특징: 인라인 요소처럼 같은 줄에 위치할 수 있으면서도 블록 요소처럼 크기(너비와 높이)를 지정할 수 있습니다. 두 속성을 모두 가지는 유연한 특성을 가집니다.
• 예시: <button>, <input>, <img> 등이 대표적이며, CSS에서 display: inline-block;을 사용하여 다른 요소에도 적용할 수 있습니다.
• 사용 상황: 요소를 인라인으로 배치하면서도 너비, 높이 등의 스타일을 조절하고 싶을 때 사용합니다.

<style>
  .inline-block-example {
    display: inline-block;
    width: 100px;
    height: 50px;
    background-color: #f0f0f0;
    text-align: center;
    line-height: 50px;
  }
</style>

<p>Here are inline-block elements:</p>
<div class="inline-block-example">Item 1</div>
<div class="inline-block-example">Item 2</div>
<div class="inline-block-example">Item 3</div>

 

⭐ 중요: 인블록 요소를 사용하는 이유

• 레이아웃 구성: 블록 요소처럼 크기를 제어할 수 있지만, 인라인 요소처럼 한 줄에 여러 요소를 배치할 수 있어 레이아웃을 효율적으로 구성할 수 있습니다.
• 유연성: display: inline-block;을 적용하면 기본 인라인 요소에도 블록 속성을 일부 부여할 수 있어, CSS 스타일링에 유연하게 대응할 수 있습니다.
• 정렬과 간격 제어: 인블록 요소는 인라인 요소와 달리 패딩, 마진, 너비, 높이 등을 조절할 수 있어 세밀한 레이아웃 조정이 가능합니다.

3. <div> 태그 vs <section> 태그

• <div> 태그 : 블록 요소로, 콘텐츠를 구획 짓는 데 사용됩니다. 특정 의미를 갖지 않으며, 주로 스타일링이나 스크립팅을 위해 그룹화할 때 사용됩니다.

<div class="container">
    <p>This is content inside a div.</p>
</div>

• <section> 태그: 콘텐츠의 주제를 논리적으로 나누는 시맨틱한 태그입니다. 특정 주제나 기능을 구분할 때 사용됩니다.

<section>
    <h2>Section Title</h2>
    <p>This is content inside a section.</p>
</section>

⭐ 중요: <div>는 스타일링과 스크립팅에 활용하고, <section>은 의미 있는 콘텐츠 블록을 만들 때 사용합니다. 시맨틱한 요소를 사용하면 SEO에 도움이 됩니다.

4. <b> 태그 vs <strong> 태그

• <b> 태그: 텍스트를 굵게 표시합니다. 의미보다는 스타일에 집중한 요소로, 중요성을 나타내지는 않습니다.

<p>This is <b>bold</b> text.</p>

• <strong> 태그: 텍스트를 굵게 표시하는 동시에, 의미적으로 중요한 텍스트임을 나타냅니다. 스크린 리더와 SEO에서도 중요도를 강조합니다.

<p>This is <strong>important</strong> text.</p>

⭐ 중요: 단순히 굵은 텍스트를 원하면 <b>, 의미적으로 중요한 내용을 강조할 때는 <strong>을 사용하는 것이 좋습니다.

5. <i> 태그 vs <em> 태그

• <i> 태그 : 텍스트를 이탤릭체로 표시합니다. 의미적인 강조보다는 시각적인 스타일링에 가까운 요소입니다.
• <em> 태그: 텍스트를 이탤릭체로 표시하면서, 텍스트에 의미적 강조를 부여합니다. 스크린 리더가 강조를 인식합니다.

⭐ 중요: 텍스트의 강조를 시각적으로만 표시하려면 <i>, 의미적 강조를 부여하려면 <em>을 사용하세요.

6. <ol> 태그 vs <ul> 태그

 

• <ol> 태그: 순서가 있는 목록(ordered list)을 만들 때 사용합니다. 각 항목은 번호 또는 문자로 구분됩니다.

<ol>
    <li>First item</li>
    <li>Second item</li>
</ol>

• <ul> 태그: 순서가 없는 목록(unordered list)을 만들 때 사용합니다. 각 항목은 보통 불릿 포인트로 표시됩니다.

 

<ul>
    <li>First item</li>
    <li>Second item</li>
</ul>

⭐ 중요: 순서가 중요하면 <ol>, 순서가 필요 없는 경우 <ul>을 사용하세요.

7. <img> 태그 vs <figure> 태그와 <figcaption> 태그

• <img> 태그: 이미지를 삽입하는 데 사용됩니다. 단순히 이미지만 삽입하고 설명이 필요하지 않을 때 사용합니다.

<img src="image.jpg" alt="Sample Image">

• <figure> 태그와 <figcaption> 태그: 이미지와 그 설명을 묶는 시맨틱한 요소입니다. 콘텐츠와 관련된 이미지에 설명을 덧붙일 때 사용합니다.

<figure>
    <img src="image.jpg" alt="Sample Image">
    <figcaption>Figure 1: Sample Image Description</figcaption>
</figure>

⭐ 중요: 이미지만 삽입할 때는 <img>, 설명이 필요한 경우 <figure>와 <figcaption>을 함께 사용하세요.

8. <header> 태그 vs <head> 태그

 

• <header> 태그: 웹 페이지나 섹션의 머리말을 나타내는 시맨틱 요소입니다. 제목, 로고, 내비게이션 메뉴 등이 포함될 수 있습니다.

<header>
    <h1>Welcome to My Website</h1>
</header>

• <head> 태그: HTML 문서의 메타데이터를 포함하는 요소입니다. 스타일시트, 스크립트, 메타 태그 등이 위치합니다.

<head>
    <title>Page Title</title>
</head>

 

⭐ 중요: <header>는 화면에 표시되는 콘텐츠의 머리말, <head>는 문서의 메타 정보를 담고 있습니다.