Leeyanggoo
[HTML] 시멘틱(Semantic)과 논리적인 순서(Logical sequence) 마크업 본문
시멘틱 마크업Semantic Markup
시멘틱(Semantic)은 '의미론적인'의 뜻으로, 시멘틱 마크업이란 웹 페이지의 구조와 의미를 고려하여 태그를 사용하는 방식을 의미합니다.
header, nav, section, article, aside, footer 등 각각의 태그 안에 알맞은 데이터를 채워넣음으로써 보다 명확한 정보를 갖춘 웹 페이지를 구현할 수 있습니다.
| header | 웹 페이지의 소개 및 탐색에 도움을 주는 콘텐츠를 나타냅니다. 제목, 네비게이션, 검색 등의 내용을 포함합니다. |
| nav | 메인 메뉴나 목차, 색인 등을 포함하는 구획입니다. |
| section | 맥락이 같은 요소들을 주제별로 그룹화하는 태그. 문서의 일반적인 영역을 나타냅니다. |
| article | 게시판, 블로그 포스팅, 뉴스 기사 등과 같이 독립적으로 배포하거나 재사용하는 요소들을 나타내는 태그입니다. |
| aside | 메인 콘텐츠와 직접적으로 관련이 없는 사이드 메뉴나 광고 등을 포함합니다. |
| footer | 관련된 문서의 링크, 작성자나 저작권에 대한 정보를 담고 있습니다. |
그외의 여러 HTML 요소 태그는 여기를 참고해주세요! :)
그렇다면 왜 HTML 문서를 작성할 때 요소의 의미에 따라 마크업을 해야 하는 걸까요?
여러 이용자가 웹 사이트를 더 쉽게 이해하고 사용할 수 있도록 하기 위한 웹 표준인 WGAG(Web Content Accessibility Guidelines)에서도 시멘틱 마크업을 권장하고 있습니다.
그 이유는 3가지 정도를 들 수 있습니다.
1. 검색 엔진 최적화 SEO(Search Engine Optimization)
검색 엔진은 웹 페이지의 구조를 분석하여 콘텐츠의 중요성을 평가합니다.
시멘틱 마크업을 사용하면 페이지 구조가 명확해져 검색 엔진이 웹 페이지의 콘텐츠를 올바르게 해석할 수 있습니다.
이에 따라 검색 엔진은 사용자에게 도움이 되는 검색 결과를 제공할 수 있습니다.
2. 웹 접근성
시멘틱 마크업은 HTML 태그를 사용하여 문서 구조를 명확하게 표현하므로 스크린 리더 사용자나 저시력, 청각장애 등의 장애뿐만 아니라 학습장애와 인지장애를 포함한 더 광범위한 장애인들을 위해 보다 더 접근 가능한 콘텐츠를 만들 수 있습니다.
3. 유지보수
시멘틱 마크업은 웹 페이지의 구조를 명확하게 표현하기 때문에 HTML 코드의 가독성이 향상됩니다.
이는 개발자들이 유지 보수 및 개발 작업을 수행함에 있어 더 빠르고 정확하게 작업을 수행할 수 있게 해줍니다.
논리적 순서 마크업Logical sequence markup
시멘틱 마크업을 통해 각 태그의 의미가 있다는 걸 알게 됐다면, 이제는 그 태그들을 논리적인 순서에 맞게 배치해야 합니다.
논리적 순서 마크업은 키보드나 터치패드와 같은 입력장치만으로 웹 페이지의 모든 컨텐츠를 논리적 순서로 이동하여 사용할수 있도록 하는 '입력장치 접근성'과 밀접한 관련이 있습니다.
'입력장치 접근성'이란 다양한 입력장치의 특징에 따라 접근성을 고려하여 웹 페이지나 앱을 디자인하고 개발해야 함을 의미합니다.
| 키보드 접근성 | 모든 기능은 키보드로 접근할 수 있어야 합니다. 이는 주로 Tab, Enter, Space 키 등으로 접근할 수 있어야 합니다. |
| 마우스 및 터치스크린 접근성 | 마우스 또는 터치스크린으로도 모든 기능을 이용할 수 있어야 합니다. |
| 음성인식 기술 지원 | 음성인식 기술을 사용하여 정보를 입력하거나 제어할 수 있도록 해야 합니다. |
| 컬러 강조 대체 | 색의 차이만으로 정보를 전달하지 않고, 다른 방식으로 정보를 전달할 수 있어야 합니다. |
| 적절한 텍스트 크기와 대조 | 텍스트 크기와 대조를 조정하여 사용자가 쉽게 읽을 수 있도록 해야 합니다. |
| 적절한레이아웃 | 콘텐츠와 디자인이 사용자가 쉽게 접근하고 이해할 수 있는 레이아웃으로 구성되어야 합니다. |
예를 들어 뉴스 기사를 논리적인 순서로 마크업한다면 다음과 같이 표현할 수 있습니다.
<article>
<h1>기사 제목</h1>
<p>작성일자</p>
<section>
<h2>첫 번째 섹션 제목</h2>
<p>첫 번째 섹션의 내용</p>
</section>
<section>
<h2>두 번째 섹션 제목</h2>
<p>두 번째 섹션의 내용</p>
</section>
<section>
<h2>세 번째 섹션 제목</h2>
<p>세 번째 섹션의 내용</p>
</section>
</article>
위의 코드에서 h1 태그는 기사의 제목을, p 태그는 작성일자를 나타내고, section 태그는 각각의 섹션을 구분합니다.
또한, h2 태그는 각 섹션의 제목을 나타내고, p 태그는 각 섹션의 내용을 나타냅니다.
이렇게 마크업을 하면 스크린 리더를 사용하는 사용자나 키보드만으로 이용하는 사용자도 웹 페이지의 구조를 파악하기 쉬워집니다.
월드 와이드 웹 (World Wide Web)을 창시한 '팀 버너스 리(Tim Berners-Lee)'는 다음과 같이 말했습니다.
웹이란 '장애에 구애 없이 모든 사람들이 손쉽게 정보를 공유할 수 있는 공간'
따라서 우리는 웹의 기본적 철학에 따라 웹 접근성의 중요성에 대해 이해하고, 웹 콘텐츠를 제작할 때 어느 누구든 장애에 구애받지 않고 웹에 접근할 수 있도록 제작해야 할 것입니다.
