웹 표준과 Semantic HTML

인터넷과 웹

인터넷은 전세계적으로 연결된 컴퓨터 네트워크 통신망이다. 웹 뿐만 아니라 온라인 게임, 이메일, 모바일 앱을 포함한다. 
웹은 문서, 이미지, 영상 등을 볼 수 있는 공간이다. 웹은 인터넷에 포함되어 있다. 이 공간은 인터넷 익스플로러, 크롬, 파이어폭스, 오페라 등 다양한 웹 브라우저가 있다. 그런데 2000년대 초에 어떤 사이트가 어떤 웹브라우저에서는 작동을 하고 어떤 브라우저에서는 작동을 안하거나, 어떤 브라우저에서는 버튼이 보이고 어디에서는 안보이는 등의 호환성 문제가 있었다.
그래서 개발자들이 동일한 서비스를 만드는데 브라우저별로 구현을 해주어야 했다. 힘들었을 것 같다. 😰
이러한 브라우저 호환성 문제를 해결하기 위해 웹 표준이 등장했다. 웹 개발 형식을 통일시킨 것이다.

 

그래서 생겨난 웹 표준

웹 표준은 웹에서 표준적으로 사용되는 기술이나 규칙이다. 어떤 운영체제를 사용하든 어떤 브라우저를 사용하든 웹페이지가 동일하게 나오고 정상적으로 작동하게 한다. 

 

장점

우선, 웹 표준을 지키기 위해서 HTML, CSS, JavaScript를 각각 구조, 표현, 동작에 맞게 구분하여 사용한다.
이는 유지보수를 편리하게 한다. 문제가 생기면 모든 코드를 샅샅이 뒤지며 어느 부분이 잘못 되었는지 찾고, 전부 수정해줘야 하는 것보다 구조, 표현, 동작 부분이 구분되어있는 코드에서 찾고 해당 부분만 수정하는 것이 더 쉬울 것이다.

웹 표준을 지키면 웹 브라우저의 종류나 운영체제, 기기의 종류에 상관없이 동일한 결과물을 볼 수 있다.

또한 기기뿐만 아니라 웹 페이지를 사용하는 사람들도 다양하다. 웹 표준을 잘 지켜서 다양한 환경의 사람들이 서비스를 이용할 수 있도록 해야 한다.

웹 표준을 지키면 검색엔진에 노출되는 확률이 높아지고 우선순위가 될 수 있다. 적절한 HTML요소를 사용하고, 웹 페이지에 대해서 정보를 정확하게 작성함으로써 별도로 광고비용을 들이지 않아도 검색이 잘 되는 효과를 볼 수 있다.

 

웹 표준을 지키기 위해서 Semantic HTML

가장 중요하고 쉬운 것은 Semantic HTML을 사용하는 것이다. 
문서는 div와 span만으로도 표현할 수 있다. 그러나 모든 요소들을 div와 span만 사용한다면 각각 id 또는 class 를 모두 부여해주어야 할 것이고 네이밍을 통일해야 하고, 코드가 알아보기 어려울 것이다.
개발자간 소통을 위해서도 의미있는 태그를 사용하는 것이 좋다.

검색 엔진은 HTML 코드를 보고 문서의 구조를 파악한다. div와 span으로만 이루어진 문서는 검색 엔진이 웹 페이지의 모든 요소가 동일한 중요도를 가지고 있다고 판단한다. 이는 키워드 검색에 방해가 된다. 의미있는 태그를 사용하면 태그의 종류에 따라 중요도가 달라지고 우선순위가 달라져서 우리가 어떤 정보를 강조하고 싶은지를 정하고 검색 엔진에 더욱 잘 노출되도록 할 수 있다.

한편, 웹 접근성 측면에서도 좋다. 시각장애인의 경우 음성 스크린 리더를 사용하여 웹 페이지를 이용한다. 이 음성 스크린 리더는 HTML 태그의 종류에 따라 더욱 알아듣기 쉽게 읽어준다. Semantic HTML을 사용하면 더욱 구조적으로, 정확하고 쉽게 읽어준다.

