[HTML] HTML 정리 (2)

시맨틱 태그란?

이 세상에 존재하는 웹사이트들은 엄청나게 많고, 그것을 사용하는 유저들도 엄청나게 많습니다. 

우리는 웹을 만들고, 결국 그 웹은 사용자에 의해 검색되어야지만, 사용될 수 있습니다. 이때, 필요로 한 개념이 바로 시맨틱 태그입니다.

즉, 시맨틱 태그는 브라우저, 검색엔진, 개발자 모두에게 콘텐츠의 의미(메타 데이터)를 명확히 설명하는 역할을 합니다.

---

non - semantic 요소

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

---

semantic 요소

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

 

주로 사용 되는 시맨틱 태그로는

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

---

div 만 사용해도 문제가 없지 않을까?

물론 기능적인 부분에서는 header, main, footer 같이 나눠서 사용하는 것이 아니아 div로만 사용해도 기능적인 문제는 발생하지 않습니다. 하지만, 위에서 말했던 것처럼 우리는 SEO와 접근성을 개선을 고민해야 하고, 협업을 하는 방식에 대해서 고민을 해봐야 합니다.

 

결국 우리는 사용자가 찾아볼 수 있는 웹을 만들고 있으며, 그 웹을 만들기 위해서 많은 FE 개발자들과 함께 협업을 합니다.

나 혼자 짠 코드를 혼자 보는 것은 엄청난 양의 코드가 아니라면, 그렇게 문제가 되지 않을 수 있지만, 다른 사람이 짠 코드를 내가 이해하기 위해서는 짧은 양의 코드더라도 꽤 많은 시간이 소요될 수 있습니다. 그렇기에 우리는 최대한 변별할 수 있는 기능을 사용하며, 우리의 코드를 같이 일하는 개발자가 이해하기 쉽게 만들려고 노력해야 합니다.

---

https://poiemaweb.com/html5-semantic-web

Semantic Web | PoiemaWeb

---

오늘도 화이팅입니다!