ARQHIVE

homepage

Contact

Copyright © 2024 | Yankos
Contents

Home > Frontend > HTML > Semantic HTML

Semantic HTML
Frontend 2024-02-27 - -
Frontend HTML

Semantic(의미론적) HTML 이란?

시맨틱(의미론적) HTML은 HTML 마크업을 사용하여 웹 페이지의 모양이 아닌 콘텐츠의 의미를 전달하는 것을 말한다. 브라우저와 개발자 모두에게 그 의미를 명확하게 설명한다.

이 접근 방식에는 몇 가지 이점이 있다.

  • 첫째, 검색 엔진 및 기타 기술이 사이트 콘텐츠의 구조와 목적을 이해하는 데 도움이 된다.
  • 둘째, 이전 접근성 포스트에서도 말했듯이 보조 기술을 사용하여 웹을 탐색하는 사람들이 콘텐츠에 더 쉽게 액세스할 수 있도록 한다.
  • 셋째, 각 요소의 목적이 명확하기 때문에 코드를 더 쉽게 읽고 유지 관리할 수 있다.

이런 이점을 획득하기 위해서 시맨틱 HTML은 필수라고 할 수 있다. 가장 일반적인 시맨틱 HTML 태그와 이를 효과적으로 사용하는 방법을 알아보자.

시맨틱한 요소의 예: <form> <table> <article>등…
시맨틱하지 않은 요소의 예: <div> <span>등…

시맨틱 HTML 태그와 용도

<header>는 웹 페이지의 상단 섹션을 마크업하는 데 사용되며, 일반적으로 기본 제목이나 로고, 내비게이션 및 사이트의 모든 페이지에 공통적인 기타 요소를 포함한다. <header>태그를 사용하면 페이지의 헤더와 기본 콘텐츠를 명확하게 구분하여 사용자가 웹사이트를 더 쉽게 이해하고 탐색할 수 있다.

<body>의 자식인 경우 웹 페이지의 전체 헤더를 정의하지만 <article> 또는 <section>의 자식인 경우 해당 섹션에 대한 특정 헤더를 정의한다.

주 컨텐츠

  • 하나의상의 제목요소 (h1 ~ h6)
  • 로고 또는 아이콘
  • 저자 정보

여러개의 <header>를 하나의 문서내에 가질수있다. 하지만 <header>는 <footer>, <address>또는 다른 <header>에 중첩되면 안된다.

<article>
  <header>
    <h1>점심을 뭐먹을지는 항상 고민된다.</h1>
    <p>직장인들의 점심메뉴 고민은 늘 크리티컬한 이슈이다.</p>
  </header>
  <p>콘텐츠...</p>
</article>

<nav>태그는 탐색 링크가 포함된 웹 페이지의 섹션을 마크업하는 데 사용된다. 태그를 사용하면 웹사이트의 이 섹션이 탐색을 위해 특별히 설계되었음을 사용자와 검색 엔진 모두에 나타낼 수 있다.

모든 링크가 <nav>안에 있어야 하는건 아니다. 주요한 탐색링크 집합의 컨테이너로 사용된다.

<nav>
  <a href="/html">HTML</a>
  <a href="/css">CSS</a>
  <a href="/javascript">JavaScript</a>
  <a href="/react">React</a>
</nav>

<main>

<main> 태그는 웹 페이지의 기본 콘텐츠 영역을 마크업하는 데 사용된다. 태그를 사용하면 페이지의 어느 부분에 주요 콘텐츠가 포함되어 있는지 사용자와 검색 엔진 모두에게 명확하게 알릴 수 있다.

<main>태그는 이상적으로 페이지에 한번만 사용해야 한다.

<article>

<article> 태그는 블로그 게시물, 뉴스 기사 또는 제품 리뷰와 같은 독립형 콘텐츠를 나타내는 데 사용된다. 태그 내의 콘텐츠는 독립적이고 의미 있어야 하며 제목, 단락, 이미지 및 기타 유형의 콘텐츠를 포함할 수 있다. 독립적이라는 콘텐츠가 그 자체로 의미가 있어야 함을 말한다. 웹 사이트의 나머지 부분과 독립적이다.

