Semantic Web
코드의 가독성을 높이며 유지보수를 쉽게 할 수 있게 해준다 기계가 사람을 대신해서 웹 페이지의 정보를 이해하여 필요한 정보만 보여주는 것을 말한다.
웹에 존재하는 많은 웹페이지들에게 메타데이터를 부여해서 다양하고 잡다한 웹페이지를 관련정보들로 데이터 베이스를 구축하는 것이다.
**example:
<div id="footer"></div> => <footer></footer>
HTML 요소는 non-semantic 요소, semantic 요소로 구분할 수 있다.
non-semantic 요소
div, span 등으로 이 태그들은 콘텐츠에 대하여 설명하지 않는다.
semantic 요소
form, table, img 등으로 이 태그는 콘텐츠의 의미를 정확히 설명한다,
Semantic Tag
Semantic Tag를 사용하는 이유?
- HTML로 만든 문서에 추가적으로 의미를 준다.
Non-Semantic elements로 작성한 HTML문서는 데이터의 중요정도를 파악하기 어렵다.
Semantic Tag example
Non-Semantic elements
*div
블록 타입의 요소이다.
css를 적용하기 전에는 콘텐츠나 레이아웃에 영향을 주지 않으며 의미를 갖지 않는 태그이다.
주로 레이아웃을 나누는 곳에 쓰인다.
*span
태그와 같이 의미를 갖지 않는 태그이다. 그러나 인라인 타입의 요소이다. class나 id와 같은 속성과 함께 사용하여 요소를 그룹화 해준다.
사이트에 이미지를 넣는 방법
1.<img>를 이용하여 html에서 이미지 넣기 : <img src="/sfsdf/images"> 2.<div>를 이용하여 css에서 background-image 속성을 추가하는 것 : background-imag: url(imageurl)
두 가지 방법의 차이점
*에러날 경우
img는 broken image 와 alt 텍스트가 보인다.
background-image 아무런 이미지와 텍스트가 나오지 않기에 alt 와 같은 설명을 할 수 없다.
background-images는 검색을 해도 나오지 않는다 그래서 검색노출을 위해서는 img를 써야한다
각각 어떠한 경우에 사용하면 좋은가?
img는 SEO, 성능에서 더 효율적이다.
background-image은 배경 이미지를 위해 사용하면 된다.
background-image은 디자인 이유로 사용하면 좋다.
! 결론: 사용자에게 이미지가 컨텐츠 이해를 시켜준다면 img 사용 아니면 background image !
💻