[유데미x스나이퍼팩토리] 10주 완성 프로젝트 캠프 - 시맨틱 태그의 중요성

 

 

 

🍐 시맨틱 태그란? 

HTML 을 쪼금 공부해보셨다면 '시맨틱 태그'에 대해 모두 들어보셨겠지오 

처음 공부를 할 땐 div 태그도 무엇인지 잘 몰라서.. '시맨틱 태그' 에 대해 이해할 여력도 없었는데 이제 여력이 조금 생겼다(?)

 

오늘 강사님이 HTML 전반적인 내용을 설명해 주셨고, 시맨틱 태그의 중요성에 대한 과제를 내주셨다.

 

시맨틱 태그란 무엇인가? 

시맨틱(semantic)은 '의미의, 의미론적인' 이라는 뜻을 가지고 있기 때문에 말 그대로 시맨틱 태그는 '의미가 있는 태그'라고 할 수 있다. 

 

우리가 주로 쓰는 div, span은 이름만 보고 어떤 내용인지 유추가 어려운 반면, header, nav, main, section, aside, footer등의 태그는이름만으로도 내용을 정확하게 명시해준다. 이를 시맨틱 태그라고 한다. 

 

아래 그림을 보면 시맨틱 태그에 대한 이해가 더 쉽다.

 

이미지는 피그마로 직접 만들었답니다.

 

 

 

🍐 시맨틱 태그의 장점

그렇다면 왜 굳이 태그들에 의미를 부여하며 시맨틱 태그를 사용해야 할까?

사실 div와 span만 사용해도 페이지의 골격은 만들 수 있는데 말이다. 

 

•  웹 페이지의 구조와 의미가 명확해진다.
• 가독성이 향상된다. 
• 가독성이 높은 코드는 유지보수가 용이하며, 코드 수정이나 업데이트 시에도 문제가 발생할 확률이 적어진다. 
• 웹페이지에 일반적인 방법으로 접근할 수 없는 사람들(시각장애인)도 원활한 소통이 가능하도록 도울 수 있다. (스크린리더 사용가능)
• 검색엔진최적화 (SEO) -> 검색엔진은 태그를 기반으로 페이지 내 검색 키워드의 우선순위를 판단한다. 따라서 헤더는 header, 중요한 단어는 strong / em등을 사용하는 등 의미에 맞는 태그를 사용하는 것이 중요하다. 

 

 

 

 

 

 

출처: 유데미 3일차 교안자료 

본 후기는 유데미-스나이퍼팩토리 10주 완성 프로젝트캠프 학습 일지 후기로 작성 되었습니다.