<article class="all-browsers">
  <h1>가장 유명한 브라우저</h1>
  <article class="browser">
    <h2>구글 크롬</h2>
    <p>
      구글 크롬은 2008년에 등장한 브라우저로서 현재 세계에서 가장 점유율이 높은
      브라우저 입니다!
    </p>
  </article>
  <article class="browser">
    <h2>모질라 파이어폭스</h2>
    <p>파이어폭스는 모질라 재단에서 개발한 오픈소스 브라우저 입니다.</p>
  </article>
  <article class="browser">
    <h2>마이크로소프트 엣지</h2>
    <p>
      마이크로소프트 엣지는 2015년에 등장하여 기존 브라우저인 인터넷
      익스플로러를 대체합니다.
    </p>
  </article>
</article>

<aside>

<aside>태그는 웹 페이지의 기본 콘텐츠와 관련이 있지만 필수적인 부분이 아닌 콘텐츠를 마크업하는 데 사용된다. 여기에는 보충 정보, 광고 또는 관련 기사와 같은 것이 포함될 수 있다. 주로 사이드바 처럼 배치되며 주변 콘텐츠와 간접적으로 연관된다.

<p>
  저는 지난주에 강원도 속초를 다녀왔습니다. 일출이 아름다웠고 장칼국수가
  맛있었습니다.
</p>

<aside>
  <h4>강원도 속초</h4>
  <p>
    속초시는 대한민국 강원특별자치도 동해안 북부에 위치한 시이다. 시의 서쪽으로
    설악산 국립공원이 있고, 시의 중심부에는 석호인 영랑호와 청초호가 있다.
    동해에는 한류와 난류가 교류하여 어족이 풍부하기 때문에 동명항과 대포항을
    중심으로 수산업과 관광업이 발달하였다.
  </p>
</aside>

<section>

<section>태그는 주제별로 그룹화된 웹 페이지의 섹션을 마크업하는 데 사용된다. 여기에는 긴 기사의 하나의 장을 담당하는것을 주로 한다. W3C의 HTML 문서에 따르면 “섹션은 일반적으로 제목이 있는 내용의 주제별 그룹이다.”라고 표현한다.

각 섹션을 제목으로 시작하는 것이 가장 좋다. 또한 컨텍스트에 따라 섹션을 다른 섹션이나 아티클로 분할할 수 있다.

<section>
  <h1>WWF</h1>
  <p>
    세계자연기금(WWF)은 국제기구입니다. 보존, 연구, 복원에 관한 문제를 연구하고
    있습니다. 이전에는 세계야생생물기금(World Wildlife Fund)으로 명명되었습니다.
    WWF는 1961년에 설립되었습니다.
  </p>
</section>

<footer>태그는 저작권 정보, 연락처 세부 정보 또는 소셜 미디어 프로필 링크와 같은 항목을 포함할 수 있는 웹 페이지의 하단 섹션을 표시하는 데 사용된다. 문서 또는 섹션의 바닥글을 정의하는데 주료 사용되며 하나의 문서에 여러개가 있을수 있다.

<footer>
  <p>저작자: arqhive</p>
  <p>
    <a href="mailto:hgystation@gmail.com">hgystation@gmail.com</a>
  </p>
</footer>

<figure>, <figcaption>

<figure> <figcaption>태그는 웹 페이지의 기본 콘텐츠에서 참조되는 독립적인 콘텐츠를 마크업하는 데 사용된다. 태그는 콘텐츠 자체를 마크업하는 데 사용되며 태그는 콘텐츠에 대한 캡션 또는 설명을 마크업하는 데 사용된다.

참고: 접근성의 관점에서, 캡션과 alt 텍스트는 다른 역할을 한다. 캡션은 이미지를 볼 수 있는 사람들에게도 도움이 되지만, alt 텍스트는 이미지가 없을 때와 같은 기능을 제공한다. 따라서, 캡션과 alt 텍스트는 같아서는 안된다. 왜냐하면 이미지가 없을 때 둘 다 나타나기 때문이다.

<figure>는 이미지일 필요가 없다. <figure>는 다음과 같은 독립적인 컨텐츠 단위이다.

  • 여러 이미지, 코드 스니펫, 오디오, 비디오, 방정식, 표 등등…
<figure>
  <img src="image.jpg" alt="Image description" />
  <figcaption>이미지 캡션</figcaption>
</figure>

<detail>, <summary>

<detail>및 <summary>태그는 콘텐츠의 축소 가능한 섹션을 표시하는 데 사용된다. <detail>태그는 섹션의 제목을 마크업하는 데 사용되며 <summary>태그는 콘텐츠 자체를 마크업하는 데 사용된다. 아코디언을 구현할때 적절한 태그이다.

<details>
  <summary>클릭하면 펼쳐집니다.</summary>
  <p>펼쳐질때 보이는 콘텐츠 입니다.</p>
</details>

<mark>

