검색 엔진 최적화 방법, 시멘틱 마크업 하는 방법, HTML5에서 새로 생긴 Sematic 요소

검색 엔진 최적화란? 

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

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

 

 

시멘틱 마크업 이란?

시멘틱 마크업은 종종 POSH(Plain Old Semantic HTML)라고도 불리는데, 단어 그대로 평범하고 오래된 의미론적인 HTML이라는 뜻입니다. 시멘틱은 즉, 기계(컴퓨터, 브라우저)가 잘 이해할 수 있도록 하는 것을 뜻합니다.

애초에 프로그래밍 언어는 사람과 기계와의 정해진 약속이며 HTML 역시 마찬가지입니다. 시멘틱 마크업은 적절한 HTML 요소를 올바르게 사용하는 것에서 시작합니다. 

 

 

시멘틱 마크업 어떻게 할까?

간단합니다. 정해진 약속을 잘 지키면 됩니다.

구체적으로 설명하자면 마크업 할 때는 의미에 맞는 태그, 요소를 사용하는 것이고, 문서를 표현할 때는 구조화를 잘 해주는 것입니다.

정해진 약속대로 코드를 작성하게 되면 결국 기계뿐 아니라 사람도 이해하기 쉬운 코드가 됩니다.

 

<b>굵은</b> vs <strong>중요한</strong>
<i>기울어진</i> vs <em>강조하는</em>
<u>밑줄친</u> vs <ins>새롭게 추가된</ins>
<s>중간선이 있는</s> vs <del>삭제된</del>

 

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

 

브라우저에 나타나는 모습은 동일하지만, 컴퓨터 상으로 보면 다르다. 

 

 

---

HTML5에서 새로 생긴 Sematic 요소들

 

• <article>
• <aside>
• <figcaption>
• <figure>
• <footer>
• <header>
• <main>
• <mark>
• <nav>
• <section>
• <time>

 

 

👇 더 자세히 알아보기 👇

 

https://developer.mozilla.org/en-US/docs/Glossary/Semantics

Semantics - MDN Web Docs Glossary: Definitions of Web-related terms | MDN