1. Semantic Web
등장 배경 및 정의:
인터넷이 보급되고 웹에 축적되는 정보의 양이 방대해짐에 따라 불필요한 정보나 연관성이 적은 정보를 거를 필요성이 대두.
단순히 사람만이 웹의 정보를 파악하는 것이 아니라, 자동화된 기계가 의미를 해석하고 정보간의 관계를 이해할 수 있도록 하는 것이 목적.
검색 엔진에 노출되지 않는 정보는 존재 의미가 없음.
검색 엔진은 매일 웹사이트 정보를 수집하고, 예상되는 검색 키워드에 대응하는 인덱스를 만들어 놓는다. 이 인덱스를 수집하는 기준이 바로 HTML태그이며, 그 중 시맨틱태그의 사용 유무에 따라 인덱스 포함 여부가 결정된다.
2. Semantic Tags
HTML5에서 웹 페이지에 통상적으로 많이 사용하는 구조에 의미를 부여하기 위하여 새롭게 정의
Semantic elements = Elements with a meaning.
A semantic element clearly describes its meaning to both the browser and the developer.
<!-- 시맨틱 태그 미사용 예시-->
<div>
<div style="font-size: 32px; font-weight: bolder">
Information
</div>
</div>
<!-- 시맨틱 태그 사용 예시-->
<header>
<h1>
Information
</h1>
</header>
두 형식 모두 웹문서상 보이는 결과는 동일하지만,
시맨틱 태그를 사용하지 않은 첫번째 예시는 태그만 봐서 어떤 내용인지 유추하기 어려움.
반대로,
시맨틱 태그를 사용한 두번째 예시는 <header>와<h1>이라는 명확한 의미가 있는 태그를 사용하여 문서의 핵심요소를 빠르게 파악할 수 있도록 함.
3. <img> vs <div>+ background-image
HTML 태그인
<img>를 사용하는 것과<div>태그에 CSS속성인 background-image를 추가하는 것은 웹 상에 표출되는 모습이 동일하다.
하지만 의미있는 정보를 얻고자 검색했을 때,
<img>태그를 사용해서 유의미한 정보를 지니고,- CSS 속성을 사용한 페이지는 그저 단순히 시각화한 페이지이다.
결론적으로,
해당 이미지에 대한 존재 가치가 있는(검색 엔진에 노출될 수 있는) 정보를 담은 페이지를 만들고 싶다면,
<img>태그를 사용해야만 한다.
4. 정리 및 결론
<img>를 사용하기 좋은 경우,
- 웹 접근성(Accessibility)와 검색 엔진 최적화(SEO, Search Engine Optimization)을 고려해야하는 이미지를 사용할 때
- 인물의 프로필 사진 혹은 회사의 로고 등 콘텐츠 정보와 연관 있는 이미지를 사용해야할 때
- 경고 아이콘과 같은 중요한 의미가 내포된 이미지를 사용할 때
<div>+background-image 사용하기 좋은 경우,
- 이미지가 콘텐츠의 일부가 아닐 때
- 웹 문서의 배경을 채우기 위한 용도로 사용할 때
5. Reference
https://dev.to/sarfarazdev/semantic-html-3la1
Accessibility: Semantic HTML makes webpages accessible for mobile devices and for people with disabilities as well. This is because screen readers and browsers are able to interpret the code better.
SEO: It improves the website SEO, or Search Engine Optimization, which is the process of increasing the number of people that visit your webpage. With better SEO, search engines are better able to identify the content of your website and weight the most important content appropriately.
