[HTML] 시맨틱 태그(Semantic tag) & 메타 태그(meta tag)

bruney·2021년 8월 24일

HTML

목록 보기

1/1

들어가기

HTML5이 큰 특징 중 하나인 시맨틱 태그를 알아보자

시맨틱 요소는 자신의 의미를 브라우저와 개발자 모두에게 명확하게 설명해준다.

검색엔진이 HTML을 분석할 때 정확하게 컨텐츠를 식별하기 위해 정한 규약입니다.

인덱싱

검색 사이트 이용자가 검색할 만한 키워드를 미리 예상하여 검색 키워드에 대응하는 인덱스(색인)을 만드는 것.

인덱스를 생성할 때 사용되는 정보는 검색 로봇이 수집한 정보인데 결국 웹사이트의 HTML코드입니다.
즉, 검색 엔진은 HTML코드만으로 그 의미를 인지하여야 하는데 이때 시맨틱 요소를 해석하게 됩니다.

시맨틱 태그란?

브라우저, 검색엔진, 개발자 모두에게 컨텐츠의 의미를 명확히 설명하는 역할을 합니다.

기존 <div>태그는 id나 class속성으로 개발자별 각각 이름을 지정하였기 때문에 검색엔진이 html파일을 분석할 때 정확한 컨텐츠를 식별하기 어려웠습니다. 하지만 HTML5에서는 검색엔진에게 의미론적으로 중요한 부분과 덜 중요한 부분을 파악할 수 있게 해주며 효율적인 검색을 하도록 만듭니다.
시맨틱 태그에 의해 컴퓨터가 HTML 요소의 의미를 보다 명확히 해석하고 그 데이터를 활용할 수 있는 시맨틱 웹이 실현될 수 있습니다.

시맨틱 웹이란 웹에 존재하는 수많은 웹페이지들에 메타데이터를 부여하여, 기존의 잡다한 데이터 집단이였던 웹페이지를 '의미'와 '관련성'을 가지는 거대한 데이터베이스로 구축하고자 하는 발상입니다.

이렇게 쉽게 검색이 되는 문서를 만들수록 검색엔진에는 쉽게 노출됩니다.

HTML요소

HTML요소는 non-semantic, semantic요소로 구분됩니다.

non-semantic : div, span 등 ... content에 대해 어떤 설명도 하지 않는다.
semantic : form, table, img 등 ... content의 의미를 명확히 설명한다.

일반적으로 <div> 태그만 보고는 이 태그 안에 들어갈 내용의 의미를 알 수가 없다. 하지만 <form>, <table>, <img> 등의 태그는 대략 그 태그 안에 들어갈 내용을 유추할 수 있습니다. 이것이 non-semantic과 semantic의 차이입니다.

non-semantic : <div class = "header">
semantic : <header>

새롭게 추가된 시맨틱 태그(HTML5)

이 그림처럼 시맨틱 태그를 사용하면 사이트의 레이아웃을 의미론적으로 구성하고 이해할 수 있습니다.

tag description
header 화면 상단에 위치하는 사이트나 문서의 정보를 정의
nav 문서의 네비게이션 항목을 정의
aside 페이지의 주요 내용 외의 내용을 정의한다.
페이지의 주요 내용 주변(사이드 바)에 위치하여 관련된 내용을 배치할 수 있다.
예) 광고
section 본문의 여러 내용(article)을 포함하는 공간
article 본문의 주 내용이 들어가는 공간.
section 내에서 하나의 기사를 article 태그로 감쌀 수 있다.
article 내에서도 section 태그가 있을 수 있다.
footer 화면 하단에 위치하는 사이트나 문서의 정보를 정의
details 사용자가 보거나 숨길 수 있는 추가적인 세부정보를 정의
summary details에 대한 보이는 요소를 정의
figcaption figure에 대한 자막 정의
figure 사진이나 다이어그램과 같은 부가적인 요소를 정의
main 문서의 주가 되는 컨텐츠를 정의
mark 참조나 하이라이트 표시를 필요로 하는 문자를 정의
time 날짜/시간 정의

tag	description
header	화면 상단에 위치하는 사이트나 문서의 정보를 정의
nav	문서의 네비게이션 항목을 정의
aside	페이지의 주요 내용 외의 내용을 정의한다. 페이지의 주요 내용 주변(사이드 바)에 위치하여 관련된 내용을 배치할 수 있다. 예) 광고
section	본문의 여러 내용(article)을 포함하는 공간
article	본문의 주 내용이 들어가는 공간. section 내에서 하나의 기사를 article 태그로 감쌀 수 있다. article 내에서도 section 태그가 있을 수 있다.
footer	화면 하단에 위치하는 사이트나 문서의 정보를 정의
details	사용자가 보거나 숨길 수 있는 추가적인 세부정보를 정의
summary	details에 대한 보이는 요소를 정의
figcaption	figure에 대한 자막 정의
figure	사진이나 다이어그램과 같은 부가적인 요소를 정의
main	문서의 주가 되는 컨텐츠를 정의
mark	참조나 하이라이트 표시를 필요로 하는 문자를 정의
time	날짜/시간 정의

시맨틱 구조 태그 사용법

header

<header>는 보통 홈페이지의 상단의 홈페이지 로고나 메인메뉴를 담고 있습니다.

<header>는 <h1>~<h6>사이의 하나의 제목을 반드시 가지고 있어야 합니다.

보통 로고를 <h1>태그에 담기 때문에 대부분 사이트들이 제목을 갖고 있습니다.

<header> 내부에는 또다른 <header>나 <footer>, <address>태그등을 담을 수 없습니다.
<header>
	<h1>로고</h1>
    ...
</header>

footer

<footer>는 보통 문서의 바닥글을 나타냅니다.

