[HTML] Semantic Web & Semantic Tags
🤔[Interview 대비]
사이트에 이미지를 넣는 두 가지 방법: ‘<img\> 태그를 사용하는 것’과 ‘<div> 태그에 background-image 속성을 추가하는 것’의 차이점과 각 방법을 어떠한 경우에 사용하면 좋을지를 Semantic Web과 Semantic Tag와 연결지어 설명해보세요.
✅ Semantic Web
시멘틱 웹이란 웹에 존재하는 수많은 웹페이지들에 메타데이터(Metadata)를 부여하여, 기존의 잡다한 데이터 집합이었던 웹페이지를 ‘의미’와 ‘관련성’을 가지는 거대한 데이터베이스로 구축하고자 하는 발상을 말합니다.
HTML 요소는 non-semantic 요소 / semantic 요소로 구분할 수 있습니다.
- Non-semantic 요소 : content에 대해서 어떤 설명도 하지 않는 요소. (ex. <div>, <span> 등)
- Semantic 요소: content의 의미를 명확하게 설명하는 요소. (ex. <form>, <img> 등)
Semantic Element
시맨틱 요소(Semantic Element)는 SEO(검색엔진 최적화 : Search Engine Optimization)라는 마케팅 개념과 연관되어 있는 개념입니다. 인터넷 상 수많은 웹사이트 중에서 Google, Naver 등과 같은 검색엔진에 노출하기 위해 웹사이트를 검색하기 알맞은 구조로 웹사이트를 조정하는 것을 SEO라고 합니다.
웹사이트 정보를 수집하는 검색엔진의 크롤러와 검색할만한 키워드를 미리 예상하여 검색키워드에 대응하는 인덱스를 만들어 두는 인덱싱 작업을 통해서 검색엔진은 웹 사이트 정보를 수집합니다. 이 때, 검색엔진 로봇이 수집하는 정보 및 인덱스 생성 시 사용되는 정보는 결국 웹사이트의 HTML 코드입니다.
// nonsematic element : 의미, 의도가 명확히 드러나지 않는 코드
<font size="6"><b>Hello</b></font>
// sematic element : heading(제목) 중 가장 상위 레벨이라는 의미를 내포
// => 개발자가 의도한 요소의 의미가 명확히 드러남 : 코드의 가독성 높이고, 유지보수 용이해짐.
<h1>Hello</h1>
✅ Semantic Tag
시맨틱 태그(Semantic Tag)란 “의미가 있는 태그”를 말합니다. 시맨틱 태그는 브라우저, 검색엔진, 개발자 모두에게 콘텐츠의 의미를 명확히 설명하는 역할을 합니다.
[ex]
- 검색엔진: h1 요소 내 콘텐츠를 웹문서의 중요한 제목으로 인식하고, 인덱스에 포함시킴.
- 검색엔진 사용자: h1 요소 내 콘텐츠가 제목임을 인식할 수 있음.
시맨틱 요소로 구성된 웹사이트는 검색엔진에 보다 의미론적으로 문서 정보를 전달할 수 있습니다. ↔ 검색엔진은 시맨틱 요소를 이용하여 보다 효과적인 크롤링과 인덱싱이 가능해집니다.
이러한 시맨틱 태그에 의해서 컴퓨터가 HTML 요소의 의미를 더 명확하게 해석하고, 그 데이터를 활용할 수 있는 시맨틱 웹이 실현될 수 있습니다.
시맨틱 태그의 종류
- header: 페이지의 제목과 같은 소개 내용을 나타내는 태그로, 주로heading 태그나 로고 또는 아이콘 등을 포함합니다.
- nav: 메뉴, 목차 등에 사용되는 태그.
- aside: 간접적으로 문서와 관련된 내용을 나타내는 태그로, 사이드 바 혹은 콜아웃 박스로 사용됩니다.
- main: 지배적인 콘텐츠 영역을 나타내는 태그.
- section: 문서의 독립적인 영역을 나타내는 태그.
- article: 그 자체로 의미가 있는 웹사이트의 부분이며, 독립적으로 배포 또는 재사용 되도록 의도된 문서를 나타내는 태그로, 게시물, 신문 기사, 블로그 작성글, 사용자의 댓글 등의 용도로 사용됩니다.
- footer: section의 작성자에 대한 정보, 저작권 데이터 또는 관련 문서에 대한 링크를 포함하는 태그.
💻 웹사이트에 이미지를 추가하는 두 가지 방법 (Semantic V.S. Non-semantic)
HTML <img\> 태그를 사용하기
▶ 웹 접근성, 검색엔진 최적화를 고려할 필요가 있는 이미지 (이미지가 사용자 검색에 노출되어야 할 경우!)
- Semantic 태그를 사용했기 때문에 검색엔진에 노출이 될 가능성이 높아집니다.
- alt 속성을 통해 이미지를 로드할 수 있는 경우에 텍스트를 대신하여 보여줄 수 있습니다.
CSS <div> 태그에 background-image 속성을 추가하기
▶ 단순히 내용과 무관한 미적 요소의 이미지
- Non-semantic 태그로 검색엔진의 크롤링, 인덱싱이 잘 되지 않기 때문에 검색엔진 최적화가 불리합니다.
