태그를 알면 블록이 보입니다 - 크리에이티브밴드

워드프레스 블록 에디터는 직관적이고 시각적인 콘텐츠 작성 도구입니다. 제목도, 이미지도, 인용문도 버튼만 누르면 추가할 수 있죠. 하지만 그 블록들이 결국 HTML 태그로 구성되어 있다는 걸 알면, 블록을 더 유연하고 의도에 맞게 다룰 수 있습니다. 뿐만 아니라 의미에 맞는 태그를 사용하는 것이 중요합니다.

시맨틱 웹이란?

‘시맨틱 웹(Semantic Web)’은 단순히 텍스트를 보여주는 웹이 아니라, 웹 콘텐츠의 의미를 기계가 이해할 수 있도록 만드는 웹을 말합니다.

사람은 “이건 제목 같네”, “여긴 인용이네”를 눈으로 보고 파악할 수 있지만, 검색엔진이나 스크린 리더는 HTML 구조를 바탕으로 콘텐츠의 의미를 판단합니다. 그래서 의미에 맞는 HTML 태그를 써야 하고, 워드프레스에서는 그 역할을 올바른 블록 사용으로 대체하는 겁니다.

왜 ‘보는 대로 만들면’ 안 되는가?

예를 들어, 어떤 사용자가 강조하고 싶은 문장을 Blockquote 블록으로 만들었다고 해보죠.

<blockquote>회사 소개</blockquote>

겉으로 보기엔 크고 강조된 글씨일 수 있지만, HTML 상으로는 “이 문장은 어딘가에서 인용된 말”로 인식됩니다.
검색엔진은 이걸 ‘회사 소개’라는 섹션 제목이 아니라, 외부 출처의 인용문으로 받아들입니다. SEO 관점에서도, 접근성 측면에서도 잘못된 사용입니다.

<h2>회사 소개</h2>

‘회사 소개’는 페이지의 한 섹션을 구분하는 제목이니까요.

블록은 디자인이 아니라 ‘의미’로 선택해야 합니다

아래는 몇 가지 자주 혼동되는 블록과 그 올바른 사용 예시입니다:

사용 목적	올바른 블록	대응 HTML 태그
섹션 제목	제목(Heading) 블록	<h2>, <h3>
인용문	인용문(Blockquote) 블록	<blockquote>
강조된 단락	단락(Paragraph) + 굵게	<p><strong>…</strong></p>
버튼	버튼(Button) 블록	<a> with class
목록 나열	목록(List) 블록	<ul>, <ol>, <li>

👉 디자인이 아니라 의미로 블록을 고르는 습관, 이게 콘텐츠 퍼블리싱의 핵심입니다.

시맨틱하게 만들면 뭐가 좋은가요?

검색엔진 최적화(SEO)
제목은 제목 태그로, 인용은 인용 태그로 써야 검색엔진이 콘텐츠를 정확히 이해합니다.
접근성(Accessibility)
시각장애인을 위한 스크린 리더는 제목, 버튼, 인용문 등을 HTML 태그 기반으로 인식합니다.
유지보수 용이성
코드가 구조적으로 잘 짜여 있으면 디자인 변경이나 기능 추가가 쉬워집니다.
신뢰도 있는 콘텐츠 구조
의미에 맞게 콘텐츠를 구성하면, 보는 사람도 ‘전문적으로 보인다’고 느낍니다.

마무리하며

워드프레스 블록 에디터는 콘텐츠를 빠르게 만들 수 있는 훌륭한 도구입니다. 하지만 빠르다고 해서 의미까지 생략하면 안 됩니다.

블록은 ‘디자인 도구’가 아니라 ‘콘텐츠 구조 도구’입니다.
Blockquote는 인용을 위한 것이고, 제목은 Heading으로, 링크는 a 태그로 만들어야 합니다.
그게 시맨틱 웹을 따르는 콘텐츠 퍼블리싱이고, 웹을 쓰는 모두에게 더 나은 경험을 제공합니다.

이제는 단순히 콘텐츠를 쓰는 걸 넘어서, 의미 있게 구성하는 퍼블리셔로 한 걸음 더 나아가보세요.