일반적으로 <footer>에 포함되는 내용은 저작권정보, 연락정보, 사이트맵 등이 있습니다.

<footer>는 하나의 페이지에 여러번 작성할 순 있으나 권장하지는 않습니다.
<footer>
	<nav class="sitemap">
    ...
    </nav>
    <p>Copyright © 2020 XXX. All rights reserved.</p>
</footer>

section

문서의 일부분을 정의 합니다.

W3C에 따르면 section태그는 일반적으로 제목이 있는 주제별 콘텐츠 그룹이라고 설명합니다.

<h2>~<h6>사이의 태그 중 한개가 꼭 있는 것을 권장합니다.

실제 사이트에서는 section으로 사용해도 되는 파트를 아직 div로 많이 쓰고 있습니다.

하지만 div가 의미가 없는 태그이므로 의미있게 사용해야하는 구역은 section으로 사용하는 것이 좋을 것 같습니다.
<section>
	<h3>공지사항</h3>
    ...
</section>

article

컨텐츠나 내용이 독립적인 것을 포함하는 경우 사용하는 묶음 태그입니다.

웹사이트와는 독립적으로 내용에 의미가 있는 것을 묶을 때 사용합니다.

예시로는 포럼게시물, 블로그포스트, 신문기사 등을 예시로 들 수 있습니다.

<article>
	<h4>"류현진, 계약 전 광고처럼 효과적" 캐나다 매체 칭찬</h4>
    ...
</acticle>

nav

nav태그는 탐색 링크의 집합을 정의하는 태그입니다.

특히 메인메뉴같은 경우는 꼭 사용하기를 권장합니다.

스크린리더가 이 요소를 사용하여 콘텐츠를 초기 렌더링을 생략할지 여부를 결정할 수 있기 때문입니다.
<nav>
	<ul>
    	<li><a href="#">링크텍스트1</a></li>
        <li><a href="#">링크텍스트2</a></li>
        <li><a href="#">링크텍스트3</a></li>
    </ul>
</nav>

aside

중요한 내부 콘텐츠를 제외한 외곽의 콘텐츠를 표시할 때 사용하는 요소입니다.

예를 들어 퀵메뉴나 스크롤탑버튼 같은 곳에 사용하면 좋습니다.
<aside>
	<h4>최근 본 메뉴</h4>
    ...
</aside>

figure과 figcaption

figure는 그림, 도표, 사진 같은 태그를 지정할 때 묶는 태그입니다.

figcaption은 그에 대한 캡션(제목이나 설명)을 설명하는 요소입니다.
<figure>
	<img src="https://imgnews.pstatic.net/image/477/2020/08/29/0000260739_001_20200829180036873.jpg?type=w647" alt="류현진 사진">
    <figcaption>마운드에서 공을 던지는 류현진 선수</figcation>
</figure>

메타 태그

메타 태그는 웹 페이지의 보이지 않는 정보를 제공하는데 쓰입니다. 페이지에 대한 설명, 제작자, 크롤링 정책 등의 정보를 제공할 수 있다.

SEO(Search Engine Optimization)

메타태그를 이용해 description, keywords, author, subject, classification 등의 정보를 표기할 수 있으며, 검색엔진은 이런 정보를 적극적으로 활용합니다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="apple banna">
    <meta name="desciption" content="나의 블로그">
    <meta name="robot" content="noindex nofollow">
    <meta property="og:type" content="website">
    <meta property="og:title" content="페이지 제목">
    <meta property="og:description" content="페이지 설명">
    <meta property="og:image" content="http://www.mysite.com/myimage.jpg">
    <meta property="og:url" content="http://www.mysite.com">

https://junhobaik.github.io/meta-tag/

<meta charset="utf-8"> : HTML5의 인코딩 지정 방법으로 보통 UTF-8을 값으로 지정하는 편입니다.
<meta name="viewport" content="width=device-width, initial-scale=1"> : 뷰포트는 화면에 보이는 영역을 뜻합니다. 즉, 내가 보고 있는 모니터 화면 영역을 말하며, 스크롤로 봐야할 영역은 제외합니다. 위 코드는 문서의 넓이는 기기의 넓이이며, 초기 하면 배율은 1로 한다는 의미입니다.
<meta name="keywords" content="apple banna"> : 해당 컨텐츠의 대표적인 키워드를 지정합니다. 검색 엔진의 검색 결과에 반영될 수 있습니다.(구글은 반영X)
<meta name="desciption" content="나의 블로그"> : 해당 페이지에 대한 설명을 설정합니다. 검색사이트에서 검색했을 때 제목 아래에 노출되는 부분입니다.
<meta name="author" content="dongyong"> : 웹 사이트의 소유자를 적습니다.
<meta name="robot" content="noindex nofollow"> : 인덱싱을 제어하는데 사용되며, 사용가능한 content는 index, noindex, follow, nofollow가 있습니다.
index와 noindex는 페이지의 인덱스 여부를 말해주며, follow, nofollow는 페이지내의 링크를 크롤러가 따라갈 수 있는지 여부를 말해준다.

검색엔진이 검색 키워드에 대한 검색결과를 사용자한테 제공하기 위해서는 크롤러가 끊임없이 온라인 상의 문서를 수집해야하고, 크롤러가 수집한 문서를 인덱서가 잘 정리해서 인덱스 서버에 색인해 둬야 합니다.
크롤러는 사이트와 사이트 사이의 링크를 타고다니며 문서를 수집하는 역할만 하며, 인덱서는 수집된 문서를 검색엔진이 사용자에게 결과물을 빠르고 쉽게 재공할 수 있도록 색인 또는 인덱스 역할을 합니다.

bruney

Detail makes difference.