시맨틱 마크업?코드?

바로 이전 글에서 시멘틱 코드에 대해서 간단히 다뤘었다.

시맨틱 코드가 시맨틱 마크업보다 더 넓은 의미라고 생각하면 된다.
이전에 다루었던 시맨틱 코드에 대하여 한번 더 복기 해보고 시맨틱 마크업에 대해 간단히 알아보는 시간을 가져보겠다.

시맨틱(의미론적인) 코드

다른점개발자와 브라우저에게 의미를 제공한다.
컨테이너코드와 역할이 거의 같지만 태그의 이름이 요소의 목적이나 역할을 강조하는 의미로 지어져있다라는 차이점이있다.
검색엔진에 좋은 단서가된다.

시멘틱태그의 장점

대부분은 컨테이너 태그(span/div)와 같이 특별한 스타일을 제공하지 않지만 아래와 같은 이점이 있다.

• 검색 엔진은 시멘틱 태그를 웹페이지를 검색하는데에 있어서 중요한 단서로 본다
• 적극적으로 사용하게되면 시각장애가있는 사용자가 화면판독기,음성인식기로 페이지를 탐색할때 참조가된다.
• 중요한 내용을 조금더 강조하는 효과가 있다. 웹 접근성을 향상 시킬 수 있다
• 코드의 가독성이 좋아진다.
  이름으로 역할을 강조하기때문에 코드를 볼때 조금더 빠르게 코드를 캐치할 수 있다.
• 컨테이너의 남용을 방지할 수 있어 코드쓰기가 편하다.
  • 컨테이너의 남용? 웹컨텐츠를 많이 페이지에 채우게되면 스타일이나 div가 많아짐
    많아지게되면 코드를 작성하기에도 불편해짐

시멘틱코드의 종류

• <articcle>-독립적인 컨텐츠
• <aside>-별도의 컨텐츠
• <details>-추가적인 상세정보
• <figcaption>-figure의 자막
• <figure>-설명이 붙는 독립컨텐츠
• <footer>-맺음말
• <header>-머릿말
• <main>-주된 (메인) 컨텐츠
• <nav>-네비게이션링크
• <section>-컨텐츠의 한 섹션(절)
• <summary>-detail의 헤더
• <time>-강조할 시간

시맨틱 마크업

의미

시맨틱이란 '의미론적인'이라는 의미를 가지고 있으며, 시맨틱태그는 개발자와 브라우저에게 어떠한 의미를 제공한다.
마크업이란 HTML 태그로 문서를 작성하는 것을 의미한다.
따라서, 시맨틱 마크업이란, 의미가 잘 전달 되도록 HTML태그를 사용하여 문서를 작성하는 것정도로 해석된다.

사용하는 이유

• 의미론적인 구조이기 때문에 '요소가 가진 목적이나 역할이 무언인지'를 나타내준다.
• 검색의 최적화를 높여준다. 검색엔진은 시멘틱태그(태그명)을 중요한 단서로 본다.
  (웹페이지는 제작도 중요하지만, 검색을 통해 다수의 유저들에게 노출되고 사용되는 것이 더욱 중요하다)
• 코드의 가독성을 높여준다.
• 컨테이너(div 또는 span)의 남용을 방지할 수 있어 코드 작성이 용이함.
• 시각 장애가 있는 사용자가 화면판독기로 페이지를 탐색할 때 참조된다.