시맨틱 요소(Semantic Elements)
: 시맨틱 요소는 브라우저와 개발자에게 태그의 의미를 명확하게 설명해주는 것을 말한다.
ex)
- non-semantic 요소인 <div>, <span> 태그는 어떠한 의미를 담고있지 않음
- 반대로 semantic 요소인 <form>, <table>, <articles> 등의 태그는 그 내용을 명확하게 정의함
시맨틱 태그를 사용하는 이유
1. 검색 엔진 최적화(SEO): 시맨틱 태그는 웹 페이지의 구조와 내용을 명확하게 정의하기 때문에 검색 엔진이 웹 페이지를 더 잘 이해할 수 있다. 이를 통해 검색 결과 페이지에서 노출될 확률과 검색 엔진 순위를 높일 수 있다.
2. 좋은 웹 접근성: 시맨틱 태그는 웹 페이지의 구조를 명확하게 정의하기 때문에 스크린 리더 등 보조 기술을 사용하는 사용자들도 웹 페이지를 더 쉽게 이해할 수 있다.
3. 높은 코트 유지 보수성: 시맨틱 태그는 코드를 명확하게 정의하기 때문에 코드의 가독성이 높아지고 코드 유지 보수성도 높아진다. 그렇기 때문에 코드를 유지/보수 하거나 새로운 기능을 추가하기가 더 쉽다.
웹 표준을 지키는 이유
1. 호환성 문제 최소화: 웹 표준을 준수하면 모든 브라우저에서 웹 페이지가 일관된 방식으로 동작한다. 이를 통해 크로스 브라우징이나 호환성 문제를 최소화할 수 있다.
2. 개발 생산성 향상: 웹 페이지를 개발할 때 필요한 기능들이 미리 정의되어 있어 다른 개발자들과 협업하기 쉬워지고 생산성이 향상된다.
3. 보안 강화: 웹 표준을 준수하면 보안 문제를 사전에 예방할 수 있다.
'제로베이스 14기' 카테고리의 다른 글
크로스 브라우징 방법 (0) | 2023.05.07 |
---|---|
[제로베이스] 프론트엔드스쿨 한 달 차의 학습 요약 (0) | 2023.05.01 |
[제로베이스]2주차 학습요약 (0) | 2023.04.16 |
[제로베이스]1주차 학습요약 (2) | 2023.04.11 |
[제로베이스]프론트엔드 스쿨의 시작 (0) | 2023.04.05 |