가치투자자

[HTML] 시멘틱 태그(semantic tag)란? 본문

Programming/HTML, CSS

[HTML] 시멘틱 태그(semantic tag)란?

미주민 2023. 6. 17. 15:11
728x90
반응형

 시멘틱 태그 (Semantic Tag) 

 1. 시멘틱 태그란? 

혹시 여러분은 검색의 원리가 어떻게 되는지 알고 있나요?

검색엔진(Search Engine)은 매일 여러 웹 페이지의 정보를 크롤링하여 수집하고, 그 정보에다가 이용자들이 검색할 만한 키워드에 맞게 인덱스(index)를 붙여주는 인덱싱 작업을 한다. 이때 이용자들이 검색하는 사이트들이 HTML 문서이기에 검색 엔진은 HTML 코드를 기반으로 웹 사이트의 컨텐츠를 분석하고 인덱싱한다.

 

예시를 통해 좀 더 이해도를 높여보자.

아래 두 코드 모두 제목을 만들기 위한 코드고, 겉으로 보이는 결과물도 유사하지만 검색 엔진은 서로 다르게 인식한다.

첫 번째 코드는 제목 요소(h1 태그)로 인식되지만, 두 번째 코드는 32px 크기의 요소로 받아들여진다.

<h1>Hello</h1>
<head>
  <style>
    .big {
      font-size: 32px;
  </style>
</head>
<body>
  <span class="big">Hello<span>
</body>

 

가장 상위 레벨의 제목(header)이라는 의미를 가지는 h1 태그처럼 의미를 가진 태그를  시멘틱 테그(Semantic Tag) 라고 한다.

 

* 기술면접 질문은 맨 아래에 적혀 있습니다

 

728x90

 

 2. 시멘틱 태그의 장점 

1. SEO (검색엔진 최적화, Search Engine Optimization)

HTML4까지는 div 태그에 id를 사용하여 header, nav, main, footer 등을 구분했다. 그러나 앞서 예시를 통해 살펴봤듯이 이 방식으로는 어디가 제목인지, 본문인지, 하단인지 알 수 없다. 이러한 문제를 개선하여 특정 키워드로 검색했을 때 그에 맞는 글이 잘 노출되도록 해주는 것이 시멘틱 태그다.

 

 

2. 웹 접근성 (Accessibility)

시멘틱 태그로 코드를 짜면 음성으로 웹 페이지 문서를 읽어주는 스크린리더나 키보드를 이용해서 웹 페이지를 파악할 수 있다. 이로 인해 시각 장애인들이 웹을 더 편리하게 이용할 수 있다.

 

웹 접근성의 예시는 4-3과 4-4를 참고하길 바란다.

 

3. 유지보수 (Maintainability)

만약 HTML4때처럼 모든 코드를 div 태그로 짜면 어떨까?

아래 두 코드를 봤을 때, 시멘틱 태그를 사용한 HTML5 문서가 더 명확하게 구조를 파악하기 쉽다. 이로 인해 개발자들은 코드를 수정하고 유지보수하는 데 더 편해질 수 있다.

 

<!-- HTML4 -->
<div>
  <div id="header">헤더</div>
  <div>
    <div id="nav">네비게이션 바</div>
    <div>
      <div>컨텐츠1</div>
      <div>컨텐츠2</div>
    </div>
    <div id="aside">사이드바</div>
  </div>
</div>
<!-- HTML5 -->
<main>
  <header>헤더</header>
  <section>
    <nav>네비게이션 바</nav>
    <article>
      <section>컨텐츠1</section>
      <section>컨텐츠2</section>
    </article>
    <aside>사이드바</aside>
  </section>
</main>

 

 3. 시멘틱 태그의 종류 

3-1. non-semantic 태그

non-semantic 태그에는 div, span 등이 있으며, 요소에 대한 그 어떠한 설명도 해주지 않는다.

 

3-2. semantic 태그

시멘틱 태그의 대표적 예시에는 다음과 같은 것이 있다.

 

  • header : 제목, 로고, 검색 폼, 작성자 이름 등이 포함된다

  • main : 문서의 주요 콘텐츠 영역

  • nav : 다른 페이지로의 링크를 보여주는 영역으로, 주로 메뉴, 목차, 색인 등으로 쓰인다

  • aside : 문서의 좌측과 우측 사이드 위치 영역으로, 주로 사이드바나 광고, 부수적인 내용이 차지한다

  • footer : 바닥글, 문서 하단의 정보가 들어가는 영역

 

좀 더 다양한 태그에 대하 알고 싶으면 아래 링크를 참고하길 바란다.

https://developer.mozilla.org/ko/docs/Web/HTML/Element

 

HTML 요소 참고서 - HTML: Hypertext Markup Language | MDN

메타데이터는 스타일, 스크립트, 각종 소프트웨어(검색 엔진 (en-US), 브라우저 등)의 탐색 및 렌더링을 도와줄 데이터 등 페이지에 대한 정보를 가집니다. 스타일과 스크립트 메타데이터는 페이

developer.mozilla.org

 

 4. 태그들의 차이점 

4-1. article 태그와 section 태그

main 태그 내에서 div 태그를 대신해 각 요소의 용도에 따라 article과 section 태그를 사용할 수 있다.

 

  • <article>

    : 문서 내에서 독립적인 내용 영역을 구분할 때 사용하는 태그

    : 게시판과 블로그 글, 매거진이나 뉴스 기사 등

  • <section>

    : 카테고리별로 연관 있는 내용들을 묶어주고 싶을 때 사용하는 태그

 

4-2. button 태그와 a 태그

  • <button>

    : 클릭 가능한 버튼을 생성하는 태그

    : 로그인, 구매, 추천 버튼 등 특정 액션을 하기 위한 버튼

  • <a>

    : 어디론가 이동할 때 사용하는 태그

    : href 특성을 통해 다른 페이지나 같은 페이지 내 특정 위치로 이동할 수 있도록 하는 하이퍼링크를 만들 수 있다

button 태그는 버튼을 만들고, a 태그는 링크 태그를 만들기에 전혀 다른 것이라 생각할 수 있다. 그러나 아래의 코드처럼 a 태그를 버튼처럼 만들 수도 있다. 거기다 CSS로 a 태그를 버튼처럼 꾸민다면 겉으로 보기에는 다를 것이 없다. 그러나 검색 엔진은 이를 버튼이 아닌 a 태그로 인식하기에 좋은 코드가 아니다. 각 시멘틱 태그의 의미에 맞게 사용해야 검색엔진에 최적화할 수 있다.

<form id="myForm">
  <input type="text" name="username" placeholder="Username" required>
  <input type="password" name="password" placeholder="Password" required>
  <a href="#" class="button" onSubmit="handleSubmit()">Submit</a>
</form>

<script>
  function handleSubmit() {
    // 제출 이벤트
  }
</script>

 

4-3. i 태그와 em 태그

  • <i>

    : 시각적으로 이탤릭체(기울임)로 텍스트를 쓰고 싶을 때 사용하는 태그

  • <em>

    : 시각적인 이탤릭체뿐만 아니라, 스크린리더에 강조하고 싶을 때 사용하는 태그
<p>나의 주 언어는 <i>JavaScript</i>이고, 가장 자신있는 프레임워크는 <em>React</em>이다.</p>

 

4-4. b 태그와 strong 태그

  • <b>

    : 시각적으로 글자를 강조(bold)하고 싶을 때 사용하는 태그

  • <strong>

    : 시각적인 글자 강조뿐만 아니라, 스크린리더에서도 강조하고 싶을 때 사용하는 태그
<p>나의 주 언어는 <b>JavaScript</b>이고, 가장 자신있는 프레임워크는 <strong>React</strong>이다.</p>

 

4-5. img 태그와 background-image

  • <img>

    : 문서에서의 이미지가 하나의 중요한 요소로 자리잡고 있을 때

  • css에서 background-image 스타일링

    : 이미지가 없어도 웹 페이지를 읽고 이용하는데 문제가 없는 경우

 

반응형

 

🌟 기술면접 질문

1. 시멘틱 태그의 장점은 무엇인가요?

 

   먼저, 시멘틱 태그를 사용하여 문서를 구성한다면 검색엔진 최적화가 되어 특정 키워드로 검색했을 때 그 문서가 웹 사이트에 잘 노출될 수 있다. 또한, 스크린리더나 키보드만으로도 웹 페이지를 파악하기 용이해져 웹 접근성도 높아진다. 마지막으로, div 태그로만 문서를 구성했을 때보다 코드의 가독성이 높아져 개발자가 문서의 구조와 각 태그의 기능을 파악하기 쉬워서 유지보수하는 데 큰 도움이 된다.

 

2. button 태그와 a 태그의 차이점이 무엇인가요?

 

   button 태그는 특정 액션을 하기 위한 버튼을 생성할 때 사용하는 태그이고, a 태그는 어디론가 이동하기 위한 링크 버튼을 만들기 위한 태그다. a 태그에도 이벤트를 주고 스타일링을 하면 겉으로 보기에 button 태그처럼 될 수 있지만, 검색엔진은 이를 button 태그로 인식하지 못한다. 따라서 각 시멘틱 태그의 의미에 맞게 태그를 사용하는 것이 좋다.

 

 

</> 끊임없이 성장하기 위해 공부한 내용을 글로 작성하고 있습니다. 틀린 부분이나 추가해야 할 부분이 있다면 언제든 댓글로 남겨주세요❗️

 

References

 

 

728x90
반응형

'Programming > HTML, CSS' 카테고리의 다른 글

[CSS] position  (0) 2023.06.04
[CSS] display  (0) 2023.06.03
[CSS] 선택자 : 가상 클래스 & 가상 요소  (0) 2023.04.21
[CSS] 선택자  (1) 2023.04.19
[CSS] Flexbox 레이아웃  (0) 2023.04.17
'Programming/HTML, CSS' Related Articles more