프론트엔드 개발 실무/HTML5 강의 & 실전

HTML 시맨틱 태그 완전 정복 - 접근성과 구조화의 시작 ②

free21 2025. 5. 15. 14:39

<header>, <nav>, <main>, <section>, <article>, <aside>, <footer> 설명
각 태그가 문서 구조에서 어떤 역할을 하는지 예제 포함
HTML5 문서 구조 예시 작성
잘못된 사용 사례와 올바른 사용법

2. 기본 시맨틱 태그 종류와 역할

1) <header>

역할: 문서 또는 섹션의 머리말 영역을 나타냅니다. 보통 사이트 로고, 제목, 주요 네비게이션 링크가 포함됩니다.
특징: 페이지 내 여러 개 사용할 수 있으며, 각 섹션마다 별도의 <header>가 존재할 수 있습니다.

<header>
  <h1>웹사이트 제목</h1>
  <nav>
    <ul>
      <li><a href="#home">홈</a></li>
      <li><a href="#about">소개</a></li>
    </ul>
  </nav>
</header>

2) <nav>

역할: 주요 네비게이션 메뉴를 담는 영역입니다.
특징: 사이트 내 주요 이동 경로를 나타내며, 페이지 내 여러 개 존재 가능하지만 보통 한두 개가 적절합니다.

<nav>
  <ul>
    <li><a href="#section1">섹션1</a></li>
    <li><a href="#section2">섹션2</a></li>
  </ul>
</nav>

3) <main>

역할: 문서 내 주요 콘텐츠 영역을 나타냅니다.
특징: 페이지 당 한 개만 허용하며, 헤더, 네비게이션, 푸터 등과 구분됩니다.

<main>
  <article>
    <h2>주요 기사 제목</h2>
    <p>본문 내용</p>
  </article>
  <aside>
    <h3>관련 정보</h3>
    <p>추가 참고 자료</p>
  </aside>
</main>

4) <section>

역할: 문서 내 의미 있는 구획을 나타냅니다. 주로 제목과 함께 사용하여 논리적 구분을 제공합니다.
특징: 콘텐츠를 구분짓는 용도로 사용하며, 여러 개 존재할 수 있습니다.

<section>
  <h2>서비스 소개</h2>
  <p>서비스 상세 설명</p>
</section>

<section>
  <h2>고객 후기</h2>
  <p>후기 내용</p>
</section>

5) <article>

역할: 독립적이고 재사용 가능한 콘텐츠 단위(예: 블로그 글, 뉴스 기사 등)를 나타냅니다.
특징: 독립적 의미를 가지므로 외부로도 분리될 수 있습니다.

<article>
  <h2>블로그 글 제목</h2>
  <p>본문 내용</p>
</article>

6) <aside>

역할: 주요 콘텐츠와 간접적으로 관련된 보조 콘텐츠(광고, 사이드바, 관련 링크 등)를 나타냅니다.
특징: 문서 흐름에서 벗어난 보조 정보 영역입니다.

<aside>
  <h3>추천 글</h3>
  <ul>
    <li><a href="#">관련 글1</a></li>
    <li><a href="#">관련 글2</a></li>
  </ul>
</aside>

7) <footer>

역할: 문서나 섹션의 꼬리말 영역으로 저작권 정보, 연락처, 링크 등이 포함됩니다.
특징: 여러 개 존재 가능하며, 각 섹션마다 별도 <footer> 존재 가능

<footer>
  <p>© 2025 회사명. 모든 권리 보유.</p>
  <nav>
    <ul>
      <li><a href="#privacy">개인정보처리방침</a></li>
      <li><a href="#terms">이용약관</a></li>
    </ul>
  </nav>
</footer>

전체 문서 구조 예시

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8" />
  <title>시맨틱 태그 예시</title>
</head>
<body>

  <header>
    <h1>웹사이트 제목</h1>
    <nav>
      <ul>
        <li><a href="#main">메인으로</a></li>
        <li><a href="#services">서비스</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <section id="services">
      <h2>서비스 소개</h2>
      <article>
        <h3>서비스 1</h3>
        <p>서비스 1에 대한 상세 설명</p>
      </article>
      <article>
        <h3>서비스 2</h3>
        <p>서비스 2에 대한 상세 설명</p>
      </article>
    </section>

    <aside>
      <h2>공지사항</h2>
      <p>최근 업데이트 내용</p>
    </aside>
  </main>

  <footer>
    <p>© 2025 회사명. 모든 권리 보유.</p>
  </footer>

