제수기 - 제발 수업내용을 기억해라

Semantic Tags

원래 했던 방식

원래는 이렇게 했었는데 시각장애인들이 스크린리더를 쓰면 div의 id를 읽어내지를 못한다. 그래서 html5에서는 Semantic Tags를 적용했다.

Semantic Tags

semantic tag란

• 의미가 부여된 태그. 태그의 의미와 작성될 내용을 매칭해야 한다.
• 페이지 레이아웃과 관련된 semantic tag 제공
• 웹접근성 향상

<header>

• 헤더내용
• 웹페이지 전체의 헤더 또는 article의 헤더일수 있음.

<nav>

• 네비게이션 내용
• 메뉴, 사이트맵
• header/aside/footer하위에 위치하거나, 단독으로 사용가능

<main>

• 한페이지의 주요컨텐츠영역
• 페이지당 하나만 존재해야 함.
• 모든 페이지의 공통부분은 제외할 것

<article>

• 실제내용(독립적)
• 하위에 header/footer 가질수 있음.

<section>

• 의미적으로 그룹핑 가능한 영역
• div의 css효과등을 위한 그룹핑과는 대비됨.

<aside>

• 부가적인 내용
• 광고/날씨/달력

<footer>

• 페이지 푸터내용
• 저작권/사이트맵

---

웹사이트 예시

다음

네이버

• semantic tag 대신 role을 썼다.