<HTML> Semantic Web, Semantic Tags

16기 김동하·2020년 12월 16일
1
post-thumbnail

Semantic Web

의미론적인 웹'이라는 뜻으로,현재의 인터넷과 같은 분산환경에서 기계(컴퓨터)가 처리할 수 있는 온톨로지 형태로 표현하고, 이를 자동화된 기계(컴퓨터)가 처리하도록 하는 프레임워크이자 기술이다.
웹에 존재하는 수많은 웹페이지들에 메타데이터(Metadata)를 부여하여, 기존의 잡다한 데이터 집합이었던 웹페이지를 ‘의미’와 ‘관련성’을 가지는 거대한 데이터베이스로 구축하고자 하는 발상이다.

Semantic Tags

시맨틱(Semantic)은 "의미의, 의미론적인" 이라는 뜻, 즉 시맨틱 태그란 의미를 가지는 태그이다.
HTML 요소는 non-semantic 요소, semantic 요소로 구분할 수 있다.

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

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

다음은 HTML5에서 새롭게 추가된 시맨틱 태그이다.

  • tag Description
    header 헤더를 의미한다
    nav 내비게이션을 의미한다
    aside 사이드에 위치하는 공간을 의미한다
    section 본문의 여러 내용(article)을 포함하는 공간을 의미한다
    article 분문의 주내용이 들어가는 공간을 의미한다
    footer 푸터를 의미한다

HTML Semantic element

rel: (https://poiemaweb.com/html5-semantic-web)

Assignment

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

웹사이트에 이미지를 넣는 방법
1. img src""

img 태그는 HTML의 시멘틱 태그이다. 즉 컨텐츠가 의미적으로 이미지라는 것을 나타낸다.

  1. background-image

    background-image는 특정 엘리먼트에 백그라운드 이미지를 입힐 때 사용한다.

두 방식 모두 이미지를 불러올 수 있지만 차이점이 하나 존재한다.

바로 img태그에는 src 이외에 attribute가 존재한다는 것이다.
즉 이미지가 사용자에게 컨텐츠 이해에 도움을 더 준다고 생각하면 img 태그를 쓰고, 그렇지 않으면 background image 를 쓰는 것이 좋다.

rel: https://mygumi.tistory.com/369

profile
예비 개발자에서 개발자로!

0개의 댓글