Semantic Web🤖

시맨틱 웹 은 "의미론적인 웹"으로 기계가 의미(Semantic)를 파악하고 사용자의 요구에 적합한 결과를 서비스 가능하도록 하는 것으로 기계가 이해할 수 있는 형태로 제작된 웹을 의미합니다.

Q. 두 예시 중 검색엔진에서 웹 문서의 중요한 제목으로 인식되는 것은?

<!--예시 1-->
<font size="10"><b>Semantic Web</b></font>

<!--예시 2-->
<h1>Semantic Web</h1>

A. 컴퓨터가 인식하는 언어는 2번째입니다.

예시 1의 요소는 의도가 명확하지 않은데 비해,
예시2는 header(제목) 중 가장 상위 레벨이라는 의미를 내포하고 있어서 개발자가 의도한 요소를 나타냅니다.

코드의 가독성이 높고 유지보수에도 용이합니다.

Semantic Tag👩

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

HTML 요소는 non-semantic 요소와 semantic 요소로 구분할 수 있습니다.

• non-semantic 요소: div, span 등이 있으며 이들 태그는 content에 대하여 어떤 설명도 하지 않습니다.

• semantic 요소: form, table, img 등이 있으며 이들 태그는 content의 의미를 명확히 설명합니다.

Semantic Elements

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

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

- img 태그를 사용하는 경우😎

<img alt="HTML" src="https://www.w3schools.com/whatis/img_js.png">

//img태그의 경우 가장 많이 사용되며,  html에서 <img> 태그로 이미지를 생성합니다.

- background-image를 사용하는 경우😁

.bg-img {
  background-image: url("https://upload.wikimedia.org/wikipedia/commons/
thumb/6/61/HTML5_logo_and_wordmark.
svg/1280px-HTML5_logo_and_wordmark.svg.png");
}
//태그가 아니라 css를 이용해 이미지를 생성하는 것입니다

-차이점-
img 태그에는 alt="" 로 이미지에 대한 설명을 넣을 수 있어 SEO에 노출되는 용도로 사용이 가능합니다.
그에 반해 background-image는 이미지에 대한 정보를 가지고 있지 않습니다.
의미가 있는(ex) 글과 함께 있어야 하는 관련된 이미지라면 img 태그를 사용하고 background-image는 순전히 '장식'으로 할 때 사용하는 것이 좋습니다.