Semantic Web and Semantic Tag
Semantic Web
- 웹의 창시자인 팀 버너스리가 1998년 제안한 개념이며, 현재 W3C에 의해 표준화 작업이 진행 중
- Semantic Web이란 '의미론적인 웹'이라는 의미로, 컴퓨터가 자체적으로 네트워크 상에 있는 정보 자원의 의미를 이해하고 스스로 데이터의 재사용을 수행할 수 있도록 하는 웹을 의미
Semantic Tag
- Semantic tag를 사용하면 코드의 가독성을 높여 해당 요소의 의미를 브라우저, 검색엔진, 개발자 모두가 명확하게 파악할 수 있게 한다. 이 경우 개발자는 해당 코드의 유지 보수를 쉽게 할 수 있고, 검색엔진은 효과적인 크롤링 및 인덱싱을 통해 Semantic web을 실현할 수 있게 한다.
- 웹 페이지의 구역을 정의하기 위해 사용하는 Semantic tag에는 header, nav, section, article, footer, aside 태그 등이 있다.
이미지를 추가하는 방법
- 이미지를 추가하는 방법은 아래 두 가지로 구분할 수 있으며 각 상황을 고려하여 더 적절한 방법을 선택할 수 있다.
- img 태그를 사용하여 추가하는 방법 (Semantic한 방법)
- div 태그에 background-image 속성을 사용하여 추가하는 방법 (Non-semantic한 방법)
- img 태그를 사용
- img 태그에는 'alt' 속성을 부여할 수 있어 이미지가 보여지지 않는 경우에도 해당 이미지에 대한 정보 전달이 가능
-> 이미지에 구체적인 정보가 담겨 있는 경우에는 img 태그를 사용하는 것이 더 효율적 - 배경 이미지로 추가되는 경우, 기본 인쇄 옵션에서 제외됨에따라 해당 이미지가 포함되게 출력하기 위해서는 img 태그를 사용하여 이미지를 추가
- Semantic tag인 img 태그를 사용하면 검색 엔진의 인덱싱에 포함되어 이미지 노출을 통한 SEO 효과를 누릴 수 있음
- div 태그의 background-image 속성을 사용
- 해당 이미지가 디자인 요소로만 사용되어 콘텐츠에 직접적인 영향을 미치지 않을 경우에는 background-image 속성으로 이미지 추가하는 것이 효율적
- img 태그로 이미지를 추가하면 파일명이나 경로가 변경될 경우, HTML 마크업도 함께 수정해야 하는 반면, background-image 속성으로 추가하는 경우에는 CSS 수정만으로 관리가 가능
- 콘텐츠 인쇄 시 해당 이미지가 출력되지 않게 하는 경우에는 background-image 속성 사용
Reference
https://www.w3schools.com/html/html5_semantic_elements.asp
https://ko.wikipedia.org/wiki/%EC%8B%9C%EB%A7%A8%ED%8B%B1_%EC%9B%B9
https://inseq.co.kr/ko/bbs/i-24/show.do?seq=19&searchCl1=&searchMulti=&searchKeyword=
Hello World!