크로스 브라우징 관련
크로스 브라우징에서도 언급됬던 내용처럼, 세상엔 다양한 브라우저가 있고 브라우저마다 랜더링 엔진이 서로 다르기때문에 발생하는 문제점들이 있다.
1. css 호환성이 서로 다르다. (즉 css 옵션을 쓸 수 있는 환경이 서로 다르다. Can I Use를 통해 확인해야 한다)
2. 구식 브라우저는 특정 자바스크립트 문법을 사용하지 못한다 (babel을 통한 폴리필의 지원으로 해결한다)
그리고, html적으로도 웹 접근성, 즉 모든 유저들이 최대한 비슷한 수준의 정보의 접근을 허용할 수 있도록 하기 위한 표준화 작업으로 필요한 것이 바로 html 태그 부분이다
HTML, XML, XHTML
HTML의 HT는 hyper text로, 단순 텍스트를 뛰어넘는 마크업 언어라는 의미를 가진다.
단순한 텍스트를 뛰어넘겠다는 의미는 순차적인 접근법 즉, 일반 책장과 같이 차례대로 확인을 해야하는 텍스트가 아닌, 태그등을 이용하여 구조화한 문서를 통해 비순차적으로 필요한 정보에 단번에 접근할 수 있게 만든다는 의미이다.
마크업 언어란, 표시한다는 의미를 뜻한다.
즉, 아까 위에서 말했던 하이퍼 텍스트를 구조적으로 나타내기 위한 마킹 방식을 뜻한다. 예를들어
목차적으로 분류한 텍스트가 그냥 나열된 텍스트보다 접근성이 뛰어난 것은 당연한 사실이다. 즉,
마크업 언어는 문서를 구조적으로 표현하기 위한 개념이다(div, a, img 등등 태그들을 이용하여)
HTML을 통해 표현을 해야 하는 이유는, 브라우저 문서에 대한 협업과 유지보수, 그리고 검색 엔진에게 정확한 자료의 제공을 위해서 그렇다.
XML? XHTML?
XML의 X는 Extensible 이라는 뜻으로, 말 그대로 확장성이 가능한 html을 뜻한다.
위에서 언급한 것처럼, html은 비교적 정형화된 태그만을 사용하도록 강제되어 있어서 태그를 커스텀할 수가 없다. 이런 커스텀에 대한 요구를 수용한 형태가 바로 XML이며, 위처럼 다양한 형태로 태그를 설정할 수가 있다.
그러나, 이런 커스텀한 방식은 유지보수적으로 어려움이 있다.
XHTML은 HTML의 자유도를 조금 더 제약한 엄격한 버전의 HTML이라고 할 수 있다.
예를들어, HTML에서는 태그의 닫히는 부분이 /> 형태로 이루어지지 않아도 임의적으로 해석하여 파싱하지만, XHTML은 반드시 닫힘 표시가 되어야 한다
또한 내용물이 존재하는 태그들은 반드시 닫힘 태그가 있어야 하거나,
Img태그에는 alt 어트리뷰트가 반드시 필요한 등의 엄격성을 요구한다.
하지만 여러가지 이유로 인해 해당 내용은 중단되고 HTML5가 등장하여 웹 표준의 기반을 다양한 기업들(구글,사파리,오페라) 등과 함께 진행하고 있다.
웹표준이란
기존 자신들의 독자성과 경쟁력을 위해서 특별하게 만들어낸 태그들이 아닌, 모든 사이트들이 표준적으로 사용할 수 있는 태그들을 사용, 이를 통해 웹 접근성을 보장하기 위한 일종의 권고안이다(W3C에서 만들고 있다)
이를 위해 등장한 것이 HTML5의 시멘틱 태그들로, 크롤러 봇들이 웹페이지를 탐색하는 데에도 이러한 표준화된 태그들을 위주로 점수를 매겨 노출도를 만들기 때문에 해당 태그들을 의미에 맞게, 그리고 규정에 맞게 사용하는 것이 중요하다.
웹 표준을 지켜서 개발을 해야 하는 이유는 다음과 같다.
📌 웹 접근성의 수준 향상
예를들어 최신 웹브라우저, 스크린리더, 모바일 등에 동일한 웹 페이지를 표현하기 위해서는 단지 웹 표준을 지켜서 개발을 하는 것만으로도 최적화된 화면을 보여주도록 만들 수 있기 때문에 필요하다.
📌 구조분리
기존에 div를 통해서 모든것을 구분하던 html 문서는 유지보수에 어려움이 있었지만, 이렇게 의미론적으로 태그를 나눠서 구분함으로서 조금 더 손쉬운 구분과 카테고리화가 가능해졌다. 이것은 유지보수적으로도 도움이 된다.
📌 호환성
올바른 마크업 태그를 이용하여 웹사이트를 작성하면 콘텐츠가 적절하게 표현되기 때문에 하위 브라우저나 상위 브라우저에서의 동일한호환성을 기대할 수 있다.
HTML5의 콘텐츠 모델
콘텐츠 모델이란, 어떤 요소에 어떤것을 포함해야하는지에 대한 카테고리의 개념이다. 기존 어느 자식이 어느 부모 안에 들어가는지에 대해 제약이 없던 것과는 달리, HTML5에서는 각 태그별로 의미있게 카테고리화하여 문서작업을 하도록 분류하였다.
아래는 해당 카테고리들의 예시이다.
메타데이터 콘텐츠 = 문서의 기본정보를 나타내기 위한 태그들이다. 웹 브라우저에 직접적으로 표현되지 않는다.
섹셔닝 콘텐츠 = 제목과, 그 내용을 포함하는 콘텐츠의 범위를 나타내는 태그들이다. (h 시리즈 헤딩과, 아웃라인을 내부에 포함해야 한다)
플로우 콘텐츠 = 섹셔닝과 메타데이터를 제외한, body에 들어가게 되는 대다수의 일반적인 태그들을 뜻한다.
인터엑티브브 콘텐츠 = 사용자와 상호작용이 가능한 태그들을 뜻한다
아웃라인을 짜기 위한 방법으로
아웃라인이란, 문서의 정보구조를 정확하게 알기 위한 목차 구조 구성을 의미한다.
예를들어, 모든 컨테이너를 div로 작업한 문서의 아웃라인 구조는 이러하다
반대로, 시멘틱 태그적인 의미로 일부를 변경한 도큐먼트의 형태는 다음과 같다
이와 같이, 아웃라인에 맞는 형태의 태그들을 선언하고 작업하는 것은 구조적으로 의미가 있다.
또한, 각 태그들의 자손들에게 들어갈 수 없는 태그들로 선언하는 것을 예방하기 위한 검사 사이트가 존재한다
예를들어, html 문서에 strong 태그에 섹셔닝 컨텐츠인 section이 들어가있을 경우,
이처럼 flow 콘텐츠가 있는 장소에 section이 사용되었다고 말해주고 있다.
html5 선언을 위한 문서정의
html 파일의 최상단에 보이는 DOCTYPE html이 바로 해당 문서가 html5로 이루어진 문서라고 선언해주는 역할을 한다.
기존에는 html 문서의 버전마다 선언해줘야 하는 DOCTYPE의 형태가 달랐기 때문에 복잡했지만, html5의 목표는 모든 브라우저에서 가능한 표준모드로 랜더링을 할 수 있도록 하는것이 목표이기 때문에 간소하게 표현된다.
