HTML 태그 – 올바른 이해와 사용 방법

`` 태그의 정의

 태그는 문단(paragraph)을 나타내는 태그입니다.

HTML은 문단에 다양한 의미를 부여하기 위해 여러 태그를 제공합니다.
예를 들면, <ins>나 <adress>와 같은 태그들이 그러한 역할을 합니다. 따라서, 특정한 의미를 가진 문단을 표현할 때는 해당 의미에 적합한 태그를 선택하여 사용해야 합니다.

HTML <ins> 태그

HTML <adress> 태그

 태그는 블록을 구성하는 블록 레벨 태그이며, 자신의 닫는 태그  이전에 다른 블록 레벨 태그가 분석되면 자동으로 닫힙니다. 아래의  태그의 구문 섹션을 참조하세요!

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

HTML

<p>
    태그는 문단(paragraph)을 나타내는 태그입니다.
</p>
<p>
    더불어, HTML은 문단에 다양한 의미를 부여하기 위해 여러 태그를 제공합니다.
    예를 들면, ins나 adress와 같은 태그들이 그러한 역할을 합니다.
    따라서 특정한 의미를 가진 문단을 표현할 때는 해당 의미에 적합한 태그를 선택하여 사용해야 합니다.
</p>

대부분의 브라우저에서는  태그의 위와 아래의 간격을 분리합니다. 이것을 시각적으로도 문단에 여백을 주어 사용자의 빠른 콘텐츠 탐색을 돕는 효과를 주기 위함입니다. 별도의 시각적 효과를 주기 위해서는 CSS를 통해 할 수 있습니다.

`` 태그의 사용 방법

보다 구체적인 태그가 더 적절할 때는  태그를 사용하면 안 됩니다.

앞서 언급한 바와 같이 HTML은 문단에 다양한 의미를 부여하기 위해 여러 태그를 제공합니다.
예제를 통해 살펴보겠습니다.

다음 예는 기술적으로 정확합니다.

그러나 다음과 같이 마크업하는 것이 더 좋습니다.

HTML

<section>
    ...
    <footer>최종 수정 : 2023-04-23</footer>
    <address>작성자 : author@example.com</address>
</section>

<!-- 또는 -->

<section>
    ...
    <footer>
        <p>최종 수정 : 2023-04-23</p>
        <address>작성자 : author@example.com </address>
    </footer>
</section>

HTML <address> 태그

HTML <footer> 태그

위의 예와 같이 HTML은 문단에 다양한 의미를 부여하기 위해 여러 태그를 제공합니다.
문단이라는 개념은  태그에서 사용하는 문단 이상의 의미로 사용됩니다.  태그는 문단을 나타내는 여러 가지 방법 중 하나일 뿐입니다.

이는 명세서에서도 문단에 대한 내용으로 설명하고 있습니다.

`` 태그의 구문

 태그의 논리적 개념('문단'이라는)을 살펴보았습니다.

 태그의 구문과 관련된 구조적인 개념을 알아야 합니다.
예제를 통해 살펴보겠습니다.

이 예시 문단을 다음과 같이 마크업한다면 틀린 구문입니다.

틀린 구문

<p>
    보기 좋은 문장에는 다음과 관련된 글머리 기호가 있습니다.
    <ul>
        <li>눈꽃처럼 아름다운 ...</li>
        <li>가만히 네 손을 잡고서</li>
        <li>눈을 마주 하고 있어</li>
    </ul>
    아래에서 더 자세히 설명합니다.
</p>

목록 요소(<ol> 및 <ul>)는  태그는 하위 요소로 올 수 없습니다.

 태그는 블록을 구성하는 블록 레벨 태그이며, 자신의 닫는 태그  이전에 다른 블록 레벨 태그가 분석되면 자동으로 닫힙니다. 따라서 위의 구문에서 <ul> 태그를 만나면  태그의 자신의 닫는 태그인  태그가 생성되기 때문에 오류를 발생하게 됩니다.

HTML에서 사용하는 '문단'이라는 용어는 논리적인 개념에 더해서 구조적인 개념을 포함하고 있습니다. 이는 명세서에서  태그를 설명할 때 중요 사항으로 다루고 있습니다.

따라서 위 예의 마크업은 다음과 같을 수 있습니다.

HTML

<p>
    보기 좋은 문장에는 다음과 관련된 글머리 기호가 있습니다.
</p>
<ul>
    <li>눈꽃처럼 아름다운 ...</li>
    <li>가만히 네 손을 잡고서</li>
    <li>눈을 마주 하고 있어</li>
</ul>
<p>
    아래에서 더 자세히 설명합니다.
</p>

<!-- 또는 -->

<div>
    보기 좋은 문장에는 다음과 관련된 글머리 기호가 있습니다.
    <ul>
        <li>눈꽃처럼 아름다운 ...</li>
        <li>가만히 네 손을 잡고서</li>
        <li>눈을 마주 하고 있어</li>
    </ul>
    아래에서 더 자세히 설명합니다.
</div>