[HTML/CSS] Semantic Web과 Semantic Tag

Inah-_-·2021년 2월 15일
0

HTML/CSS

목록 보기
4/6
post-thumbnail

# 사이트에 이미지를 넣는 2가지 방법🐶🐱


1. <img>태그 사용

<div>
	<img src="" alt="">
</div>

2. <div> 태그에 CSS 속성 추가

<div class="js_img"></div>
.js_img {
width:300px;
height:300px;
background-size:100%;
background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/1280px-HTML5_logo_and_wordmark.svg.png");
}

"두 방법의 좋은 쓰임새, 차이점을 설명해보세요"

라는 질문을 받았을 때, 막힘없이 설명할 수 있을까?🤔
실제 면접시에 자주 다루게 되는 질문으로, 이를 설명하기 위해서는
Semantic Elements, Semantic WebSemantic Tag에 대한 이해가 있어야 한다.



# Semantic Web('의미론적인 웹')이란?

기존 의미없는 데이터 집합이었던 웹페이지에 '의미'와 '관련성'을 부여하여 각각의 문서의 의미에 맞게, 어플리케이션의 의미와 관련되게 구성하는 웹이다. 웹사이트 사용자에게 동일하게 보이는 태그를 컴퓨터가 의미를 이해하고 처리할 수 있게 도와주는 프레임워크이자 기술이다.



# Semantic Tag

기존에 form, table, img, picture 등이 있으며,
content의 의미를 명확히 설명해준다.

# non-semeantic?

div, span등이 있으며 태그에 아무런 의미와 설명이 없다.

의미없는 태그 예시

<html>
<body>
	<div>
    		<b style="font-size:60px;">Hello World!<b/> Hello wecode!
	<div>
</body>
</html>

컴퓨터는 위의 코드를 div내에 있는 글자 중 Hello World!<b> 태그로 감싸 글씨에 bold 효과만 주는 것으로 인식할 것이다.

의미를 부여하는 Semantic Tag 예시

<html>
<body>
	<haeder>
    		<h1>Hello World Wecode!
        		<img src="wecode.png" alt="wecode_img">
        	<h1/>
	</haeder>
</body>
</html> 

컴퓨터는 위의 코드를 <header> = 머리말 내 웹사이트의 가장 큰 제목은 Hello World Wecode!이고, Wecode.pngwecode의 이미지라는 걸 인식할 수 있을 것이다.



HTML5 Semantic Elements

HTML5에서 생긴 HTML 권장 태그 요소

<haeder> = html내 머리말 영역
<nav> = html내 내비게이션 메뉴 영역
<article> = html내 기사 영역
<section> = html내 부분 영역
<aside> = html내 왼쪽 혹은 오른쪽 영역
<footer> = html내 하단 영역

<audio> = 웹 브라우저에서 음악을 재생하는 요소

Semantic Tag를 사용한 html 작성

<html>
<body>
  <nav>
    <ul>
      <li></li>
      <li></li>
    </ul>
  </nav>
  <section>
    <article>
      <h2>제목</h2>
      <p>내용</p>
    </article>
    <article>
      <h2>제목</h2>
      <p>내용</p>
    </article>
  </section>  
  <aside>
    <section>
      <p></p>
    </section>
  </aside>  
  <footer>
    <address></address>
    <p><a></a></p>
  </footer>
</body>
</html>



# Semantic Web을 지향해야 하는 또 다른 이유

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


검색 엔진은 로봇(Robot)이 웹사이트의 정보를 수집하는데, 이를 '크롤링'이라고 하며, 검색 엔진의 크롤러가 이를 수행한다. 구글과 네이버 등의 브라우저에서 검색 품질을 고도화 하기 위해 웹사이트의 개발자 혹은 운영자에게 웹문서 최적화의 기초와 최적화를 돕는 서비스를 제공한다.

'검색 엔진 최적화'의 목적은 개발자들과의 협업, 유지보수도 있지만 '검색 엔진 최적화'를 넘은 기업의 '홍보'와 직결되어 있다는 점이 재미있다.

열심히 제작된 기업의 웹페이지가 검색 엔진에서 제대로 검색되지 못한다면 아무 소용이 없는 것이다.

이러한 검색 엔진 최적화는 '웹문서'의 영향이 큰데,
1. 문법과 Semantic을 고려하여 HTML 작성
2. 제목 = hn과 내용의 연관성
3. meta 태그 활용
4. img 태그에 alt 속성 기재

결국 Semantic Web = 좋은 페이지를 넘어 기업에 '홍보'와 '매출'에 직결될 수 있는 것이다.



# <img>태그와 background-image의 차이점

먼저 사용자는 <img>태그와 cssbackground-image를 불러오는 것의 차이를 웹 페이지상의 화면으로 구분하지 못한다.

그러나 앞서 설명한 '검색 엔진 최적화'의 html 문서 영향력을 보면,
검색 엔진이 인식하기에 <img> 태그에 alt속성을 기재하여 이미지에 대해 부가적 설명을 담아 활용하는 것이 적극적인 Semantic Web 지향을 보여준다.

'background-image'는 검색 엔진이 content의 의미를 해석하지 못할 뿐 아니라 검색 엔진 최적화에도 전혀 도움이 되지 않는다. 게다가 개발자와의 협업과 유지보수에도 좋지 않다.



그동안 HTML을 작성할 때, Semantic을 고려하지 않고
div 혹은 span을 남발하였는데,
앞으로는 아까 작성한 '기업'이 '나'라고 생각하고
웹문서를 작성해야겠다.

profile
Backend Developer

0개의 댓글