상세 컨텐츠

본문 제목

시멘틱 마크업 - HTML

Programming/Concept

by 쌩우 2019. 5. 1. 16:36

본문

검색 엔진 최적화란 HTML코드에서 정보를 모아 검색 키워드에 맞는 적절한 웹사이트 구성하여, 검색결과의상위에나올 수있도록하는작업이다.

해당 웹페이지의 내용을 파악하고 검색엔진에 노출이 잘되도록 하기 위해서는HTML요소를 적절하게 사용한 시멘틱한 마크업이 필요하다.

'시멘틱 마크업'이란?

Semantic은 기계(컴퓨터, 브라우저)가 잘 이해할 수 있도록 하는 것을 뜻한다. 사람과 기계가 잘 소통할 수 있도록 적절한 HTML 요소를 적시에 사용하는 것에서부터 시작한다.

마크업 시에는 의미에 맞는 태그, 요소를 사용하고

문서를 표현할 때에는 구조화를 잘 해주는 것으로 브라우저에게 코드를 잘 이해시킬 수 있다.
아래는 그 예시이다.

굵은 vs 중요한
기울어진 vs 강조하는
밑줄친 vs 새롭게 추가된
중간선이 있는 vs 삭제된

//상기의 글자는 보기에는 같지만 실제 코드는 다르다.
//검색 엔진 최적화에는 각각 두번째 코드가 적절하다.

추가로 볼 만한 것

  • article
  • aside
  • figcaption
  • footer
  • header
  • main
  • mark
  • nav
  • section
  • time

 

관련글 더보기

댓글 영역