시맨틱 태그 기초 지식 알아보기

시맨틱 태그란?

시맨틱 태그란 웹사이트들이 정보를 저장하고 구조화하기 위해 사용하는 메타데이터의 한 형태입니다. 즉, 컴퓨터가 이해할 수 있는 의미를 가진 데이터라고 보시면 되는데요. 예를 들면 우리가 어떤 물건을 찾을 때 네이버나 구글 같은 검색엔진 사이트에서 특정 키워드를 입력하면 해당 단어가 들어간 문서들을 모두 찾아주는 것처럼 말이죠. 이 과정에서 사람이 일일이 모든 글을 읽어보고 분류하는 것이 아니라 기계가 스스로 학습해서 원하는 정보를 추출하게 됩니다. 이렇게 되면 시간과 노력이 많이 절약되겠죠?

시맨틱 태그라는 용어가 너무 어려운데 쉽게 설명해주실 수 있나요?

쉽게 말해 사람들이 검색할 때 원하는 정보를 좀 더 정확하고 빠르게 찾을 수 있도록 도와주는 역할을 한다. 예를 들어 네이버에서 '서울 맛집'이라는 단어를 검색하면 다양한 지역별 맛집 리스트가 나온다. 이때 서울 맛집이라고 쓰인 부분이 바로 시맨틱 태그다. 이처럼 시맨틱 태그는 사용자에게 필요한 정보를 보다 효율적으로 제공한다. 하지만 모든 경우에 유용하게 쓰이는 것은 아니다. 같은 주제라도 어떤 사이트냐에 따라 적절한 시맨틱 태그가 다르기 때문이다. 따라서 자신이 운영하는 홈페이지 성격에 맞는 시맨틱 태그를 선택하는 것이 중요하다. 이를테면 여행사 홈페이지에서는 항공권 예약 및 발권 관련 서비스를 제공하므로 여기에 알맞은 시맨틱 태그를 적용해야 한다. 만약 잘못된 시맨틱 태그를 입력한다면 방문자는 원하는 정보를 얻지 못하고 오히려 혼란스러워 할 것이다.

HTML에서의 시맨틱 태그

HTML5는 차세대 웹 표준으로 각광받고 있는 기술이다. 특히 기존 텍스트 위주의 문서에서 벗어나 멀티미디어와 인터랙티브 요소를 강조하는 방향으로 발전하고 있다. 이 중에서도 가장 주목받는 부분은 바로 시맨틱 태그다. 시맨틱 태그란, 의미론적 마크업 언어인 HTML로 만들어진 문서들이 보다 높은 수준의 정보 검색을 가능하게 해주는 기능들을 말한다. 예를 들어 <header>태그는 제목이나 로고 등 홈페이지 전체의 헤더 영역을 정의한다. <nav>태그는 내비게이션 메뉴를 설정할 때 사용된다. 또한 <article>태그는 본문 콘텐츠를 담고 있으며, <aside>태그는 사이드바 같은 특정 구역을 지정할 때 사용된다. 이렇듯 각 태그마다 고유의 목적과 역할이 존재하기 때문에 이를 잘 활용하면 좀 더 효율적으로 사이트를 제작할 수 있다.

-<h1>~<h6>태그는 어떤 의미인가요?
제목을 나타내는 태그인 h1 ~ h6 은 각각 글자 크기별로 제목을 나타냅니다. <h1> - 1단계크기 <h2> - 2단계크기 <h3> - 3단계크기 <h4> - 4단계크기 <h5> - 5단계크기 <h6> - 6단계크기

-<p> 와 <br> 의 차이는 무엇인가요?
<p> 는 단락을 구분짓는 태그이고, <br> 은 줄바꿈을 하는 태그입니다. 두 태그 모두 한줄 띄우기 용도로 사용됩니다.

-<img src=""> 에 대해 자세히 알려주세요.
이미지를 삽입하기 위한 태그이며, 이미지 경로를 지정하면 됩니다. "" 사이에 원하는 이미지 주소를 넣으면 되고, 이때 주의해야할 점은 절대경로 혹은 상대경로 중 하나로 설정해야한다는 점입니다.

-<a href=""> 링크 거는 방법 좀 알려주세요.
링크를 걸때 쓰는 태그로서, a 태그안에 넣고싶은 문구를 넣어주면 됩니다. 예를들어 <a href="#a"> 을 입력하면 id=a인 구역으로 이동하게 됩니다. 또한 <a href="https://examplesite.com">을 입력하면 해당 사이트로 이동하게 됩니다.

-<table> 과 <tr> , <td> 가 뭔가요?
테이블을 구성하는 태그로써, 테이블 구조를 만들어줍니다. tr 은 행(row) td 는 열(column) 입니다.

-<th> 와 <caption> 태그는 어떻게 쓰나요?
해당 부분에만 글씨를 굵게 표시하거나 강조표시를 하고싶을 때 사용하는 태그입니다. th 태그 내에 css 를 이용해서 폰트 색상 등을 변경할 수 있습니다.

-<div> 와 <span> 태그는 무슨 차이가 있나요?
특정 영역을 묶거나 나눌때 사용하는 태그입니다. div 로 묶은 후 span 으로 감싸면 특정 영역만큼만 출력되게 됩니다.

-<footer> 와 <address> 태그는 어디에 쓰이는건가요?
보통 회사소개나 고객센터 같은 페이지 하단에 들어가는 내용들을 담는 태그입니다. footer 에는 주로 저작권 관련 정보등을 넣으며 address 에는 연락처 및 이메일주소 등을 넣습니다.

-<hr> 태그는 언제 써야하나요?
가로선을 긋고 싶을때 사용하는 태그입니다. 가로선 뿐만 아니라 세로선도 그을 수 있으며, 수평선/수직선 여부 또한 선택가능합니다.

-<blockquote> 와 <q> 태그는 뭐가 다른가요?
다른 사람의 글을 인용할때 사용하는 태그입니다. blockquote 는 들여쓰기가 되어있고, q 는 들여쓰기가 되지 않습니다.

-<strong> 과 <em> 태그는 어떨때 쓰면 되나요?
강조하고 싶은 단어 앞에 strong 태그를 쓰고, 약하게 표현하고 싶은 단어 앞에 em 태그를 씁니다.