[NutriNotes] 시맨틱 태그 적용하기

[HTML] HTML 시맨틱 태그(Semantic Tags)

HTML 시맨틱 태그에 대해 공부하고, 이번에 진행하고 있는 프로젝트에 적용해 보았다. 시간이 걸리는 작업이었지만, 각 페이지의 구조에 대해 다시 한번 생각해 보고, 페이지 내에서 각 구획의 역할에 대해 생각해 볼 수 있었다.

 

또한, 이전 포스팅에서 살펴봤던 것과 같이 태그만으로도 구조를 파악할 수 있어 HTML의 가독성과 유지보수성을 높일 수 있었다. 사실 복잡한 구조를 가진 페이지는 없었지만, 이 과정을 통해 앞으로는 좀 더 접근성과 구조를 고려한 코딩을 해야겠다고 생각했다. 

 

그럼 컴포넌트 또는 페이지마다 어떤 식으로 변경했는지 살펴보자. 최대한 배운 내용을 활용하려했지만 분명히 놓친 부분도 있을 것 같아 앞으로 계속 공부해 나가면서 보완해나가야 할 것 같다.

 

Header 

• 사용 태그 : <header>, <nav>

<이전>

Header 컴포넌트 구조(이전)

<이후>

Header 컴포넌트 구조(이후)

<header>는 문서의 헤더를 정의할 때, <nav>는 주요 탐색 링크들을 포함하는 요소이다. 페이지 상단에 위치한 헤더의 경우 <header>로 감싸고, 내부에 다른 페이지로 이동 가능한 링크들과 유저 인증 관련 링크들은 각각 <nav> 태그로 묶었다. 또한, <nav> 내 각 링크를 <ul>과 <li>로 나열하였다. 

 

<nav> 태그를 한 페이지에 여러 개 사용하는 게 괜찮을까? 하는 의문이 들었는데 문제 없다고 한다. (링크) 대신 스크린 리더 사용자들을 위해 각 <nav>에 위와 같이 aria-label로 명확한 이름을 붙여주는 것이 좋다. 

 

 

Root

• 사용 태그 : <main>

<이전>

root 페이지 구조(이전)

<이후>

root 페이지 구조(이후)

<main> 태그는 메인 콘텐츠 영역으로 문서 내에서 반드시 한 번만 사용해야 한다. Root 컴포넌트에서 Outlet을 포함하는 주요 콘텐츠를 main 태그로 변경하였다. 

 

 

Main

• 사용 태그 : <section>, <article>, <h2>

main 페이지 구조

menu section 구조

<section>은 문서의 특정 주제를 그룹화하는 영역으로 대개 문서 요약에 해당 구획이 나타나야 하는 경우 사용한다. <article>은 다른 페이지에 재사용이 가능한 독립적 영역에 사용한다. 이들 모두 <h> 태그를 사용해 명확한 이름을 붙여주어야 한다.

 

Main 페이지 내 구역을 크게 각 영역의 역할을 고려하여 Spec section과 Card section으로 구분하였다. 또한 Card section 내부의 각 카드는 다른 페이지로 이동하는 링크인데, 실제 콘텐츠를 담고 있고, 재사용될 수 있는 영역이라고 판단해 <article>로 묶어주었다. 이때 <header>에서와 마찬가지로 링크들을 각각 <ul>과 <li>를 사용해 나열하였다. 마지막으로, 각 <section>과 <article>은 aria-labelledby를 사용해 헤딩과 연결하였다. 

 

Home  

• 사용 태그: <section>, <article>, <h2>, <h3>

카테고리 별로 레시피 카드를 보여주는 각 캐러셀을 <section>으로 묶고, <h2>로 카테고리 명을 사용하여 이름을 붙였다. 또한, 각 레시피 카드는 독자적 콘텐츠로 판단하여 <article>로 감싸주고,  <h2>로 각 레시피 음식 이름을 사용하였다. 마지막으로, <img>에 alt 속성을 추가하였다.

 

 

LogIn 

• 사용 태그: <section>, <form>, <label>

LogIn 폼 구조

폼 전체를 <section>으로 묶고, 폼 제목은 <h2>로 지정하였다. <input>의 경우 sr-only <label>을 지정해 htmlFor과 id로 연결하였다.

접근성을 위해 화면에는 나타나지 않지만, 스크린 리더 사용자들에게는 보일 수 있도록 하는 sr-only 클래스를 만들어 활용하였다.

  .sr-only {
  overflow: hidden;
  position: absolute;
  clip: rect(0, 0, 0, 0);
  clip-path: polygon(0 0, 0 0, 0 0);
  width: 1px;
  height: 1px;
  margin: -1px;
}

 

 

DashBoard 

• 사용 태그: <section>, <article>, <h2>, <h3>

DashBoard 페이지

Dashboard 페이지 구조

Home 페이지의 캐러셀과 같이 대시보드 영역을 <section>으로 묶어주고, aria-label로 접근 가능한 이름을 부여하였다. 내부의 Your Meals와 Main Nutrition Intake 영역도 각각 <section>으로 그룹화하여 <h2>로 aria-label을 지정하였다. 

 

적용 

minjidev/react-ts-diet-frontend의 commit 내역에서 확인할 수 있습니다.