[포스코x코딩온] 웹개발자 입문 과정 1주차 회고-09 | HTML Sementic

HTML을 Sementic하게 작성해야하는 이유는?

● HTML을 Sementic하게 작성한다는 것의 의미는?

: 웹 페이지를 이루는 요소에 '의미와 맞는 태그'를 사용한다는 뜻

 

● Sementic tag의 예시?

- <header> : 로고, 메뉴아이템 등

- <nav> : 다른 곳으로 이동 가능한 링크들

- <footer> : 하단 영역

- <aside> : 콘텐츠와 직접적인 연관이 없는 옆에 있는 부분 예를 들면 광고

- <main> : 콘텐츠 영역임을 표시. 한 HTML 페이지 당 한번 사용

- <article> : 하나의 의미있는 요소, 예를 들면 기사 리스트 중 기사 한개

- <h1>~<h6> : 제목

- <section> : article을 포함-그룹화 목적

 

● Sementic 해야하는 이유?

1) 검색 최적화 (Search Engine Optimization, SEO): 

 - 검색엔진은 HTML 코드를 분석해 사이트를 노출 시킨다.

 - 크롤러가 페이지의 구성 요소들이 무엇을 의미하는지 이해하여 사이트 노출에 영향을 준다.

2) 유지보수성

 - 페이지를 유지보수할 때,<div> 태그만 가득하다면 요소를 찾기 힘들다.

 - 시멘틱 태그를 활용해 컨텐츠를 적절히 구분시키는 것이 필요하다.  

 

 

드디어 sementic에 관해서 배울 수 있었다.

sementic하게 작성하지 않으면 수정해야할 때 정말 골치아플 것 같았다.

항상 지저분하게 코드를 작성해서 나를 스트레스 받게 했던 누군가가 떠올랐다. 

절대로 sementic하게 태그를 작성해야겠다.