구조적인 HTML을 써야하는 이유

[ 에릭 마이어 - CSS 완벽가이드] 의 4~5페이지에 있는 내용입니다. 2009년에 출판된 책이긴 하지만 지금 봐도 여전히 재미있고 좋은 내용이 많습니다.

 

http://www.yes24.com/Product/Goods/3300334

CSS 완벽 가이드

구조적인 HTML 마크업을 써야 하는 이유 

구조화되지 않은 페이지는 컨텐츠의 색인 작업을 상당히 어렵게 만든다. 정확하고 검색능력이 탁월한 검색 엔진은 페이지 제목이나 페이지 안에 있는 섹션 제목, 아니면 문단 내의 텍스트나 제작자가 중요하다고 표시한 문단만 사용자가 검색하도록 할 수도 있다. 하지만, 이런 멋진 결과는 페이지의 컨텐츠가 반드시 어떤 구조적인 마크업(대부분의 페이지가 갖고 있지 않은 바로 그 마크업) 안에 포함되어 있어야만 얻을 수 있다. 예를 들어 구글은 마크업 구조를 고려해서 페이지의 순위를 정한다. 따라서 구조적인 페이지는 구글 검색 순위를 높여 줄 것이다.

불확실한 구조는 접근성을 떨어뜨린다. 여러분이 시력을 잃고 음성 합성 블우저에 의존해서 웹을 검색한다고 상상해보자. 브라우저가 섹션 제목만 들려줘서 어떤 섹션을 더 듣고 싶은지 선택할 수 있도록 해주는 구조화된 페이지와 무엇이 제목이고 무엇이 문단이며 어떤 정보가 중요한지 구분하지 않고 모든 컨텐츠를 읽어주는 구조화되지 않은 페이지 중 어느 쪽을 좋아하겠는가? 다시 구글로 돌아가보자. 사실상 구글 검색 엔진은 어떤 웹 페이지를 보고 어디에서 물건을 구입할 것인가를 전적으로 자신에게 의지하는 수백만 명의 친구를 거느린 세상에서 가장활동적인 시각 장애 사용자다. ( 구글 검색 엔진 자체는 시작 장애를 가진 사람과 비슷하게 페이지를 인식한다. 이미지나 동영상을 볼 수도 없고, 자바스크립트로 작성된 메뉴를 인식하지도 못한다. 기업 웹사이트가 부족한 접근성에 대한 핑계로  * '시각장애가 있는 고객이 들어올 가능성이 거의 없다'라고 하지만 구글이 제대로 페이지를 색인하면 수백만명의 잠재적인 고객을 끌어들일 수 있다. )

고급 페이지 표현 기법은 특정한 문서 구조에서만 사용할 수 있다. 섹션 제목과 화살표만으로 이루어진 페이지를 상상해보자. 사용자는 자신에게 맞는 섹션을 선택해서 클릭할 수 있고, 그러면 해당 섹션의 내용이 나타나게 된다.

구조화된 마크업은 유지보수하기 쉽다. 다양한 브라우저 호나경에서 페이지를엉망으로 만들던 작은 문제 하나를 찾기 위해 다른 사람(또는 여러분 자신)이 작성한 HTML 소스를 한참 동안이나 뒤졌던 적이 얼마나 많았는가? 흰색 하이퍼링크가 들어 있는 사이드바 하나를 만들기 위해서 중첩된 table과 font 요소를 작성하느라 얼마나 많은 시간을 소모했는가? 제목과 그 뒤에 이어지는 내용을 적당히 구분하기 위해서 얼마나 많은 br 요소를 사용했는가? 구조적인 마크업을 사용하면 코드도 깔끔해지고 찾고 싶은 부분도 더 쉽게 찾을 수 있게 된다.

 

 

참고 : CSS 완벽 가이드

함께 보면 좋은  : https://www.pluralsight.com/guides/semantic-html