TIL 8 | HTML_Semantic Web_Semantic Tags

---- 면접 중 ---

[면접관]

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

 

[나]

"!@#$%^&*" 

---

위 면접 질문은 실제 면접에서 자주 다루는 질문입니다..

이를 이해하기 위해서는 먼저 Semantic Web과 Semantic Tag에 대한 이해가 있어야 합니다.

 

실제 면접때를 대비하기 위해 잘 공부해 둡시다ㅎㅎ

자, 그럼 심호흡 크게 한번 하고~  Let's Go~!! (☞ﾟヮﾟ)☞

 

---

시맨틱 웹 (Semantic Web) 

 

시맨틱 웹이란 무엇일까요? Semantic은 사전상 '의미론적인, 의미의' 이라는 뜻을 가지고 있습니다. 그렇다면 시맨틱 웹은 '의미있는 웹'정도로 이해할 수 있는데 의미 있는 웹이란 어떤 웹을 가리키는 걸까요? 

시맨틱 웹의 목적 인터넷이 폭발적으로 보급되고 웹상에 축적되는 정보의 양이 방대해짐에 따라 정보 검색시 불필요하거나 덜 연관성있는 정보를 거를 필요성이 대두되었습니다. 따라서 단순히 사람만이 웹의 정보를 파악하는 것이 아니라, 자동화된 기계가 그 의미를 해석하고 정보간의 관계를 이해할 수 있도록 하는 것이 시맨틱 웹의 목적입니다. 

검색 엔진에 노출되지 않는 정보는 존재 의미가 없는 것이나 다름 없으며, 

검색엔진은 매일 웹사이트 정보들을 수집한 뒤 예상되는 검색 키워드에 대응하는 인덱스를 만들어 놓습니다. 

이 인덱스를 수집하는 기준이 바로 HTML의 태그가 되는데, 그 중 시맨틱 태그의 사용 유무에 따라 인덱스 포함 여부가 결정됩니다.

그러므로

내 블로그가 검색엔진에 잘 노출되게 하려면 시맨틱 태그를
상황에 맞게 잘 선택 하여사용하도록하자~!!

 

---

시맨틱 태그 (Semantic Tags)

👇1번코드

<!-- 시맨틱 태그 미사용 -->

<div class="introduce">
  <span>나는야 프로 코딩러</span>
</div>

 

👇2번코드

<!-- 시맨틱 태그 사용 -->

<header>
  <h1>나는야 프로 코딩러</h1>
</header>

위 HTML 형식과 아래 HTML 형식은 웹문서상 보이는 결과는 같다.

 하지만 1번코드는 태그만 봐서는 어떤 내용인지 유추하기 어렵다.

반대로 2번코드는 <header>와 <h1>이라는 명확한 의미가 있는 태그를 사용함으로써 코드의 가독성을 높일뿐 아니라 사람 뿐만 아니라, 검색엔진과 보조기술(예: 시각 장애가 있는 사용자를 위한 화면 판독기)가 문서의 핵심요소를 빠르게 파악할 수 있어 정보에 대한 높은 접근성이 갖게 됩니다.

 

" header태그 안에 적혀있으니 글내용의 일부가 아니라 제목이겠군~ "

 

---

 

HTML 5에는 아래과 같은 다양한 Semantic 태그들이 존재하므로, 용도와 상황에 맞게 잘 사용하면 된다.

• <article>
• <aside>
• <details>
• <figcaption>
• <figure>
• <footer>
• <header>
• <main>
• <mark>
• <nav>
• <section>
• <summary>
• <time>

none-Semantic 태그에는 텍스트가 가진 내용의 의미전달과 무관하게
단순히 스타일 적용을 위해 그룹화하기 위한 용도로 사용되는 아래의 것들이 될 수 있겠다.

• <div>
• <span>