자사몰을 운영하는 MD라면 기본적인 HTML 태그를 알아두는 것이 중요합니다. 제품 상세 페이지를 효율적으로 관리하고, 필요할 때 간단한 수정 작업을 바로바로 처리할 수 있기 때문이죠. HTML은 어렵게 느껴질 수 있지만, 실제로 자주 사용하는 몇 가지 필수 태그만 알아도 큰 도움이 됩니다. 이번 아티클에서는 자사몰 MD가 꼭 알아두면 좋은 기초 HTML 필수 태그 10가지를 소개하겠습니다.

1. <h1>부터 <h6>까지 (헤딩 태그)

헤딩 태그는 페이지에서 제목이나 부제목을 나타낼 때 사용됩니다. <h1>이 가장 큰 제목을, <h6>이 가장 작은 제목을 의미하죠. 검색엔진은 <h1> 태그를 중요하게 보므로, 페이지 내에서 중요한 제목은 이 태그로 설정하는 것이 좋습니다.

<h1>상품명</h1>
<h2>상품 특징</h2>

상품명

상품 특징

2. <p> (문단 태그)

문단을 작성할 때 사용하는 태그입니다. 상품 설명, 고객 리뷰 등을 정리할 때 유용합니다. 자사몰의 상품 정보는 사용자에게 읽기 쉽게 문단으로 나눠야 하기 때문에, 이 태그는 기본 중의 기본이라 할 수 있죠.

<p>이 상품은 자연 유래 성분을 사용하여 피부 자극이 적습니다.</p>

이 상품은 자연 유래 성분을 사용하여 피부 자극이 적습니다.

3. <a> (링크 태그)

다른 페이지로 이동할 수 있는 링크를 만들 때 사용합니다. 이 태그는 제품 상세 페이지에서 다른 관련 상품을 추천하거나, 정책 페이지로 연결할 때 유용합니다.

<a href="https://yourmall.com/policy">환불 정책 보기</a>

온엠디 업무양식

4. <img> (이미지 태그)

이미지를 삽입할 때 사용하는 태그입니다. 제품 상세 페이지에서 상품 이미지나 설명 이미지를 삽입할 때 필수죠. alt 속성은 이미지가 로딩되지 않을 때 대신 표시되는 텍스트입니다.

<img src="https://yourmall.com/image.jpg" alt="상품 이미지">

5. <ul>, <ol>, <li> (리스트 태그)

상품의 특징이나 상세 설명을 나열할 때 목록 형식으로 제공하면 가독성이 훨씬 좋아집니다. <ul>은 순서가 없는 목록, <ol>은 순서가 있는 목록을 나타내며, 각 항목은 <li>로 묶습니다.

<ul>
  <li>자연 유래 성분</li>
  <li>저자극</li>
  <li>모든 피부 타입에 적합</li>
</ul>

• 자연 유래 성분
• 저자극
• 모든 피부 타입에 적합

6. <div> (구조 태그)

HTML 요소들을 그룹화할 때 사용합니다. <div>는 상품 페이지를 섹션별로 나눌 때 많이 사용되며, CSS와 함께 페이지 디자인을 더 깔끔하게 정리할 수 있습니다.

<div class="product-info">
  <h2>상품 정보</h2>
  <p>이 상품은...</p>
</div>

7. <span> (인라인 요소 태그)

텍스트의 일부만 스타일을 변경하거나, 특정 단어를 강조하고 싶을 때 사용하는 태그입니다. <div>와는 달리 인라인 요소로 텍스트와 함께 자연스럽게 배치됩니다.

<p>지금 구매하시면 <span style="color:red;">무료 배송</span> 혜택을 드립니다!</p>

지금 구매하시면 무료 배송 혜택을 드립니다!

8. <br> (줄바꿈 태그)

줄바꿈을 할 때 사용하는 태그로, 자주 쓰이진 않지만 상품 설명 중 줄을 나눌 때 유용합니다. 특히 긴 문장을 가독성 있게 표시하고 싶을 때 자주 사용됩니다.

<p>이 상품은 다음과 같은 혜택을 제공합니다:<br>무료배송<br>1년 보증 서비스</p>

이 상품은 다음과 같은 혜택을 제공합니다:
무료배송
1년 보증 서비스

9. <strong> (강조 태그)

텍스트를 강조하고 싶을 때 사용합니다. 상품의 중요한 정보나 이벤트 내용을 강조할 때 유용하며, <b> 태그와 비슷하지만 의미적으로 더 중요하게 해석됩니다.

<p><strong>50% 할인</strong> 기회를 놓치지 마세요!</p>

50% 할인 기회를 놓치지 마세요!

10. <table> (표 태그)

상품의 스펙이나 가격 비교 등을 한눈에 보여주기 위해 표를 사용할 때 유용한 태그입니다. 여러 데이터를 체계적으로 정리해 보여줄 때 꼭 필요한 태그입니다.

<table>
  <tr>
    <th>옵션</th>
    <th>가격</th>
  </tr>
  <tr>
    <td>기본형</td>
    <td>₩10,000</td>
  </tr>
  <tr>
    <td>고급형</td>
    <td>₩15,000</td>
  </tr>
</table>

오늘은 자사몰 MD가 알아두면 좋은 기초 HTML 필수 태그 10가지를 살펴보았습니다. 이러한 태그들을 잘 활용하면 간단한 상품 페이지 수정 작업을 손쉽게 처리할 수 있을 뿐만 아니라 검색엔진 최적화와 자사몰 관리에 관해 개발자와도 좀더 원할하게 잘 소통하시는 밑거름이 되실 수 있습니다 아래의 예제 파일을 다운받으시면 위에 소개한 기초 html 코드 10가지를 확인해보실 수 있습니다