HTML

시멘틱 마크업과 논리적인 순서 마크업

hyejeong3283 2023. 2. 17. 11:15
Knowledge is of two kinds: that which is absorbed and that which is heard. And that which is heard does not profit if it is not absorbed.
Ali ibn Abi Talib (R.A)
728x90
반응형

시멘틱 마크업이란?

시멘틱의 사전적 뜻은 '의미론적인' 정도로 해석할 수 있는데, 이것은 마크업을 할 때 의미에 부합하는 태그를 사용하라는 뜻입니다. 실제 마크업을 할 때는 작업자마다 콘텐츠의 의미를 해석하는 차이가 조금 있을 수도 있지만 가급적 시멘틱하게 마크업을 하려고 노력하는 것이 중요합니다.

즉, 개발자와 브라우저에게 의미있는 태그를 제공한다고 이해하면 됩니다.

 

간단한 예로 <div>는 non-senamtic 태그라 볼 수 있고 <table>,<header>,<footer>등은 semantic태그라고 볼 수 있습니다.

<table>이면 표가 들어 갈 것이고, <nav>는 네비게이션을 의미할 것이라 유추 할 수 있습니다

이렇게 의미를 가진 태그는 검색엔진이나 그 이외에 기계적인 동작들이 웹페이지를 쉽게 이해 할 수 있게 됩니다.

 

<시멘틱 마크업 작성의 장점>

  1. 접근성이 좋아집니다.
  2. 검색 엔진 최적화 : SEO(Search Engine Optimization)
  3. 코드 가독성이 좋아집니다.
  4. 코드와 데이터의 재사용성이 높아집니다.
  5. 호환성과 운용성이 확보됩니다.

<시멘틱 마크업 태그들>

  • header
  • nav
  • section
  • article
  • aside
  • main

이미지 출처


논리적 순서 마크업

논리적 순서에 의한 마크업은 키보드나 터치패드와 같은 입력 장치만으로 HTML 문서의 모든 콘텐츠를 논리적 순서로 이동하여 사용할 수 있도록 하는 '입력장치 접근성'과 밀접한 관련이 있습니다. 따라서 마크업을 할 때 최대한 논리적 순서에 맞게 마크업하는 것이 중요합니다.

마크업을 할 때는 디자인의 시각적 흐름보다는 내용에 대한 논리적 흐름 순서를 잘 파악하여 마크업 하는 것이 무엇보다 중요합니다.

 

예) 1번 쇼핑 -> 2번 G마켓 -> 3번 옥션 -> 4번 하프클럽, 쿠팡, 11번가 GS샵, 패션플러스, STL 일상공감 .....가 내용 흐름 순서에 더 적합 합니다.