기존 방식의 문제점

<div class="text-content">
    <span>Timeless Design</span>
    <h3>실내 인테리어</h3>
    <p>공간에 감성을 더하고, 삶에 아름다움을 선사하는 디자인의 새로운 기준</p>
</div>

• <h3> 앞에 <span>이 배치되면서 잘못된 헤딩 계층 구조가 발생
• <span>은 제목 역할을 하지 못하기 때문에 비의미적 마크업이 됨
• 검색 엔진(SEO) 및 웹 접근성(Accessibility) 문제 발생 가능

---

해결 방법 1: 올바른 헤딩 구조 적용

서브 타이틀을 <h4>로 설정하고, 스타일로 크기 조정

HTML

<div class="text-content">
    <h4>Timeless Design</h4>
    <h3>실내 인테리어</h3>
    <p>공간에 감성을 더하고, 삶에 아름다움을 선사하는 디자인의 새로운 기준</p>
</div>
<style>
h4 {
    font-size: 1.2em; /* 작은 제목 크기 */
    font-weight: normal; /* 강조 효과 줄이기 */
    text-align: center; /* 가운데 정렬 (선택 사항) */
    margin-bottom: 5px; /* 제목과의 간격 */
}
</style>

장점:

• 논리적인 문서 구조 유지
• HTML의 의미론적 태그 사용 → SEO와 웹 접근성 개선
• 스타일을 통해 <h4>를 서브 타이틀처럼 작은 폰트로 표현 가능

---

해결 방법 2: Flexbox를 활용한 순서 조정

HTML 순서는 유지하고, CSS를 사용해 서브 타이틀을 먼저 보이게 설정

<div class="text-content">
    <h3>실내 인테리어</h3>
    <span>Timeless Design</span>
    <p>공간에 감성을 더하고, 삶에 아름다움을 선사하는 디자인의 새로운 기준</p>
</div>
<style>
.text-content {
    display: flex;
    flex-direction: column;
}
span {
    order: -1; /* 가장 먼저 배치 */
    font-size: 1.2em;
    font-weight: bold;
    text-align: center;
}
p, h3 {
    order: 1; /* 나중에 배치 */
}
</style>

장점:

• HTML 구조를 변경하지 않고 순서만 조정 가능
• SEO 영향 없이 화면에서만 순서 변경
• 유지보수 용이

---

결론

• 서브 타이틀이 제목보다 먼저 보여야 할 경우, <h4> 태그를 사용하고 스타일을 조정하는 것이 가장 좋은 방법
• <span>을 사용해야 한다면 Flexbox를 활용해 순서를 조정하는 것이 최선
• SEO와 접근성을 고려하면 <h4> 방식이 더 적절