5. HTML - 중급 (Semantic Tag)

HTML Semantic Tag

HTML 입문 포스팅에서 가장 기본적인 HTML 태그들을 알아봤었습니다.

https://bellmir.tistory.com/20

(2) HTML 입문

HTML 입문 참고 링크 : 1. 생활코딩 - https://opentutorials.org/course/3084 2. Heropy - https://heropy.blog/2019/04/24/html-css-starter/ 3. w3schools - https://www.w3schools.com/html/ 들어가기 전에 H..

bellmir.tistory.com

해당 포스팅에서 레이아웃을 잡을 때 단순히 div 태그를 사용한다고 설명했었는데, 사실 div 태그를 사용하는것 보다 더 권장되는 태그들이 있습니다.

오늘은 HTML5에서 등장한 Semantic tag는 무엇이고, 어떤 용도인지 살펴보도록 하겠습니다.

Semantic tag란?

'Semantic'은 '의미론적'이라는 뜻입니다.

이 뜻대로 시멘틱 태그를 직역하면 '의미론적 태그'가 되는데, 이름만 들어도 그 용도가 뭔지 조금 감이 잡히는것 같죠?

결론부터 이야기하자면, 시멘틱 태그는 브라우저와 개발자에게 해당 코드 덩어리가 어떤 역할을 하는지 좀 더 명확하게 전달해주는 용도로 사용되는 태그를 말합니다.

아래의 코드를 한번 살펴봅시다.

<body>
  <div class="flex-between header">
    <div class="logo">
      <img src="/images/bellmir.jpg" alt="bellmir">
    </div>
    <div class="flex-around gnb">
      <a href="/">Home</a>
      <a href="/html">HTML</a>
    </div>
  </div>
  <div class="flex-center ad">
    <a href="/content1">contents1</a>
    <a href="/content2">contents2</a>
  </div>
  <div class="about-semantic section">
    <h1>Semantic 태그란?</h1>
    <p>semantic 태그는 의미론적 태그라는 뜻으로...</p>
  </div>
  ...
</body>

코드를 딱 봤을 때 어떤 덩어리가 어떤 역할을 하는지 이해가 가나요?

아마 아닐겁니다. 모든 태그가 의미를 가지지 않는 <div>태그로 감싸져있기 때문이죠. (<div class="header"> 이런식으로)

그나마 클래스 이름을 보면 어떤 역할인지는 이해가 되긴 하는데 한눈에 들어오지는 않습니다.

(일부러 부트스트랩 느낌으로 난잡하게 짜긴 했지만 오히려 현실은 더 심할 때가 많아요)

위에서 볼 수 있듯 <div>를 남발하게 되면 코드를 짤땐 편리하지만 코드의 가독성이 현저히 떨어지게 됩니다

HTML5에서는 이것을 개선하기 위해 기존의 태그와 기능은 똑같지만 명확한 의미를 가지는 태그들을 만들었는데요, 이것이 바로 '시멘틱 태그'입니다.

시멘틱 태그를 이용하면 <div class="header">나 <div id="header">가 아니라 <header>와 같이 명확한 의미를 가지도록 코드를 짤 수 있습니다.

Semantic tag 종류

Semantic tag의 종류는 무수히 많지만, 그 중 가장 많이쓰는 것들만 콕 찝어 살펴봅시다.

아래는 살펴볼 태그의 목록와 어디 사용되는지 간략하게 나타낸 이미지에요.

<header>
<nav>
<section>
<article>
<aside>
<footer>
<main>
<mark>
<strong>
<em>

<header>

한 구역의 헤더를 구분하는 태그.

헤더는 머릿글, 즉 도입부에 해당하는 콘텐츠들이 들어가는 부분을 의미합니다.

크게는 <body> 전체의 헤더를 구분할 때 사용하거나, 작게는 <section>의 헤더를 구분할 때 사용합니다.

보통 전자로 많이 쓰며, 웹페이지의 전체 메뉴와 로고 등을 여기에 넣습니다.

<nav>

'Navigation'의 줄임말로 페이지를 이동할 수 있게 해주는 메뉴를 의미합니다. (링크들의 모음)

<section>

구역(section)을 나눌 때 사용하는 태그.

정확하게는 '제목을 가지고 있으며, HTML 문서의 전체적인 내용과 관련이 있는 콘텐츠들의 집합을 의미한다'는데 그냥 큰 구역나눌때 사용한다고 보면 됩니다.

<article>

<section>과 비슷하게 구역을 나눌 때 사용하는 태그.

비슷하지만 조금 다른점은 article 내의 콘텐츠는 그 부분만 따로 떼어놔도 온전하게 이해가 될 수 있는 내용이어야 한다는 것? 근데 보통 <section>을 주로 쓰고 <article>은 잘 안씁니다.

<aside>

본문의 내용(흐름)과 상관없는 콘텐츠들을 담을때 사용하는 태그. 그냥 광고같은 콘텐츠들을 담는 곳이라고 생각하면 됩니다.

<footer>

<main>

전체 문서의 주요 콘텐츠들을 담을 때 사용하는 태그.

<em>, <strong>, <mark>

문장에서 일부분을 강조할 때 사용하는 태그들. 순서대로 이탤릭체, 볼드 형광밑줄로 표현됩니다.

(같은 효과를 내는 non-semantic tag로는 <em> = <i>, <strong> = <b>가 있고. mark는 딱히 없습니다.)

마무리

위에서 예시로 들었던 코드의 <div>들을 semantic tag들로 바꾸어서 다시한번 살펴봅시다

<body>
  <header class="flex-between">
    <div class="logo">
      <img src="/images/bellmir.jpg" alt="bellmir">
    </div>
    <nav class="flex-around gnb">
      <a href="/">Home</a>
      <a href="/html">HTML</a>
    </nav>
  </header>
  <aside class="flex-center ad">
    <a href="/content1">contents1</a>
    <a href="/content2">contents2</a>
  </aside>
  <section class="about-semantic">
    <h1>Semantic 태그란?</h1>
    <p>semantic 태그는 의미론적 태그라는 뜻으로...</p>
  </section>
  ...
</body>

아까보다 어떤 구역이 어떤 역할을 하는지, 심지어 어디쯤 들어갈지 까지도 훨 씬 더 잘 보이는게 느껴지실 거에요.

가독성 좋고, 웹 표준을 지키는 좋은 웹문서를 만들고 싶다면 상황에 맞는 semantic tag를 적극적으로 사용하는 것이 중요합니다.

그 외에도 시멘틱 태그는 단순히 가독성 뿐만 아니라 SEO에 영향을 준답니다.

검색엔진은 시멘틱 태그를 사용한 페이지에 더 높은 점수를 줍니다. 따라서 사이트가 더 많이 노출 될 수 있겠죠?

semantic tag가 더 궁금하신 분들은 아래의 링크를 참고하세요 :)

참고 링크 :
TCP school - http://tcpschool.com/html/html5_element_semantic
w3school - https://www.w3schools.com/html/html5_semantic_elements.asp

* 오류 지적은 언제나 환영합니다 :D

'웹 기본' 카테고리의 다른 글

4. CSS - 중급 (Inline vs Block) (0)	2022.07.17
3. CSS - 입문 (0)	2022.07.17
2. HTML - 입문 (0)	2022.07.17
1. Web이란? (0)	2022.07.17
0. 웹 공부 로드맵 (0)	2021.11.24

개발자로 한걸음

5. HTML - 중급 (Semantic Tag)