오늘의 학습 목표

• Emmet을 활용할 수 있다.
• 자주 사용되는 HTML 요소와 그 특징을 다섯 가지 이상 설명할 수 있다.
• 웹페이지의 구조를 보고 어떤 시맨틱 요소를 활용하는 것이 바람직한지 말할 수 있다.

Semantic

의미를 가진 요소를 활용하여 시맨틱 웹을 만드는 것은 매우 중요하다.
시맨틱 요소를 사용해야 하는 이유는 다음과 같다.

• 시각장애인을 위한 리더기 및 화면 읽기 프로그램은 시맨틱 태그에 의해 짜여진 레벨에 맞추어 글씨를 읽는다.
• 검색 엔진은 시맨틱 요소 사용 여부에 따라 상위 노출 여부를 결정한다.
• 개발 및 유지보수 시 직관적으로 코드를 파악할 수 있다.

section vs article

header, nav 등의 요소는 이해가 잘 된다.
그런데 section과 article만은 둘 중 어느 것을 사용해야 할지 늘 고민이 된다.
두 태그의 차이를 알아보기 위해 먼저 어떤 역할을 하는지 살펴보았다.

section
문서에서 구획을 나타낸다.

article
독립적으로 구분해 재사용할 수 있는 구획을 나타낸다.
게시판과 블로그 글, 매거진이나 뉴스 기사 등을 예로 들 수 있다.

둘 모두 구획을 나타낸다는 점에서 유사하지만 용도가 다르다.
section 태그는 맥락 내에서 관계가 있는 내용 사이에 구분이 필요할 때 사용한다.
반면 article 태그는 맥락과 관계 없이 따로 떼어 활용할 수 있다. article에만 '재사용' 키워드가 붙은 것도 이 때문이다.

예시를 통해 이해하기

A. article이 section을 묶는 구조

<article>
  땡땡의 겨울옷을 소개합니다.
  <section>코트</section>
  <section>스웨터</section>
  <section>폴라티</section>
</article>

이 article은 땡땡의 겨울옷에 관한 내용을 다루는 독립적인 구획이다.
각 section은 땡땡의 겨울옷이라는 맥락 안에서 각각 구분된 주제(코트, 스웨터, 폴라티)를 다룬다.
만약 section 하나가 article 영역을 탈출하여 독립적으로 사용된다면 땡땡의 겨울옷 중 하나라는 본래의 의미를 잃고 말 것이다.

B. section이 article을 묶는 구조

<section>
  <article>OO사 작년 영업익…</article>
  <article>금감원, 가상자산 증권성 판단 태스크 포스 구성</article>
  <article>홍콩 정부, 토지 매매 문서에 국가안보 조항 삽입</article>
</section>

이 section은 신문기사 목록을 품고 있다.
만약 article 하나가 독립적으로 쓰인다 하더라도 본래의 의미가 퇴색되지는 않을 것이다.

실전 활용

기존 코드

이 글을 작성하기 전에 만든 자기소개 페이지이다.
프로필 구획과 목표 구획을 나누기 위해 section을 활용했다.

<h2>저는 누구일까요?</h2>
<article>
  <img
    src="/img.jpeg"
    alt="카페에 사람이 앉아있는 사진"
  />
  <button
    type="button"
    onclick="window.open('https://velog.io/@garcon')"
  >블로그 구경하기</button>
</article>
<article>
  <h3>2023년 목표</h3>
  <ul>
    <li>Lorem ipsum</li>
    <li>olor sit amet</li>
    <li>onsectetur adipisicing elit</li>
  </ul>
  <h3>목표를 이루기 위한 다짐</h3>
  <ul>
    <li>Lorem ipsum</li>
    <li>olor sit amet</li>
    <li>onsectetur adipisicing elit</li>
  </ul>
</article>

개선 후

<article>
  <h2>저는 누구일까요?</h2>
  <section>
    <img
      src="/img.jpeg"
      alt="카페에 사람이 앉아있는 사진"
      width="600px"
      height="690px"
    />
    <button
      type="button"
      onclick="window.open('https://velog.io/@garcon')"
    >블로그 구경하기</button>
  </section>
  <section>
    <h3>2023년 목표</h3>
    <ul>
     <li>Lorem ipsum</li>
     <li>olor sit amet</li>
     <li>onsectetur adipisicing elit</li>
    </ul>
    <h3>목표를 이루기 위한 다짐</h3>
    <ul>
     <li>Lorem ipsum</li>
     <li>olor sit amet</li>
     <li>onsectetur adipisicing elit</li>
    </ul>
  </section>
</article>

참조

MDN 'article'
MDN 'section'
Article 태그와 Section 태그 정리