{HTML / CSS} The difference between img tag and Background-image in css 이미지 태그와 background-image 속성 그리고 Semantic Web과 Semantic Tag

이미지 태그는 웹사이트에서 사람들이 이미지를 프린트 할 수 있도록 하게 해준다
또한 이미지 태그는 이미지가 아주 중요한 Semantic 시멘틱한 의미를 가지고 있을때 해준다
이미지가 사이트내에서 중요한 역할을 하고 컨텐츠로써 중요할때 이미지 태그를 쓴다

또한 이미지가 서치엔진 serach engine등에 의해 index 최적화로 연동되고 싶으면 이미지 태그 img tag를 사용한다. (SEO - Search Engine Optimization)

<img src="소스" alt"이미지 설명">

Background-image 속성은 이미지 컨텐츠의 일부가 아닐때 사용한다 한마디로 이미지가 사이트 내에서 중요한 컨텐츠가 아닐때 사용 된다.

body {
 background-image: url("paper.gif");
 background-color: #cccccc;
}

Personally I would forget about performance in this instance and focus on what the image is:

1) Image = content

2) Background Image = design

The way I tend to think about this is, do I want the image to appear on all screen sizes, on all devices, with CSS turned either on or off? Do I want the image to be "indexed" by Google and Facebook. If the answer is yes to all or any of these questions, then usually the image is "content" and you should use an IMG tag.

If you want a different image to display at different screen sizes (or no image at all on certain devices), or if you're happy for the image to not appear on a print out, or you're happy for the image to not appear if CSS is turned off, then usually the image is "design" and you should use a background image.

source:https://stackoverflow.com/questions/17288500/img-vs-background-image-css-in-performance

Semantic Web과 Semantic Tag

먼저 Semantic의 뜻을 아는게 좋다

Semantic이란 의미론적이란 뜻으로 의미이다

따라서 Semantic Tags들은 의미를 가지고 있는 태그들이다

Semantic Tags의 종류로는

1.<article>
2.<aside>
3.<details>
4.<figcaption>
5.<figure>
6.<footer>
7.<header>
8.<main>
9.<mark>
10.<nav>
11.<section>
12.<summary>
13.<time>

이렇게 다양한 의미를 가지고 있는 Semantic tags존재한다.

시맨틱 태그들을 사용하면 기계들만 이해하기 쉬운게 아니라 다른 개발자들이 내 페이지의 코드를 봤을때도 보다 더 쉽고 빠르게 이해하고 파악할 수 있게 된다. Semantic tags를 사용했을때 가독성이 더 좋아지고 유지보수에도 더 용이하다는 장점이 있다.