</body>
</html>

1) <header> 추가 예제

사이트 헤더 + 검색창 포함

<header>
  <h1>내 블로그</h1>
  <nav>
    <ul>
      <li><a href="/">홈</a></li>
      <li><a href="/about">소개</a></li>
      <li><a href="/contact">연락처</a></li>
    </ul>
  </nav>
  <form action="/search" method="get">
    <label for="search-input" class="sr-only">검색어 입력</label>
    <input type="search" id="search-input" name="q" placeholder="검색어 입력">
    <button type="submit">검색</button>
  </form>
</header>

2) <nav> 추가 예제

다단계 드롭다운 네비게이션

<nav>
  <ul>
    <li><a href="/">홈</a></li>
    <li>
      <a href="/services">서비스</a>
      <ul>
        <li><a href="/services/design">디자인</a></li>
        <li><a href="/services/development">개발</a></li>
      </ul>
    </li>
    <li><a href="/contact">연락처</a></li>
  </ul>
</nav>

3) <main> 추가 예제

블로그 글과 사이드바 분리

<main>
  <article>
    <h2>최신 블로그 글 제목</h2>
    <p>블로그 글 내용...</p>
  </article>
  <aside>
    <h3>인기 글</h3>
    <ul>
      <li><a href="#">인기 글 1</a></li>
      <li><a href="#">인기 글 2</a></li>
    </ul>
  </aside>
</main>

4) <section> 추가 예제

FAQ 페이지의 구분된 질문 영역

<section>
  <h2>자주 묻는 질문 (FAQ)</h2>
  <article>
    <h3>배송 기간은 얼마나 걸리나요?</h3>
    <p>주문 후 3~5일 내 배송됩니다.</p>
  </article>
  <article>
    <h3>반품 정책은 어떻게 되나요?</h3>
    <p>상품 수령 후 7일 이내 반품 가능합니다.</p>
  </article>
</section>

5) <article> 추가 예제

뉴스 기사 단독 페이지

<article>
  <header>
    <h1>오늘의 뉴스 제목</h1>
    <p><time datetime="2025-05-15">2025년 5월 15일</time> 작성자: 기자명</p>
  </header>
  <p>뉴스 본문 내용...</p>
  <footer>
    <p>출처: 뉴스사</p>
  </footer>
</article>

페이지 내 광고 배너

<aside>
  <h2>광고</h2>
  <a href="https://example.com/promo">
    <img src="banner.jpg" alt="프로모션 배너">
  </a>
</aside>

7) <footer> 추가 예제

사이트 전체 푸터 + 소셜 미디어 링크

<footer>
  <p>© 2025 내회사. 모든 권리 보유.</p>
  <nav>
    <ul>
      <li><a href="/privacy">개인정보처리방침</a></li>
      <li><a href="/terms">이용약관</a></li>
      <li><a href="https://twitter.com/내회사" target="_blank" rel="noopener">트위터</a></li>
      <li><a href="https://facebook.com/내회사" target="_blank" rel="noopener">페이스북</a></li>
    </ul>
  </nav>
</footer>

기본외 시멘틱 태그’s

<figure>: 이미지, 도표, 코드 블록 등 독립적인 콘텐츠 묶음
<figcaption>: <figure>의 캡션(설명)
<mark>: 강조 표시 (하이라이트)
<time>: 날짜나 시간을 나타냄
<details>: 추가 정보를 보여주는 접기/펼치기 컨텐츠
<summary>: <details>의 요약 제목
<address>: 연락처 정보, 저자 정보
<dialog>: 대화 상자, 모달 창
<main>: 앞서 설명한 페이지 주 콘텐츠
<output>: 계산 결과 등 동적 출력
<progress>: 진행 상태 표시
<section>, <article>, <nav>, <header>, <footer>, <aside> 외에도 다양한 역할 기반 태그가 존재합니다.

1) <figure> & <figcaption>

역할: 이미지, 도표, 코드 등 독립적인 콘텐츠 묶음과 그에 대한 설명
예제:

<figure>
  <img src="chart.png" alt="매출 그래프">
  <figcaption>2025년 1분기 매출 추이</figcaption>