가장 자주 사용되는 Semantic tag는 다음과 같다.

<header>
<nav>
<aside>
<main>
<hgroup>
<article> // 게시글, 뉴스 기사 등 독립적으로 구분해 재사용할 수 있는 부분을 의미
<section> // 문서의 독립적인 구획을 나타내며, 딱히 적합한 의미의 요소가 없을 때 사용. 서로 논리적으로 관련있는 요소들을 구분할 때 사용.
<footer>

특히, article 안에 section이 들어가는 것이 조금 더 자연스럽다. 왜냐하면 section끼리는 구분은 되어있지만 서로 논리적으로 관련되어 있어야 하고, article은 서로 독립적인 관계인데, 뉴스 기사의 경우 section 안에 article이 들어간다면 article끼리 문단이 되고 section이 하나하나의 기사가 되는, 그 반대로 사용한 예가 되기 때문이다.

 

크로스 브라우징

브라우저마다 사용하는 렌더링 엔진이 다르기 때문에 페이지를 완전히 동일하게 나타내는 것은 불가능하다. 크로스 브라우징의 목표는 동등하게 렌더링하는 것에 있다. 

특히 이 크로스 브라우징을 어렵게 하는 것이 인터넷 익스플로러였다. 한국에서 특이하게 공공기관 등에서 ActiveX 플러그인 사용을 사용자에게 강제하고, 동영상 등 멀티미디어 콘텐츠를 이용하려면 설치해야 하는 등 ActiveX를 설치해야만 웹 페이지를 이용할 수 있는 불편함이 있었고, 익스플로러의 발전이 더뎌서 최신 스펙의 CSS와 JavaScript를 지원하지 않아 특별히 인터넷 익스프로러에 대해서 크로스 브라우징을 신경써야 하는 등의 문제가 있었다.
결국 마이크로소프트사는 인터넷 익스플로러의 지원을 종료하였고, 이로 인해 크로스 브라우징의 난이도는 한결 낮아졌다.

크로스 브라우징을 하기 위해서 우선 어떤 기능과 콘텐츠가 있을 것인지, 어떤 사용자가 주 고객층이 될 것인지, 주로 사용하는 브라우저는 무엇일지, 기기는 무엇일지 등을 파악한다. 구현을 위해서 어떤 기능을 사용할 지 등을 기획한다.

크로스 브라우징의 워크플로우는 기획 → 개발 → 테스트/발견 → 수정/반복 이다.

 

자주 틀리는 마크업

1. 인라인 요소 안에 블록 요소 넣으면 안된다.

<span><div>인라인 안에 블록</div></span> // 나쁜 예

2. <b> <i> 대신 <strong> <em> 을 사용하자.
<b>와 <i>는 각각 글씨를 굵게하고 기울이는, 표현을 기준으로 한 태그이다. 시맨틱하지 않다. 같은 기능인 <strong>과 <em>을 써야 한다.

3. 글씨 크기를 설정하기 위해 <hgroup>을 사용하지 말자.
<h1> 등의 <hgroup> 태그는 문서를 구조적으로 나타내는데 사용되어야 한다. 단순히 본문의 어떤 글씨는 커야 해서 <h3>을 쓰면 안되고, 큰 제목, 작은 제목, 더 작은 제목 등 계층적으로 작성할 때 사용한다.

4. <br />은 텍스트 내에서 줄바꿈을 할 때 사용한다. 요소들 사이에 간격을 주는 것은 CSS 스타일링으로 한다.

5. HTML 태그의 style 속성으로 인라인 스타일링을 하는 것을 지양한다.
스타일링은 CSS파일에서 해준다. HTML, CSS, JavaScript 모두 각각의 뚜렷한 역할에 맞게 사용한다.