빠른 참조

Microformats 치트시트

클래식 Microformats에 대한 빠른 참조 가이드: h-card 작성자 세부정보, h-entry 블로그 게시물, 타임스탬프 및 시맨틱 HTML 마크업.

· 게시일

Microformats는 표준 HTML 클래스 이름을 사용하여 연락처, 이벤트, 기사 등의 시맨틱 데이터 엔터티를 구조화하는 마크업 규칙입니다.

작성자 및 인물 정보 (h-card / vcard)

<div class="h-card vcard">
  <img class="u-photo photo" src="https://example.com/avatar.jpg" alt="Alice Smith" />
  <a class="p-name fn u-url url" href="https://example.com">Alice Smith</a>
  <span class="p-org org">Acme Corp</span>
  <span class="p-job-title title">Lead Architect</span>
  <a class="u-email email" href="mailto:[email protected]">[email protected]</a>
</div>

블로그 게시물 (h-entry)

<article class="h-entry">
  <h1 class="p-name">탄력적인 분산 시스템 구축하기</h1>
  <time class="dt-published" datetime="2026-11-08T10:00:00Z">2026년 11월 8일</time>
  <div class="e-content">
    <p>본문 내용이 여기에 들어갑니다...</p>
  </div>
  <p>작성자: <a class="p-author h-card" href="https://example.com">Alice Smith</a></p>
</article>

관련 참고 자료

관련 주제