Sementic Tag란 무엇일까?
HTML 작성 및 위해서 꼭 알아야 하는 Semantic 기능을 알아보자.
- 개념: 'Semantic'의 사전적인 의미는 '의미론의'라는 형용사이다. 즉 의미가 있는 태그를 뜻한다.
예시) 페이지의 구조를 나눌 때 주로 사용하던 태그인 <div> 태그는 이것만으로 어디를 분리하려고 한 것인지는 알 수가 없음. 하지만 <footer>라는 태그는 어떨까? 시멘틱 태그를 처음 접하는 사람이라도 이것은 발이라는 영어단를 통해 아래에 위치하는 태그일 것이란 것을 쉽게 유추해볼 수 있다. - Semantic 태그를 사용하는 가장 큰 이유는 아래의 두 가지 이유 떄문이다.
- 검색사이트에서 사이트의 정보를 쉽게 크롤링하기 위해서.
- 개발자의 코드 가독성을 높이기 위해서. (이름을 통해 각 태그의 위치를 유추해볼 수 있음)
시맨틱 태그의 종류
-
<header>, <nav>, <article>, <section>, <aside>, <footer>; 모두 <body>, </body> 사이에 위치한 이 여섯가지는 기본적으로 무조건 알고 가야 하는 태그들이다.
-
각 태그의 페이지 구조 나타낸 것 찾아보기.
-
각 Sementic Tag의 의미:
<header>: 페이지 상단에 위치하며 로고, 타이틀, 메뉴, 검색 등의 요소가 여기에 속한다.
<footer>: 페이지 하단에 위치하며 주로 copyright 주소, 서브메뉴 등의 요소가 여기에 속한다.
<nav>: 메뉴를 나타낸다, 메뉴의 종류에 따라 여러곳에 위치할 수 있다.
<article>: 하나의 주제를 포함하여 독립적으로 존재할 수 있는 요소이다. 즉 한 페이지에 하나만 존재하는 것이 이상적이다.
<section>: 논리적으로 연관성이 있는 요소를 분리할 떄 사용.
<aside>: 핵심적인 내용이 아닌 요소를 분히라 때 사용, 예를 들어 광고, 사이트, 키워드 모음 등. 이중에서 article과 section이 좀 난해 할 수 있다.<article>과 <section> 개념 차이:
예시) 스포츠 용품 판매 사이트, "상품"메뉴가 있고 이 메뉴를 클릭해서 들어가면, 상품과 관련된 내용만 있다. 이런 경우에 전체를 감싸는 태그가 바로 article임. 그리고 그 aritcle안에는 운동화, 운동복, 축구공을 소개하려고 할 때 이 상품을 각각 section 으로 분리해주는 것임. 운동화, 운동복, 축구공은 상품이라는 논리적 연관성은 있으나 제품이 다르기 때문에 분리해주는 것이다.<heading Tag>:
h1 에서 h6 까지의 6개 태그를 말하며 <h1>은 페이지당 1개씩 반드시 사용해야함. 왜냐하면 일반적으로 크롤링할 때 페이지의 내용 중 주제를 파악하기위해 h1 태그를 확인하기 때문이다. 물론 meta 태그에도 많은 정보가 들어가지만 내용중에는 h1을 제일 중요시 한다.
*이 밖에도 address 이름만 봐도 내용이 무엇인지 알 수 있는 태그를 시맨틱 태그라고 칭함.이미지 삽입 방법에 대한 고찰: 'img 태그' vs 'div 태그 background-image'
-
개요: HTML을 이용하여 이미지를 삽입하는 방법에는 크게 두 가지 방법이 있다. 바로 img 태그를 사용하는 것이고 다른 하나는 div 태그를 사용하는 것이다.
-
이미지 태그를 사용해야만 할 때:
1) 내가 작성한 페이지를 사용자가 프린트할 때 기본값으로 해당 이미지가 포함되어있게 하고 싶다면 사용할 것.
2) 이미지가 경고, 주의를 주는 등의 중요한 의미적 기능을 지녀야한다면, 이미지 태그를 사용해야함. 이로써 개발자-유저간 뿐만아니라 개발자-개발자 사이의 원활한 커뮤니케이션을 가능케하며 해당 이미지가 지닌 중요한 정보들을 알 수 있음.
3) 이미지가 너무 작지 않을 때.
4) alt 와 title 속성이 추가 가능할 때. -
이미지 태그 사용하면 유용한 상황:
1) 이미지가 로고나 도표, 인물 사진 등의 컨텐츠에 일부분으로 포함된다면 이미지 태그나 다른 태그 속성을 사용해야함.
2) 웹브라우저 스케일링 기능에 이미지-텍스트 크기를 의존해야 하는 상황.
3) background-image 대신 이미지 태그를 붙여 쓰는 것이 배경화면 위에서 애니매이션 동작을 수행하는데 극적인 성능 향상을 가져다줌.
-
Background-image를 쓰면 좋은 상황:
1) 이미지가 그 어떠한 컨텐츠에 포함되어 있지 않는다면 background-image 를 써도 좋음
2) 사람들이 해당 페이지를 출력할 때,
3) 반복된 이미지를 사용할 때.
Sementic Web에 대한 고찰
-
대부분의 인터넷 사용자는 원하는 정보를 취득하기 위해 Google이나 Naver와 같은 검색사이트를 이용한다.
검색엔진은 특정 프로그램을 이용해 매일 전세계의 웹사이트 정보를 크롤링하며 내부 데이터를 수집한다. 그리고 검색 사이트 이용자가 검색할 만한 키워드를 미리 예상하여 검색 키워드에 대응하는 지표를 심어놓는다. -
즉, 위 언급한 정보검색 프로그램이 데이터를 찾기위해 검색하는 것이 바로 웹사이트의 HTML 코드이다. 검색 엔진은 HTML 코드 만으로 그 의미를 인지하여야 하는데 이때 시맨틱 요소(Semantic element)를 해석하게 된다.
-
HTML으로 작성된 문서는 컴퓨터가 해석할 수 있는 메타데이터와 사람이 사용하는 일반 문자가 혼용되어있다. 시맨틱 요소로 구성되어 있는 웹페이지는 검색엔진에 보다 의미론적으로 문서 정보를 전달할 수 있고 검색엔진 또한 시맨틱 요소를 이용하여 보다 효과적인 크롤링과 인덱싱이 가능해졌다. 즉, 시맨틱 태그란 브라우저, 검색엔진, 개발자 모두에게 콘텐츠의 의미를 명확히 설명하는 역할을 한다. 시맨틱 태그에 의해 컴퓨터가 HTML 요소의 의미를 보다 명확히 해석하고 그 데이터를 활용할 수 있는 시맨틱 웹이 실현될 수 있다.
-
즉, 시맨틱 웹이란 웹에 존재하는 기존의 잡다한 데이터 집합이었던 웹페이지를 ‘의미’와 ‘관련성’을 가지는 거대한 데이터베이스로 구축하고자 하는 발상이다.
