Semantic Web?

시맨틱 웹 은 "의미론적인 웹"- 기계가 이해할 수 있는 형태로 제작된 웹을 의미합니다.

웹에 존재하는 수많은 웹페이지들에 메타데이터(Metadata)를 부여하여 기존의 잡다한 데이터 집합이었던 웹페이지를 '의미'와 '관련성'을 가지는 거대한 데이터베이스로 구축하고자 하는 발상입니다.

Semantic Tag

브라우저,검색엔진, 개발자 모두에게 콘텐츠의 의미를 명확히 설명하는 역할

시맨틱 태그가 아닌 것과 시멘틱 태그인 것은 무엇인지 알아봅시다.

• non-semantic elements : <div> <span>
• semanitc elements : <form>,<table>, <article> : 내용을 명확하게 정의하는 것들

태그 이름들을 보았을 때 div span 은 아무 뜻도 가지고 있지 않습니다.하지만 <table> 이라는 요소를 보았을 때 어떤 것인지 우리는 유추를 할 수 있습니다.
시멘틱 요소들은 위에 있는 3개 말고 더 많은 것들이 있습니다.

ex) <aside> <header> <nav> <section> <aside> <footer> ...

Semantic Elements

• <section> : 문서에서 세션을 정의할 때 사용합니다.
• <header> : 헤더
• <nav> : 내비게이션
• <aside> : 사이드에 위치하는 공간을 의미
• <article> : 본문의 주 내용이 들어가는 공간 의미
• <footer> : footer

질문

"사이트에 이미지를 넣는 방법은 두 가지가 있습니다. <img> 태그를 사용하는 것과 <div> 태그 background-image 속성을 추가하는 것. 두 가지 방법의 차이점과 각각 어떠한 경우에 사용하면 좋은지 설명해보세요."

차이점은

• background-image 속성에 있는 이미지는 Google에서 크롤링하거나 색인을 생성하지 않습니다.
• img 태그에는 alt="" 로 이미지에 대한 설명을 넣을 수 있어 SEO에 노출되는 용도로 사용이 가능합니다. 그에 반해 background-image는 이미지에 대한 정보를 가지고 있지 않습니다.
• 의미가 있는(ex) 글과 함께 있어야 하는 관련 이미지)이미지라면 <img> 태그를 사용하고 background-image는 순전히 '장식'으로 할 때 사용하는 것이 좋습니다.

출처: https://velog.io/@yejikang/Semantic-Web%EA%B3%BC-Semantic-Tag

참고 링크: https://www.freecodecamp.org/news/semantic-html5-elements/
참고 링크: https://semrush.com/blog/semantic-html5-guide/?kw=&cmp=EA_SRCH_DSA_Blog_SEO_EN&label=dsa_pagefeed&Network=g&Device=c&utm_content=431603845883&kwid=dsa-834686684576&cmpid=9874915430&gclid=Cj0KCQjwhZr1BRCLARIsALjRVQMALQ-PFX7NKeCiHJWm3AkRMnvnh5f6j9gz2Dqpik6RZZmo0Akzst8aAkdLEALw_wcB