Semantic Tags로 리팩토링 하기

Semantics란?
HTML5의 Semantic Tags
대표적인 Semantic Tags 블로그에 적용하기
마무리

Computer Science에서의 Semantics란?

컴퓨터 공학에서 프로그램의 의미론(Semantics) 은 프로그램이 실행될 때 그 의미가 무엇인지를 설명하는 개념이다.

시맨틱스는 프로그램의 명령어가 어떤 의미로 동작하는지에 초점을 맞추며, 이는 프로그램의 구조와 형태를 다루는 구문론(Syntax) 과 대조된다.

구문론은 프로그램이 어떤 형식으로 표현되는지를 정의하고, 시맨틱스는 그 형식이 실행될 때 프로그램이 무엇을 하게 되는지를 설명한다.

예를 들어, 자바스크립트에서 i += 1과 i = i + 1은 구문론적으로 다른 표현이지만, 시맨틱스적으로는 'i에 1을 더한다'는 동일한 의미를 가진다.

Semantic Tags

시맨틱 태그(Semantic Tags) 는 HTML5에서 도입된 개념이다.

이 태그들은 웹 페이지의 구조와 내용에 의미를 부여하는 역할을 한다.

예를들어 <h1>은 시맨틱 태그이며, 페이지의 최상위 제목이라는 역할을 갖는다.

하지만 우리는 구문론적으로 <h1> 태그와 같은 역할을 하는 태그를 우리는 스타일 적용을 통해 만들 수 있다.

<h1>h1 태그입니다</h1>
<span style="font-size: 32px; margin: 21px 0;">h1 태그입니다</span>

위의 두 태그는 기능적으로는 정확하게 일치하지만, <span> 태그는 '프로그램이 어떻게 동작하는가'의 의미론적 측면에서는 가치가 없다.

따라서 기능에 적합한 HTML 요소를 사용하는 것이 좋다.
HTML은 채워질 데이터를 나타내도록 코딩해야한다.

어떻게 보여지는가는 CSS만의 단독 역할이다.

시맨틱 태그의 사용 이점

검색 엔진은 시맨틱 태그를 검색 순위에 영향을 주는 중요한 키워드로 간주한다
시각 장애가 있는 사용자가 화면 판독기로 페이지를 탐색할 때 시맨틱 태그를 가이드로 사용할 수 있다
의미없는 <div>들을 탐색하는 것 보다, 시맨틱 태그를 찾는 것이 훨씬 쉽다
개발자들간의 태그 안에 채워질 데이터에 관하여 의사소통에 유리하다

대표적인 시맨틱 태그와 블로그에 적용하기

<header>: 페이지 또는 섹션의 머리말
<nav>: 네비게이션 링크 모음
<main>: 페이지의 주요 내용
<article>: 독립적인 콘텐츠 (예: 블로그 포스트)
<section>: 관련 콘텐츠의 그룹화
<aside>: 주요 내용과 간접적으로 관련된 부가 정보
<footer>: 페이지 또는 섹션의 꼬리말

1. 네비게이션 컴포넌트 리팩토링

<>
  <div className={styles.container}>
    <NavLink
      to="/"
      className={({ isActive }) => (isActive ? styles.activeLink : undefined)}
    >
      Home
    </NavLink>
    <NavLink
      to="/post"
      className={({ isActive }) => (isActive ? styles.activeLink : undefined)}
    >
      Post
    </NavLink>
    <NavLink
      to="/about"
      className={({ isActive }) => (isActive ? styles.activeLink : undefined)}
    >
      About
    </NavLink>
  </div>
</>

<header>
  <nav className={styles.container}>
    <ul>
      <li>
        <NavLink
          to="/"
          className={({ isActive }) =>
            isActive ? styles.activeLink : undefined
          }
        >
          Home
        </NavLink>
      </li>
      <li>
        <NavLink
          to="/post"
          className={({ isActive }) =>
            isActive ? styles.activeLink : undefined
          }
        >
          Post
        </NavLink>
      </li>
      <li>
        <NavLink
          to="/about"
          className={({ isActive }) =>
            isActive ? styles.activeLink : undefined
          }
        >
          About
        </NavLink>
      </li>
    </ul>
  </nav>
</header>

적용된 부분은 다음과 같다