</figure>

2) <mark>

역할: 텍스트 내 강조(하이라이트) 표시
예제:

<p>이 제품은 <mark>한정 수량</mark>으로 판매됩니다.</p>

3) <time>

역할: 날짜 또는 시간 데이터 표시 (기계가 인식 가능하도록 datetime 속성 사용)
예제:

<p>작성일: <time datetime="2025-05-15">2025년 5월 15일</time></p>

4) <details> & <summary>

역할: 접기/펼치기 가능한 상세 정보
예제:

<details>
  <summary>자주 묻는 질문 보기</summary>
  <p>질문에 대한 답변 내용이 여기에 표시됩니다.</p>
</details>

5) <address>

역할: 연락처 또는 작성자 정보
예제:

<address>
  작성자: 홍길동<br>
  이메일: hong@example.com<br>
  전화: 010-1234-5678
</address>

6) <dialog>

역할: 대화 상자, 모달 창(브라우저 지원 상태 확인 필요)
예제:

<dialog open>
  <p>안내 메시지입니다.</p>
  <button onclick="this.parentElement.close()">닫기</button>
</dialog>

7) <output>

역할: 사용자 입력에 따른 결과 출력
예제:

<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
  <input type="range" id="a" value="50"> +
  <input type="number" id="b" value="50"> =
  <output name="result" for="a b">100</output>
</form>

8) <progress>

역할: 작업 진행 상태 표시
예제:

<label for="file">업로드 진행률:</label>
<progress id="file" value="70" max="100">70%</progress>

HTML5 시맨틱 태그 완전 정복

1. <header>

역할: 문서 또는 섹션의 머리말 영역. 제목, 네비게이션, 로고 등 포함.
예제:

<header>
  <h1>내 블로그</h1>
  <nav aria-label="주요 메뉴">
    <ul>
      <li><a href="/">홈</a></li>
      <li><a href="/about">소개</a></li>
      <li><a href="/contact">연락처</a></li>
    </ul>
  </nav>
</header>

접근성 팁: nav에 aria-label로 메뉴 명시.

2. <nav>

역할: 페이지 내 주요 네비게이션 영역.
예제:

<nav aria-label="주 메뉴">
  <ul>
    <li><a href="/">홈</a></li>
    <li><a href="/services">서비스</a></li>
    <li><a href="/contact">문의</a></li>
  </ul>
</nav>

접근성 팁: 네비게이션이 여러개일 경우 aria-label로 구분 필요.

3. <main>

역할: 페이지 내 핵심 콘텐츠 영역. 한 페이지당 하나만 사용.
예제:

<main>
  <article>
    <h2>블로그 글 제목</h2>
    <p>내용...</p>
  </article>
</main>

접근성 팁: main은 스크린리더가 빠르게 주요 내용으로 이동 가능.

4. <section>

역할: 주제별 구획 구분. 제목이 있어야 함.
예제:

<section>
  <h2>자주 묻는 질문</h2>
  <p>질문과 답변...</p>
</section>

5. <article>

역할: 독립적으로 배포 가능하거나 재사용 가능한 콘텐츠 단위.
예제:

<article>
  <header>
    <h1>뉴스 제목</h1>
    <time datetime="2025-05-15">2025년 5월 15일</time>
  </header>
  <p>본문...</p>
  <footer>작성자: 홍길동</footer>
</article>

6. <aside>

역할: 본문과 간접적으로 관련된 보조 콘텐츠.
예제:

<aside>
  <h3>관련 글</h3>
  <ul>
    <li><a href="#">글1</a></li>
    <li><a href="#">글2</a></li>
  </ul>
</aside>

7. <footer>

예제:

<footer>
  <p>© 2025 내사이트</p>
  <nav aria-label="푸터 메뉴">
    <ul>
      <li><a href="/privacy">개인정보처리방침</a></li>
      <li><a href="/terms">이용약관</a></li>
    </ul>
  </nav>
</footer>

8. <figure> & <figcaption>

역할: 이미지, 도표, 코드 등 독립된 미디어 + 설명
예제:

<figure>
  <img src="chart.png" alt="매출 그래프">
  <figcaption>2025년 1분기 매출 추이</figcaption>
</figure>

9. <mark>

역할: 텍스트 강조(하이라이트)
예제:

