시맨틱 마크업, 웹 접근성, 웹 표준

1. 시맨틱 마크업

Semantic - 의미론적인

시맨틱 마크업 - 의미를 잘 전달하도록 시맨틱 태그로 문서를 작성하는 것, 웹 페이지의 구조를 명확하게 표현할 수 있다.

 

각 태그를 그 용도에 맞게 사용해야 한다.

• 헤더: <header>
• 푸터: <footer>
• 메인: <main>, <section>
• 독립컨텐츠: <article>
• 제목: <hgroup> - <h1><h2>...<h6>
• 네비: <nav>
• 리스트: <ul>과 <li>

그 외

블록 요소 안에 인라인 요소 넣기

hgroup 은 큰 거부터 사용하기

br 태그 남발하지 않기

css 는 스타일시트나 별도 코드로 분리해서 사용하기(css 인라인으로 넣지 말기)

 

css 스타일을 명시하는 태그는 적합하지 않음

ex) 글자를 진하게 할때 <b>(스타일 bold)보단 <strong>(내용 강조)을 사용해야 함

<i>(기울어진 스타일) <<< <em>(내용 강조)

 

<div><div>...</div></div>는 가급적 지양한다

 

 

시맨틱 마크업이 필요한 이유

• 검색엔진이 의미론적 마크업을 중요한 키워드로 간주하기 때문에 검색엔진 최적화(SEO)에 유리함
  검색 시 더 노출이 잘되고 검색 결과 상위에 위치하도록 함
• 웹 접근성 측면에서 효율적
  시각 장애가 있는 사용자가 페이지를 탐색할때 의미론적인 마크업을 푯말로 사용할 수 있음
• 코드 가독성이 좋아 유지 보수 용이

 

2. 웹 접근성

장애인, 비장애인 모두가 웹사이트를 이용할 수 있게 하는 방식.

모든 사용자들은 다양한 브라우저, PDA, 장애인 지원 프로그램 등을 이용하여

정보와 기능에 동등하게 접근할 수 있다.

 

웹 접근성 준수 방법

• 시각적 요소 처리 - 대체 텍스트(alt), 적절한 색상 대비, 텍스트 크기 등 고려
• 청각적 요소 처리 - 자막, 수화, 오디오 설명 등을 제공
• 키보드 접근성 - 지체 장애인 등 마우스를 사용할 수 없는 경우, 키보드만으로 웹사이트를 이용할 수 있도록 구현(tabindex)
• 웹 접근성 검사 - WCAG 준수 여부를 검사하여 웹 접근성을 확보

 

3. 웹 표준

웹에서 사용되는 기술들의 표준화, 웹 사이트를 구성하는 HTML, CSS, JS 등이 표준화된 방식으로 작성되어야 함

사용자가 어떤 브라우저나 기기를 사용해도 동일한 웹사이트를 볼 수 있어야함

 

웹 표준 준수 시 장점

• 웹 페이지 호환성 - 사용자들이 어떤 브라우저를 사용하더라도 동일한 사용자 경험을 얻을 수 있다
• SEO - 검색 엔진에서 웹 페이지를 더욱 잘 인식할 수 있다
• 유지보수 및 확장성 - 웹 페이지 제작 시 필요한 시간과 비용 절감, 유지보수 및 확장성 증가
  코드 양이 줄어 파일 크기가 줄어 서버 부담 감소
• 웹 접근성 향상

 

웹 표준 준수 방법

• DOCTYPE 선언 - 웹페이지가 어떤 버전의 HTML, XHTML 을 사용하는 지 명시
• 시맨틱 태그 사용 
• CSS 스타일 시트 사용
• 웹 접근성 고려

 

 

참고

https://inpa.tistory.com/entry/WEB-%F0%9F%93%9A-%EC%9B%B9-%ED%91%9C%EC%A4%80%EC%9D%98-%EC%9D%B4%ED%95%B4

🌐 웹 표준 & 웹 접근성 이란?

 

https://aosjehdgus.tistory.com/144

[HTML] 웹 접근성과 시멘틱 마크업(Semantic Markup)