HTML 시맨틱 태그, 부가 정보의 aside와 하단 영역의 footer 태그

HTML 시맨틱 태그 시리즈도 이제 끝을 향해 달려가고 있다.

오늘은 웹사이트의 구조를 더욱 풍성하게 만들어주는 부가 정보 영역의 aside 태그, 그리고 사이트의 신뢰도를 결정짓는 하단 영역의 footer 태그에 대해 다뤄보도록 하겠다.

이전 포스트

HTML 시맨틱 태그: header와 nav 태그, 메뉴가 여러 개라면 aria-label은 필수!

HTML 시맨틱 태그 중 상단 영역을 정의하는 header 태그와 메뉴를 담당하는 nav 태그의 포함 관계를 알아봅니다. 특히 페이지 내에 nav 태그를 여러 개 사용할 때 SEO와 웹 접근성을 높여주는 aria-label 활용 꿀팁을 실제 사례와 함께 정리했습니다.

aside 태그

먼저 <aside> 태그에 대해서 정리하겠다.

aside 태그는 광고처럼 메인 콘텐츠와 직접적인 관계가 적거나, 이를 보조하는 부가 정보가 들어간다.

대표적으로 추천 or 랜덤 포스트 목록, 카테고리 리스트, 태그 클라우드, 프로필 요약 등이 여기에 포함된다.

<aside>에는 본문의 핵심 내용을 담아서는 안 된다.

<aside>를 삭제해도 본문을 이해하는 데 지장이 없어야 한다.

이번에도 이 블로그에 적용되어 있는 템플릿(스킨)에서 aside 태그가 어디에 사용되고 있는지 확인해서 보여주려고 했는데, 문제가 있다.

당연히 aside 태그를 사용하고 있을 거라고 생각했던 사이드바^Sidebar에 아무 의미 없는 div 태그를 사용하고 있었던 것이다.

보통은 이런 사이드바에 <aside>를 사용한다.

흔히 웹사이트의 사이드바를 만들 때 <aside>를 사용하지만, 반드시 옆에 있을 필요는 없다.

하지만 이 블로그에서는 그 어느 곳에도 <aside>가 없었다.

다음 포스트는 아마도 이 문제를 수정하는 내용을 올릴 것 같다.

이제 <footer> 태그에 대해서 설명하겠다.

footer 태그

<footer> 태그는 웹사이트 전체의 끝부분에 위치한다.

저작권 정보(Copyright), 회사 정보, 연락처, 사이트 맵, 이용약관 링크 등이 들어간다.

<header>와 마찬가지로 페이지 하단뿐만 아니라, <article>의 내부에서도 사용될 수 있다.

<article> 내부에 쓰일 때는 작성자 정보, 발행일, 태그 등을 담는 용도로 사용된다.

<footer> 안에 연락처 정보가 들어갈 때는 <address> 태그를 함께 사용하면 더욱 완벽해진다.

다행히 footer 태그는 제대로 사용되고 있었다.

화살표와 하늘색 선으로 표시해 놓은 부분이 <footer>로 감싸여있는 부분이다.

이 이미지는 개발자 도구를 열어서 캡처하지는 않았지만, 위에서 먼저 캡처했던 이미지의 개발자 도구를 보면 사이드바 아래쪽에 <footer>가 보일 것이다.

다음 포스트

HTML 시맨틱 태그, 시간 데이터를 표준화하는 time 태그와 datetime 속성

HTML 시맨틱 태그, 날짜와 시간을 기계가 읽을 수 있도록 정의하는 time 태그 활용 가이드입니다. datetime 속성에 사용하는 ISO 8601 표준 형식과 타임존의 의미를 풀이하고, 구글 블로그에 적용된 실전 사례를 통해 SEO 최적화 방법을 소개합니다.

이 글이 도움이 됐거나 유익했다면 스크롤을 조금만 더 내려서 댓글을 남겨주세요. (비로그인도 가능합니다!)
응원이나 피드백이 담긴 댓글은 제가 계속 블로그를 해나갈 수 있는 원동력이 됩니다. 😊

지인에게 보여주고 싶은 글이었다면 URL을 복사해서 메신저나 소셜 미디어에 공유해 주세요.