[시멘틱 태그] 웹사이트 구성에 의미를 부여하는 태그

 

HTML을 작성할 때 무심코 사용했던 div 

앞으로는 div 대신 시멘틱 태그를 사용하자!

 

 

 

시멘틱 태그란? - 의미를 가지고 있는 tag 

예를 들자면 header, main, footer, aside 등 .

태그만 봐도 무엇인지 우리 뿐만 아니라 컴퓨터가 인식할 수 있는 태그

 

---

시멘틱 태그의 장점

- 검색 엔진은 의미론적 마크업을 페이지의 검색 랭킹에 영향을 줄 수 있는 키워드로 간주합니다. (SEO에 영향을 미침)

- 시각 장애가 있는 사용자가 화면 판독기로 페이지를 탐색할 때 푯말로 사용

- 개발자에게 태그 안에 채워질 데이터 유형을 제안함

 

의미론적 요소(element)들

사용가능한 백 여개 정도의 요소(elements)들이 있습니다.

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

 

출처 : https://developer.mozilla.org/ko/docs/Glossary/Semantics