🌐 웹 표준
웹 표준이란 브라우저 종류 및 버전에 따른 기능 차이에 대하여 호환이 가능하도록 제시된 표준으로, 다른 기종 혹은 플랫폼에 따라 달리 구현되는 기술을 동일하게 구현함과 동시에 어느 한쪽에 최적화되어 치우치지 않도록 공통 요소를 사용하여 웹 페이지를 제작하는 기법을 의미한다.
웹 표준의 장점
- 수정 및 운영관리 용이
- 접근성 향상
- File Size축소, 서버 저장 공간 절약
- 효율적인 마크업
- 호환성 가능
✅ 웹 접근성
정보 통신 접근성(Web 접근성)은 장애인이나 고령자분들이 웹 사이트에서 제공하는 정보를 비장애인과 동등하게 접근하고 이용 할 수 있도록 보장하는 것으로 웹 접근성 준수는 법적의무사항이다.
🧱 시맨틱 웹이란?
'의미론적인, 의미의'란 뜻을 가지고있다. 즉, 의미 있는 웹이라고 설명할 수 있는데 그 목적은 무었일까?
시맨틱 웹의 목적
인터넷이 폭발적으로 보급되고 웹상에 축적되는 정보의 양이 방대함에 따라 정보 검색시 불필요하거나 덜 연관성있는 정보를 거를 필요성이 대두되었다.
따라서 단순히 사람 뿐만 아니라 자동화된 기계가 그 의미를 해석하고 정보간의 관계를 이해 할 수있도록 하는 것이 시맨틱 웹의 목적이다.
검색 엔진에 노출되지 않는 정보는 존재 의미가 없는 것이나 다름 없다.
검색엔진은 매일 웹사이트 정보들을 수집한 뒤, 예상되는 검색 키워드에 대응하는 인덱스를 만들어 놓는다.
이 인덱스를 수집하는 기준에 따라 HTML의 태그가 되는데, 그 중 시맨틱 태그의 사용 유뮤에 따라 인덱스 포함 여부가 결정된다.
시맨틱 태그를 사용하는 이유
1. 검색엔진 최적화(SEO)
검색엔진이 알맞은 검색결과를 내기 위해 웹사이트를 크롤링할 때 웹사이트의 내부에 담긴 정보를 토대로 사이트를 분석한다. 그럴 때, 의미있는 태그를 사용하면 좀 더 정확한 구조로 분석할 수 있도록 도울 수 있다.
2. 쉬운 소스코드 구조화
웹 브라우저가 HTML만 보고도 상단(header), 본문(main), 하단(footer), 사이드(aside) 어느 영역인지 쉽게 알 수 있습니다. 이는 웹 접근성 시각에서 볼 때도 중요하게 사용됩니다. 예를 들어 시각장애인들이 사이트를 사용할 때 사용되는 화면의 텍스트를 읽어주는 스크린 리더기 등을 통해 활용될 수 있습니다.
3. 코드 가독성 향상
여러 사람과 함께 작업을 할 때, 의미없는 <div>,<span>에 class나 id를 지정하지 않아도 쉽게 어느 부분이 헤더 영역이고, 본문 영역인지 쉽게 알 수 있다.
그래서 유지보수를 하기도 쉬워진다.
의미없는 <div><span>
<div>,<span> 요소는 콘텐츠를 의미 단위로 그룹핑하는 용도가 아니다. 즉, 의미가 없는 태그지만 CSS, JS로 DOM을 조작할 필요가 있을때 편의상 사용하는 요소이다. 의미 있는 Semantic Tags
<div>를 대체할 태그들
h1~h6 , p , ul , ol , li , blockquote ....
article, aside, nav, section, header, footer, main, detail, summary, dialog ....
<span>을 대체할 태그들
a, strong, q, sub/sup, var ....
data, time, mark, output, meter, progress ....
댓글