1. Semantic Web
Semantic Web 은 간단하게 말하면 the Web of Linked Data이다.
이는 사람뿐만 아니라 기계가 정보에 대한 이해와 처리를 높일 수 있도록 하는 차세대 웹 기술이다. 이는 사용자의 요구에 가장 적합한 형태로 정보를 제공하여 더 쉽고 효율적인 사용자 경험을 가능케 한다.
Semantic Web을 만든 W3C에 의하면, 시맨틱 웹은 어플리케이션, 회사, 커뮤니티의 경계를 넘어 데이터가 공유되고 재사용되도록 할 수 있는 공통적인 framework를 제공한다.
2. Semantic Element
HTML 요소는 크게 non-semantic, semantic 로 구분할 수 있다.
-
non-semantic 요소
div, span 등이 있으며 이들 태그는 content에 대하여 그 어떤 설명도 하지 않는다. -
semantic 요소
form, table, img 등이 있으며 이들 태그는 content의 의미를 명확히 설명한다.
Semantic element을 쓰는 이유는:
1. 읽기 쉽다
2. 누구나 쉽게 접근할 수 있다 (Greater Accessibility)
3. 일관성 있는 코드를 작성할 수 있다
Wecode Assignment
"사이트에 이미지를 넣는 방법은 두 가지가 있습니다.
<img>태그를 사용하는 것과<div>태그에 background-image 속성을 추가하는 것. 두 가지 방법의 차이점과 각각 어떠한 경우에 사용하면 좋은지 설명해보세요."
<img>태그는 웹에서 이미지를 보여주기 위해 사용하는 반면, <div> 태그에서 background-image 속성을 추가하는 것은 그 element에 배경 이미지를 입힐 때 사용한다.
고로, <img>태그는 웹에서 이미지가 필요한 정보일때이고, <div> 태그에서 background-image 속성을 추가하는 것은 디자인을 위해서이다.
다음은 stackoverflow에서의 답변이다.
Personally I would forget about performance in this instance and focus on what the image is:
1) Image = content
2) Background Image = design
References
- https://en.wikipedia.org/wiki/Semantic_Web
- https://www.w3schools.com/html/html5_semantic_elements.asp
- https://cruce.medium.com/what-is-the-semantic-web-and-why-should-enterprise-publishers-care-461fc2a4d614
- https://stackoverflow.com/questions/17288500/img-vs-background-image-css-in-performance
- image from: https://www.ontotext.com/knowledgehub/fundamentals/what-is-the-semantic-web/
