[IT] HTML5 시멘틱 태그와 웹 표준에 대하여 ! (+ 웹 접근성)

ㅇ HTML5 에서 시멘틱 태그를 사용하는 이유에 대해 알아보자

1. 먼저 시멘틱 태그란 무엇인가 ?

ㅡ 웹 페이지의 구조를 쉽게 알 수 있도록 정의된 태그를 의미한다 

 

2.  웹페이지의 구조를 쉽게 안다는 것은 무엇인가 ?

ㅡ  웹페이지의 구조를 이해하는데 사람 뿐만 아니라, 기계도 이해하기 쉽게 태그의 구조를 배치한다.

 

3.  기계가 웹페이지의 구조를 알면 어떻게 되는가 ? 장점이 잇다 !!

ㅡ 장점

1) SEO( Search Engine Optimization: 검색엔진 최적화 )에 유리하다

2) 유지보수에 유리하다. (의미 있는 태그명을 사용해서 가독성이 좋아진다 )

3) 웹접근성이 좋아진다 ( 스크린리더와 같은 환경에서는 웹 접근성과 사용상을 향상 시켜준다.)

 

4. 시멘틴 태그의 종류 

시멘틱 태그

 

<address> : 콘텐츠 작성자, 사이트 소유자의 정보등을 부가적으로 담는 기 

<article>  :여러 문단을 묶는 태그, 독립적인 컨텐츠를 정의한다.

<aside> : 콘텐츠나 페이지의 외곽에 위치한 요소들을 묶는 태그이다. 보통 퀵메뉴, 스크롤탑버튼 등..

<details> : 참조 또는 표기목적으로 표시,강조하는 태

<dialog> : 다이얼로그 박스창을 정의한다.

<figcaption> : <figure>태그로 정의한 콘텐츠의 제목이나 설명 등을 작성한다.

<figure> : 자체 포함된 콘텐츠를 지정한다 . 일러스트레이션, 다이어그램, 사진 , 코드목록 등 ..

<footer> : 웹페이지나 일부분의 꼬리말 (끝 부분을) 지정한다 .

<header> : 웹페이지나 일부분의 머리말 (상단 부분)을 지정한다.

<hgroup> : 제목과 관련된 부제목을 묶는 태그

<iframe> : 웹문서안에 다른 웹 문서를 가져와서 표시하는 태그

<main>  : 페이지의 가장 중요한 메인부분을 지정한다 (중복불가)

<mark> : 현재 맥락에 관련이 깊거나 중요한 부분 강조

<meter> : 주어진 범위나 %로 지정된 데이터를 표시

<nav> : 페이지의 네비게이션을 지정한다

<progress> : 작업의 진행 정도 표시

<section> : 카테고리별 섹션 구분, 전체적인 주제, 여러 컨텐츠를 그룹화 하는 태그 

<summary> : <detaile> 태그를 통해 보이는 콘텐츠를 담는 태그로 사용한다.

<time> : 시간의 특정지점이나 구간, datetime같은 속성 이용한 알림 기능 구현 가능 

<wbr> : 텍스트에서 줄바꿈 . <br>처럼 무조건 줄바꿈말고 공간이 있으면 줄바꿈 하지 않음

 

---

ㅇ 웹 표준이란 무엇인가 ?

ㅡ WWW(World Wide Web,  W3)의 공식 표준, 기술 규격을 가리키는 일반적인 용어로

ㅡ W3C의 권고안을 사용하는 것을 말한다 .

ㅡ 사용자가 어떠한 운영체제나 웹브라우저로 웹사이트에 접속하던지 동일하게 정상적으로 작동해야함을 의미한다 .

ㅡ 사용성과 접근성에 직접 영향을 미친다 .

ㅡ 웹문서의 구조, 표현, 동작 을 구분해서 사용하는 것을 뜻한다.

ㅡ W3C 의 표준안에는 HTML, CSS, JavaScript 등에 대한 규정이 있다 .

 

ㅇ  웹접근성은 무엇인가?

ㅡ 어떤 사용자든지 웹 브라우저의 정보에 접근해서 이용할수 있게 하는 것 . 

ㅡ 주로 스크린리더 (브라우저의 정보를 읽어준다) 로 사용하는 사용자들을 위함 (고령자, 장애우 등)

ㅡ 또한 SEO (검색엔진 최적화) 에도 도움을 준다 .

ㅡ 웹 접근성을 위해 시멘틱 태그를 사용하고 , aria 속성을 이용하여 스크린리더로 정보를 읽을 수 있도록 한다 .

 

>> aria 속성의 간단한 사용법은 아래 참조

https://a9i929.tistory.com/86

[HTML] WAI-ARIA 이란 ?? ( aria hidden 사용법)

 

>> aria 속성의 자세한 사용법은 공식사이트 참조

https://www.w3.org/TR/wai-aria-1.2/#aria-label

Accessible Rich Internet Applications (WAI-ARIA) 1.2