<p>이 제품은 <mark>한정 수량</mark>입니다.</p>

10. <time>

역할: 날짜/시간 표시, 기계 판독 가능하도록 datetime 속성 포함
예제:

<p>작성일: <time datetime="2025-05-15">2025년 5월 15일</time></p>

11. <details> & <summary>

역할: 접기/펼치기 UI
예제:

<details>
  <summary>자주 묻는 질문 보기</summary>
  <p>답변 내용...</p>
</details>

12. <address>

역할: 작성자나 연락처 정보
예제:

<address>
  작성자: 홍길동<br>
  이메일: hong@example.com<br>
  전화: 010-1234-5678
</address>

13. <dialog>

역할: 대화 상자, 모달 (브라우저 지원 확인 필요)
예제:

<dialog open>
  <p>안내 메시지입니다.</p>
  <button onclick="this.parentElement.close()">닫기</button>
</dialog>

14. <output>

역할: 계산 결과나 사용자 입력 결과 출력
예제:

<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
  <input type="range" id="a" value="50"> +
  <input type="number" id="b" value="50"> =
  <output name="result" for="a b">100</output>
</form>

15. <progress>

역할: 작업 진행 상태 표시
예제:

<label for="upload">업로드 진행률:</label>
<progress id="upload" value="70" max="100">70%</progress>

ARIA 속성과 시맨틱 태그 결합 활용

role: 시맨틱 태그가 없는 요소에 의미 부여
aria-label, aria-labelledby, aria-describedby: 접근성 설명 제공
예시:

<nav aria-label="보조 메뉴">
  ...
</nav>

<button aria-haspopup="dialog" aria-controls="dialog1">열기</button>
<dialog id="dialog1">...</dialog>

요약

시맨틱 태그는 문서 구조와 의미를 명확히 하여 SEO와 접근성을 높임
다양한 시맨틱 태그를 목적에 맞게 활용하는 것이 중요
ARIA 속성과 병행하면 장애인 접근성을 더욱 향상 가능

저작자표시 비영리 변경금지 (새창열림)

'프론트엔드 개발 실무 > HTML5 강의 & 실전' 카테고리의 다른 글

[HTML5 시맨틱태그 완전정복]⑤ 미디어 및 멀티미디어 시맨틱 태그 완벽 가이드 (0)	2025.05.17
[HTML5 시맨틱태그 완전정복]④ 텍스트 및 콘텐츠 관련 시맨틱 태그 가이드 (0)	2025.05.17
[HTML5 시맨틱태그 완전정복]③ 시맨틱 태그의 구조적 역활 (0)	2025.05.17
[HTML5 시맨틱태그 완전정복]② 기본 시맨틱 태그 종류와 역할 (0)	2025.05.17
[HTML5 시맨틱태그 완전정복]① 시리즈 소개 및 시맨틱 태그 개념 (2)	2025.05.17

현재글HTML 시맨틱 태그 완전 정복 - 접근성과 구조화의 시작 ②

pageservice.tistory.com

HTML 시맨틱 태그 완전 정복 - 접근성과 구조화의 시작 ②

2. 기본 시맨틱 태그 종류와 역할

1) <header>

2) <nav>

3) <main>

4) <section>

5) <article>

6) <aside>

7) <footer>

전체 문서 구조 예시

1) <header> 추가 예제

2) <nav> 추가 예제

3) <main> 추가 예제

4) <section> 추가 예제

5) <article> 추가 예제

7) <footer> 추가 예제

기본외 시멘틱 태그’s

1) <figure> & <figcaption>

2) <mark>

3) <time>

4) <details> & <summary>

5) <address>

6) <dialog>

7) <output>

8) <progress>

HTML5 시맨틱 태그 완전 정복

1. <header>

2. <nav>

3. <main>

4. <section>

5. <article>

6. <aside>

7. <footer>

8. <figure> & <figcaption>

9. <mark>

10. <time>

11. <details> & <summary>

12. <address>

13. <dialog>

14. <output>

15. <progress>

ARIA 속성과 시맨틱 태그 결합 활용

요약

'프론트엔드 개발 실무 > HTML5 강의 & 실전' 카테고리의 다른 글

'프론트엔드 개발 실무/HTML5 강의 & 실전'의 다른글

관련글

티스토리툴바