Semantic tag 의미론적 태그들

코딩하는 개발자들에게 내용에 대한 의미를 부여한 코드들을 의미한다.

 

W3C에 따르면 "시맨틱 웹을 사용하면 애플리케이션, 기업 및 커뮤니티 전반에서 데이터를 공유하고 재사용할 수 있다.”고 한다

 

- 의미 없는 태그의 예 : <div>및 <span>- 내용에 대해 아무 것도 알려주지 않습니다. (<div>는 박스 생성 <span> 짧은 텍스트 생성)

- 의미 태그의 예 : <form>, <table>및 <article>- 내용을 명확하게 정의합니다.

 

Semantic tag를 사용하면,

1. 의미부여로 코드 가독성을 높이고 유지보수에 용이하다 (코드 기능에는 아무런 차이가 없지만)
2. 검색엔진 최적화 SEO에 도움이 된다
3. 웹 접근성Accessibility 에 도움이 된다

 

의미론적 태그들은 예는 아래와 같다.

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

정답인 코드는 없다. 가독성이 좋고, 유지보수가 쉬운 코드가 있을 뿐이다.

 

참조

https://www.w3schools.com/html/html5_semantic_elements.asp