[HTML] Semantic Tag

pds·2023년 4월 6일
0

TIL

목록 보기
47/60
post-thumbnail

시맨틱 태그란

Semantic은 '의미의', '의미론적인'이라는 뜻을 가진 형용사이다. 따라서 시맨틱 태그란 의미가 있는 태그를 말한다.

div span같이 의미가 없는 태그는 태그 이름만 보고 어떤 내용인지 유추할 수 없다.

form table article 등 의미가 있는 태그는 내용을 명확하게 정의한다.

Semantic HTML을 사용한다는 것은 웹 페이지의 구조와 컨텐츠를 더욱 명확하게 표시한다는 것을 의미한다.

종류

header

웹 페이지 상단 페이지 제목 같은 소개 내용을 포함한다.

로고, 아이콘, 저작권 정보 등의 정보를 포함한다.

nav

메뉴나 목차에 사용한다.

aside

사이드바 같은 간접적인 문서와 관련된 내용을 나타낼 때 사용한다.

section

컨텐츠를 구분하는 영역으로, 블로그 포스트, 뉴스 기사 등의 본문을 감싸는 영역으로 사용된다.

article

독립적으로 구성되는 컨텐츠의 단위로
뉴스 기사, 블로그 포스트, 제품 리뷰 등과 같이 독립적으로 사용할 수 있는 컨텐츠를 감싸는 영역으로 사용된다.

footer

저작권 데이터 또는 링크 등의 정보를 포함한다.

figure

이미지 동영상 그래프 같은 멀티미디어 컨텐츠를 감싸는 태그다.

h1~h6

제목 태그로, h1부터 h6까지 순서대로 사용되며 h1이 가장 중요한 제목이다.

em,strong

강조할 텍스트


왜 사용할까

검색엔진최적화

검색엔진이 태그를 기반으로 콘텐츠와 구조를 파악하고 페이지 내 검색 키워드 우선순위를 판단하기 때문에

노출되어야 하는 항목에 알맞는 시맨틱 태그를 사용하는 것이 중요하다.

웹 접근성

인터넷을 사용하는 모든 사용자들이 웹 콘텐츠와 기능에 동등하게 접근할 수 있도록 보장하는 것을 말합니다. 즉, 장애가 있는 사람, 고령자, 임산부, 언어 및 문화적 차이 등 모든 사용자들이 인터넷에서 제공되는 정보와 서비스를 이용할 수 있도록 설계되어야 합니다.

웹 접근성을 향상시킨다.

시각적으로 표현되는 부분뿐만 아니라 웹페이지의 구조와 콘텐츠를 화면 낭독기와 같은 보조 기술을 이용하는 사용자들이 이해하기 쉬워지기 때문이다.

시멘틱 태그를 정할 때

  • 페이지 각 섹션을 논리적인 단위로 나누어 생각하고 어떤 컨텐츠가 들어갈지, 해당 컨텐츠가 어떤 역할을 하는지 생각하기

  • 사용할 태그는 스타일 기반이 아닌 채워질 데이터를 기반으로 결정할 것

  • 같은 유형의 콘텐츠는 같은 시맨틱 태그를 사용하도록 하여 페이지 전체에서 일관성을 유지하기


반성해야할 듯

시맨틱 태그라는 것이 있는지만 알았지

사실 늘 div나 p부터 때려박고 시작하거나 스타일이 같으면 제목이어도 p태그를 사용하는 등의 행위를 했었다.

어쩐지 CSS프레임워크 쓰다보면 저런 다양한 태그들로 UI들을 구성했었는데 다 이유가 있는 것 같다.

lighthouse , 크롬 개발자도구 검사 등 다양한 방법으로 시멘틱 태그를 포함한 웹 접근성 검사를 할 수 있는데

이런 것들을 사용해보며 파악해보는 시간을 가져야할 것 같다.

더 쉽게 배울 수 있는건 이미 널리 많이 사용되고있는 웹사이트들의 태그를 분석해보는 것일 것 같다.

블로그라던가 대형 웹사이트들이 얼마나 시멘틱태그를 많이 쓰고 어디에 사용하는지 파악해봐야겠다.

시멘틱 태그도 그렇다 치고 웹 접근성에 대해 공부해보고자 나중에 써볼만한 라이브러리도 알아보았다.


a11y를 활용할 수 있는 것 같다.

근데 이미 eslint-plugin-jsx-a11y는 지금 하고 있는 토이프로젝트에 쓰고있는데 시맨틱 태그 체크는 안해주는 것 같다. (a태그에 링크 비워둔다거나 하면 뭐라고 한다. 전반적인 웹 접근성에 대한 체크를 해주는 것 같다)


이전에 스토리북 구경하려고 Grommet이라는 리액트 UI 라이브러리에 별누르고 몇 번 본 적이 있는데 storybookrtl에서 접근성 테스트를 하고 있었다.


@storybook/a11y

이런식으로 특정 항목의 웹 접근성에 대해 검사해주는데 landmark 항목들이 시멘틱 태그를 적절히 사용했는지에 대한 검사라고 한다.

적절한 시맨틱 태그를 사용하여 페이지의 컨텐츠를 올바르게 그룹화하고 레이아웃을 정의하여 웹 페이지의 전반적인 구조를 명확하게 만들기 위한 것

이거 꼭 토이 프로젝트에 넣어봐야겠다.

삽질하는 시간이나 완성하는 시간은 오래걸리겠지만 그래서 토이 다.

적용해보고 실패하는 많은 검사들을 통해 배울 것들이 많을 것 같다.

jest-axe

Jest와 함께 사용할 수 있는 웹 접근성 테스트 라이브러리

해당 라이브러리에서는 이런식으로 컴포넌트에 대해 jest에서도 접근성 테스트를 한다.

이거 시멘틱 태그 사용 여부도 검사할 수 있는지 너무 궁금해서 직접 사용해보았다.

yarn add -D jest-axe @types/jest-axe
import React from 'react';

const Hello = () => (
  <section>
    <header>Hello 페이지다.</header>
    <h1>글의 제목이다.</h1>
    <article>
      근데이게 될까?
    </article>
  </section>
);

export default Hello;

뭔가 시멘틱 태그를 넣어서 통과한 것 처럼 보이는데 전부 div로 바꾸고 마구 복붙하고 무지성으로 시멘틱태그들을 아무곳에나 넣어도 테스트가 통과한다.

inputlabel없이 사용한다던가 했을 때 테스트가 실패했다. 아무래도 컴포넌트 하나 단위에 대해 테스트를 하는 것이다보니 있어야 하는지 알 수 없지 않을까 생각한다.


lighthouse도 그렇고 이것저것 문서도 보고 공부하며 어떤걸 왜 적용해서 무엇을 얻을 수 있는지 알아봐야지 사용해볼 수 있을 것 같다.

아직 성능이나 웹 접근성 같은 것들은 너무 어렵게 느껴지는데 꾸준히 공부하고 사용하면서 부딪혀보는 것 밖에 방법이 없는 것 같다


References

profile
강해지고 싶은 주니어 프론트엔드 개발자

0개의 댓글