[CSS] semantic web과 semantic Tags이해 /<img> 태그 <div> 태그에 background-image 속성 차이점

⚡️시맨틱 웹(Semantic Web) 이란?

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

시맨틱 웹은 개발자가 의도한 요소의 의미가 명확히 드러나게 작성하는 방법이자 방식입니다. 이 방법은 코드의 가독성을 높이며 유지보수를 높일 수 있습니다. 

 

⚡️시맨틱 웹의 목적과 사용 이유

  시맨틱 웹이 등장한 이유와 같이 웹상의 검색엔진의 최적화를 위해서 입니다. 우리는 현재 구글, 네이버 등과 같은 검색 사이트를 이용합니다. 그리고 이 검색 사이트들은 어떤 웹 사이트를 검색하기 위해 검색엔진을 사용합니다. 우리 개발자들은 프로덕트를 만들게 되면 사용자들의 검색어에 많은 노출을 할 수 있어야 하게 때문에 검색엔진 최적화(SEO: Search Engine Optimization)를 고려해줘야 합니다. 따라서 검색엔진에 잘 노출 되려면 시멘틱 웹을 따라야한다는 뜻이기도 합니다!

 

 

 예를 들어 단순히 제목을

<div class="title">제목입니다</div>

처럼 작성하는 것 보다

<h1 class="title">제목입니다</div>

 

시맨틱으로 작성했을 때 태그만 보고도 '이건 제목이구나!'라고 바로 알 수 있습니다. 또한, 검색엔진은 대체로 h1 요소 내의 콘텐츠를 웹문서의 중요한 제목으로 인식하고 인덱스에 포함시킬 확률이 높습니다. 또한 h1 요소 내의 콘텐츠가 제목임을 알 수 있습니다. 이 처럼 의미를 가진 HTML 요소 작성 방식(즉, Semantic Web)은 SEO에 기여할 수 있는 좋은 방법입니다.

 

⚡️HTML 요소는 non-semantic 요소와 semantic 요소로 구분

1. none-semantic 요소  div, span 등이 있으며 이들 태그는 content에 대하여 어떤 설명도 하지 않습니다.
2. semantic 요소  for, table, img, h1 등이 있으며 이들 태그는 content의 의미를 명확히 설명합니다.

1. header - 하나 이상의 제목요소, 로그 등
2. nav - 메뉴, 탐색 링크 집합을 정의
3. section - 본문의 여러 내용(article)을 포함하는 공간을 의미한다
4. article - 분문의 주내용이 들어가는 공간을 의미한다
5. aside - 사이드에 위치하는 공간을 의미한다(간접적으로 정의)
6. footer - 바닥글(저작권, 연락처 정보, 사이트캡, 맨위 링크로 돌아가기)

---

⚡️img & background-image

<img>

1. 경고 아이콘과 같이 이미지에 중요한 의미가 있을 경우 사용
2. 콘텐츠용으로 사람을 참조하거나 설명하기 위해 사용(기사, 회사로그)
3. 클릭 가능한 영역과 힌트가 있는 지도를 가질 수 있다.
4. 이미지에 alt속성과 title속성을 모두 추가 가능.
5. 이미지가 유동적이고 다양한 화면크기로 조정되도록 하려면 img태그를 사용

 

<background-image>

1. 이미지가 콘텐츠의 일부가 아닌 경우 css background-imaged를 사용한다.
2. 콘텐츠와 상관없이 순수하게 디자인에 사용된 이미지
3. 문서와 별개로 스타일링목적으로 배경이미지로 사용될때 문서의 일부분이 아닌경우
4. 배경에서 애니메이이션의 성능을 크게 향상시킬수 있다