HTML | Semantic Web과 Semantic Tag

Semantic Web 의미론적 웹

그냥 데이터가 아닌 정보로써 의미가 있는 웹이라는 개념이다. 웹페이지들에 메타데이터를 부여해서 웹을 하나의 거대한 데이터베이스로 구축한다는 발상이다. 시멘틱 웹의 목표는 인터넷 데이터를 기계가 읽을 수 있게 하는 것이다.

시멘틱 태그로 웹을 구성하는 요소에 의미를 더해서 시멘틱 웹을 실현할 수 있다.

Semantic Tag

시멘틱 웹을 만들기 위한 태그들

<div>나 <span>같은 디자인적인 기능만 있는 요소와 구별해서 사용한다

<header>
	<h1>제목</h1>
</header>

이 코드에서 <header>태그는 어떤 기능이 있는 것은 아니지만

해당 웹 페이지를 대표하는 제목이라는 의미를 가지고 있다.

 

시멘틱 태그를 적절히 이용한 웹 페이지의 예시

 

시멘틱 태그를 의미에 맞게 잘 사용하면 코드의 구조화에 도움이 된다.

코드만 보고 해당 부분이 어떤 역할을 하는지 알수있기 때문에 데이터의 공유와 재사용을 가능하게한다.

검색 엔진도 시멘틱 마크업을 키워드로 해서 결과를 보여주기 때문에 검색 최적화에 도움이 된다.

장애가 있는 사람들이 화면 판독기 등을 이용해 페이지를 탐색할 때 의미론적 마크업 중심으로 페이지를 탐색해 정보 전달에 도움이 될 수 있다.

 

시멘틱 웹을 고려한 이미지 삽입

이미지를 화면에 넣는 방법 두 가지가 있다

 <img> 태그를 사용하는 것과 <div> 태그에 background-image 속성을 추가하는 것.

.bg-img {
  background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/1280px-HTML5_logo_and_wordmark.svg.png");
  height: 300px;
  width: 300px;
  background-size: 100%;
  }
/* 
<div> 태그에 css속성을 추가해서 이미지를 배경으로 넣으면 이미지는 원래 크기를 유지하면서 div안의 내용물크기만큼 짤려서 보이게 된다.
div의 넓이 높이값을 변경해도 이미지는 원본 크기를 유지하고 이미지가 보이는 영역만 변한다.
그래서 이미지를 div영역 안에 맞게 채워서 표시하기 위해 background-size: 100%;을 해서 
300px * 300px크기로 보여지도록 했다.
*/

div img{ width: 300px; }
/* <img>태그를 이용해서 이미지를 넣고 가로 길이를 지정하면 원래 이미지 비율에 맞춰 높이도 자동적으로 조절된다. */

<!-- <div> 태그에 background-image 속성 추가 -->
<div class="bg-img"></div>   

<!-- <img>태그 사용 -->
<div>
   <img src="https://www.w3schools.com/whatis/img_js.png" width="100%">
</div>

위의 방법은 <div>태그로 이미지의 영역을 지정하고 그 영역의 배경으로 이미지를 넣은 것이다.

아래는 <img>태그를 이용해서 이미지를 직접 넣었다. 

그리고 이미지가 보여지는 크기를 조정해서 둘다 화면에 보이는 결과는 같게 만들었다. 

하지만 둘이 의미적으로 같지는 않다.

 

<div>태그는 의미가 없이 화면의 공간 분할을 위해서 쓰는 태그이다

<img>태그는 이미지라는 정보가 들어 있다. alt 속성을 이용하면 이미지가 로딩되지 않는 경우에 대비해서 설명을 띄울 수도 있다. 

 

이미지가 그 자체로 어떤 정보를 나타내는 것이라면 <img>태그를 쓰고

디자인으로써 배경이미지의 역할만 한다면 <div>태그를 이용해 배경으로 넣는 것이 시멘틱 웹을 실현하기에 알맞을 것이다.

 

참고

https://poiemaweb.com/html5-semantic-web#:~:text=%EC%8B%9C%EB%A7%A8%ED%8B%B1%20%EC%9B%B9%EC%9D%B4%EB%9E%80%20%EC%9B%B9%EC%97%90,%EA%B5%AC%EC%B6%95%ED%95%98%EA%B3%A0%EC%9E%90%20%ED%95%98%EB%8A%94%20%EB%B0%9C%EC%83%81%EC%9D%B4%EB%8B%A4.

https://en.wikipedia.org/wiki/Semantic_Web

https://developer.mozilla.org/ko/docs/Glossary/Semantics

https://www.w3schools.com/html/html5_semantic_elements.asp

https://youtu.be/uDmNhHYecL4