[TIL - 2022.6.29] Semantic tag

보통 html 작업을 할 때는 div 태그를 사용하는데 혼자 작업하는 경우에는 크게는 문제가 없겠지만, 협업을 하거나 실제로 서비스 배포를 할 경우에는 문제가 될 수 있다.
우선 사실상 div 태그는 아무런 의미를 담고 있지도 않고 실제로 SEO(Search Engine Optimization)에 상당히 불리한 편이다.

그래서 Semantic tag를 이용해서 각 트리 요소에 의미를 부여해주는 것이 좋다.

HTML 페이지 구조

출처 - https://codewithamir.com/

Semantic

1. <header> : 페이지나 해당 섹션에 최상단에 위치, 보통 사이트의 타이틀이 들어간다.
2. <nav> : 일반적으로 링크에 대한 집합 nav 태그 안에는 보통 <ul>,<li>,<a> 태그 등이 들어간다.
3. <footer> : 보통 페이지의 하단에 위치하며, 저작권 표시나 현재 연도를 표시하는데 사용한다.
4. <article> : 자체 포함된 콘텐츠를 지정한다.
5. <section> : 독립적으로 구분해 배포하거나 재사용할 수 있는 것으로, 보통 뉴스기사나 매거진 등이 있다.
6. <main> : 문서의 주된 콘텐츠
7. <figure> : section 태그와 비슷하지만 사진,그림 등등 문서 흐름과 독립적인 콘텐츠를 지정할 때 쓰인다.

내가 최근에 회사 과제를 하면서 위와 같은 semantic tag를 사용했고 실제로 LightHouse를 80%에서 95%까지 올린 경험이 있다.

사실 semantic tag가 위에 적어놓은 것보단 많다. 그런데 일일이 설명해 놓는 것보다는 실제로 틀을 짜면서 상황에 맞게 구글링해보고 작업하는게 더 나을 거 같기도 하다..

id와 class

• id와 class의 차이점

class는 한 페이지에서 여러번 사용이 가능하지만 id는 딱 한번만 사용 가능하고 중복으로 사용할 수 없다.