<mark>태그는 어떤 이유로 강조 표시된 텍스트를 마크업하는 데 사용된다. 여기에는 검색 결과 또는 사용자가 강조 표시한 텍스트와 같은 항목이 포함될 수 있다.

<p>여기에 <mark>하이라이트</mark> 텍스트가 있습니다.</p>

<time>

<time>은 기계가 읽을 수 있는 형태로 날짜와 시간을 표현할 때 사용한다. 예를 들어, 일정의 경우 사용자 에이전트가 자동으로 달력에 일정을 추가할 수 있도록 정확한 일시를 나타낼 수 있다. 한가지 주의할점은 datetime속성은 정해진 포맷으로만 입력해야 하는 것이다.

<p>
  다음 이벤트가 일어날 날짜:
  <time datetime="2024-02-25">2024년 2월 25일</time>.
</p>

<progress>

<progress>태그는 진행률 표시줄을 표시하는 데 사용된다. 태그를 사용하면 사용자가 작업 진행 상황을 더 쉽게 이해할 수 있다.

<progress value="50" max="100"></progress>

Italic, Bold, Underline

위에서 이야기했던 요소들은 관련된 의미들을 명확히 구분한다. 그러나 <b>, <i>, <u>의 상황들은 좀 어지럽다. 이 요소들은 CSS가 형편없이 지원되거나 완전히 지원되지 않는 경우에 이탤릭체 또는 밑줄 등을 표현할 수 있도록 고안되었다. 의미론적이 아닌 표현에만 영향을 주는 이와 같은 요소들은 현재적 요소로 알려져 있으며, 더 이상 사용되어서는 안된다. 앞에서 살펴본 바와 같이 의미론은 접근성, SEO 등에 매우 중요하기 때문이다.

HTML5 에서는 <b>, <i>, <u> 를 조금 혼란스럽긴 하지만 새로운 의미론적 역할로 재정립 하였다.

  • <i> 요소는 과거로부터 줄곧 기울임꼴로 전달되는 의미를 전달하기 위해 사용된다. 외래어, 분류학 명칭, 전문 용어, 생각…
  • <b> 요소는 과거로부터 줄곧 굵은 글씨로 전달되는 의미를 전달할 때 사용한다. 주요 단어, 제품 이름, 주요 문장…
  • <u> 요소는 과거로부터 줄곧 밑줄을 치는 것으로 전달되는 의미를 전달할 떄 사용한다. 적절한 이름, 잘못된 철자…

의미가 정립되어 있긴 하지만 어디까지나 과거로부터 현재까지 전달되는 의미이지 진정한 의미론적 요소라고 보기는 힘들다. 위에서 말했듯이 <b>, <i>, <u> 요소는 사용하지말고 필요하다면 CSS를 이용해 구현하자.

위의 3요소는 스크린리더가 아무런 처리도 하지 않는다.

비의미론적 요소

때로는(이라고 쓰고 굉장히 자주) 일부 항목을 함께 그룹화하거나 일부 콘텐츠를 래핑하는 이상적인 의미 체계 요소를 찾을 수 없는 상황에 직면하게 된다. 때로는 요소 집합을 함께 그룹화하여 일부 CSS 또는 JavaScript를 사용하여 단일 엔터티로 모두 영향을 줄 수 있다. 이와 같은 경우 HTML은 <div> 및 <span> 요소를 제공한다. 가급적이면 적절한 클래스 속성과 함께 사용하여 쉽게 타겟팅 할 수 있도록 일종의 레이블을 제공해야 한다(WAI-ARIA 이용).

<span>은 인라인 비의미론적 요소로, 콘텐츠를 래핑할 더 나은 의미론적 텍스트 요소를 생각할 수 없거나 특정 의미를 추가하고 싶지 않은 경우에만 사용해야 힌다.

<div>는 블록 수준의 비의미론적 요소로, 사용할 더 나은 의미론적 블록 요소를 생각할 수 없거나 특정 의미를 추가하고 싶지 않은 경우에만 사용해야 한다. 예를 들어, 이커머스 사이트에서 시간을 보내는 동안 언제든지 불러올 수 있는 장바구니 위젯이 있다.

경고: div는 사용하기 너무 편리해서 많이 사용하기 쉽다. 의미론적 가치가 없기 때문에 HTML 코드를 복잡하게 만들 뿐이다. 더 나은 의미 체계 솔루션이 없을 때만 사용하고 사용량을 최소한으로 줄이지 않으면 문서를 업데이트하고 유지 관리하는 데 어려움을 겪을 것이다.