TIL no.15 - 왜 semantic web으로 만들어야 하는가 ?

이번에는 왜 sementic 하게 web html 을 작성해야 하는가 ?

에 대한 주제로 글을 작성해보려고 합니다 !

 

 

**html 마크업을 시멘틱하게 작성해야 하는 이유

html으로 웹의 구조를 잡을 때, container box들을 너무 의미를 담고 있지 않은 div들로만 구성할 경우 복잡성이 높습니다.

컴퓨터와 사람 모두가 이해하기 쉬운 언어로 작성하는 것이 중요합니다. 또한 검색엔진에서도 시맨틱하게 작성된 html 구조에 대한 효율성이 더 높습니다.

• <article>
• <aside>
• <details>
• <figcaption>
• <img>
• <footer>
• <header>
• <main>
• <nav>
• <section>

이 외에도 다양한 semantic elements 가 있습니다.

위의 태그들은 보다시피 어떠한 content를 담고 있을 지 단번에 알 수 있습니다.

사람만 그렇게 생각하는 것이 아니라 컴퓨터 또한 의미적으로 잘 나타난 시맨틱 언어들을 더 쉽게 읽어들입니다.

이와 같이 이러한 언어들로 의미를 포함한 언어로 작성한다면 당연히 더 쉽게 html을 구성하는 방법이 아닐까요?

 

 

위와 같은 이유로 image를 html에 넣을 때,

 

<img>태그를 사용하는 것 vs  div에서 background-image를 사용하는 것 

 

전자는 말의 의미그대로 img를 html에서 작성하는 것이고, 후자는 div를 생성하고 css 에서 background-image url 로 속성값을 넣어주는 것입니다.

 

하지만 ! 

시맨틱 웹으로 작성하기 위해서는 , 들어갈 이미지가 작성되는 html에서 의미를 가지는 경우에는 <img>를 사용하고 별다른 의미를 가지고 있지 않은 경우에는 background-image를 사용해도됩니다 .

 

 

코드를 작성하다보면 눈에 보이는 것만 생각하면서 작성하게 되는 경우가 많았는데 컴퓨터와 자신의 코드를 읽게 될 사람들까지 생각하며 의미있는 코드를 작성하는 습관을 들였으면 좋겠습니다. 💛