전체 컴포넌트를 <header> 태그로 감싸고 웹사이트의 헤더 부분임을 명시했다
네비게이션 링크들을 <nav>로 감싸고 네비게이션 메뉴임을 명시했다
링크들을 <ul>과 <li>로 감싸고, 네비게이션 메뉴가 링크의 리스트라는 것을 시맨틱하게 표현했다.
불필요한 React Fragment를 제거했다.

2. 게시글 목록 컴포넌트 리팩토링

<div>
  <ul className={styles.postList}>
    {posts.map(({ title, date }, index) => (
      <li key={`${title}-${date}`} className={styles.postItem}>
        <Link
          to={`/post/${totalPostsNumber - index}`}
          className={styles.postTitle}
        >
          {title}
        </Link>
        <PostDate date={date} className={styles.postDate} />
      </li>
    ))}
  </ul>
</div>

<main>
  <ul className={styles.postList}>
    {posts.map(({ title, date }, index) => (
      <li key={`${title}-${date}`}>
        <article className={styles.postItem}>
          <Link
            to={`/post/${totalPostsNumber - index}`}
            className={styles.postTitle}
          >
            {title}
          </Link>
          <PostDate date={date} className={styles.postDate} />
        </article>
      </li>
    ))}
  </ul>
</main>

적용된 부분은 다음과 같다

전체 컴포넌트를 <main> 태그로 감싸고 각 페이지의 주요 콘텐츠 영역임을 명시했다
각 게시물을 <article> 태그로 감쌌다

3. 메인 페이지 컴포넌트 리팩토링

<section>
  <div className={styles.audioContainer}>
    <a
      href="https://music.apple.com/kr/playlist/24%EB%85%84-9%EC%9B%94/pl.u-AkAmPNyt27LV71x"
      target="_blank"
    >
      <img src="/audio.jpg" className={styles.audio} alt="audio" />
    </a>
  </div>
  <h1 className={styles.recentPostsTitle}>Recently Posted</h1>
  <ul className={styles.recentPostsList}>
    {recentPostsTitles.map(({ title }, index) => (
      <li key={index} className={styles.recentPostItem}>
        <Link to={`/post/${totalPostsNumber - index}`}>{title || 'None'}</Link>
      </li>
    ))}
  </ul>
</section>

<main>
  <section className={styles.audioContainer}>
    <a
      href="https://music.apple.com/kr/playlist/24%EB%85%84-9%EC%9B%94/pl.u-AkAmPNyt27LV71x"
      target="_blank"
    >
      <img src="/audio.jpg" className={styles.audio} alt="audio" />
    </a>
  </section>
  <h1 className={styles.recentPostsTitle}>Recently Posted</h1>
  <section>
    <nav>
      <ul className={styles.recentPostsList}>
        {recentPostsTitles.map(({ title }, index) => (
          <li key={index} className={styles.recentPostItem}>
            <Link to={`/post/${totalPostsNumber - index}`}>
              {title || 'None'}
            </Link>
          </li>
        ))}
      </ul>
    </nav>
  </section>
</main>

적용된 부분은 다음과 같다

전체 컴포넌트를 <main> 태그로 감싸고 각 페이지의 주요 콘텐츠 영역임을 명시했다
오디오 섹션과 최근 게시글 영역을 <section> 태그로 감쌌다
최근 게시글 목록을 <nav> 태그로 감쌌다

마무리

시맨틱 태그는 HTML의 가독성과 접근성을 향상시키고, 웹 페이지의 구조를 명확하게 정의하여 다양한 이점들을 제공한다.

특히, 검색 엔진 최적화(SEO) 가 웹 페이지의 퀄리티에 있어 중요한 요소로 자리잡은 지금, Semantic Tags의 활용은 더욱 중요해졌다.

앞으로 SEO까지 고려한 블로그 최적화를 시도하며, 시맨틱한 코드를 적용하는 습관을 길러야겠다.

Semantic Tags로 리팩토링 하기

Contents

Computer Science에서의 Semantics란?

Semantic Tags

시맨틱 태그의 사용 이점

대표적인 시맨틱 태그와 블로그에 적용하기

1. 네비게이션 컴포넌트 리팩토링

2. 게시글 목록 컴포넌트 리팩토링

3. 메인 페이지 컴포넌트 리팩토링

마무리

Reference