HTML5에서 금액·가격을 표시하는 올바른 방법
웹 페이지에서 제품 가격이나 금액을 표시할 때는 단순히 텍스트로 나열하는 것보다 시맨틱(Semantic)한 마크업을 활용하는 것이 좋습니다. 이렇게 하면 검색 엔진 최적화(SEO)와 화면 낭독기 등 접근성 측면에서도 유리합니다. 상황에 맞게 아래 방법들을 활용해 보세요.
1. 마이크로데이터(Microdata)로 제품 가격 표시하기
쇼핑몰이나 제품 소개 페이지라면 schema.org에서 제공하는 마이크로데이터를 사용하는 것이 가장 권장됩니다. itemprop="price"와 itemprop="priceCurrency" 같은 속성을 함께 지정하면 구글 등 검색 엔진이 가격 정보를 정확하게 인식하여 리치 스니펫(가격, 리뷰 별점 등)으로 노출시킬 수 있습니다.
2. <strong> 요소로 가격 강조하기
가격이 문서 내에서 중요한 의미를 갖는다면 <strong> 요소를 사용하세요. 이 태그는 단순히 굵게 보이는 것을 넘어 '중요성'이라는 의미를 브라우저와 스크린 리더에 전달합니다.
3. 클래스를 지정한 <span> 요소로 스타일링하기
디자인상 가격을 다른 텍스트와 구분해서 표현하고 싶다면 <span> 요소에 클래스를 부여하는 방법이 유연합니다. 예를 들어 <span class="price">19,900원</span>처럼 작성한 뒤 CSS로 색상, 크기, 서체를 자유롭게 조절할 수 있습니다.
4. <b> 요소로 시각적 강조하기
특별한 의미 전달보다는 단순히 눈에 띄게 표현하는 목적이라면 <b>(bold) 요소를 사용할 수 있습니다. 다만 의미론적인 강조가 필요하다면 <strong>을 사용하는 것이 바람직합니다.
표(Table)에서 급여·주가 표시하기
직원 급여나 주가처럼 여러 데이터를 표 형태로 나타낼 때는 반드시 해당 열의 제목을 지정해 주어야 합니다. 이때 scope 속성을 함께 사용하면 열 제목임을 명확히 알려 접근성이 향상됩니다.
<th scope="col">Salary</th>위와 같이 작성하면 화면 낭독기를 사용하는 사용자도 각 수치가 '급여' 열에 속한 값임을 정확히 인식할 수 있습니다.
정리
검색 엔진에 가격 정보를 알리고 싶다면 마이크로데이터, 의미 있는 강조에는 <strong>, 디자인 커스터마이징에는 <span>, 단순한 시각적 강조에는 <b>를 사용하는 것이 적합합니다. 표에서 금액을 다룰 때는 <th scope="col"></th>로 열 제목을 명시하는 것도 잊지 마세요.