[TIL No.22] 웹 표준, Sementic HTML

오늘의 주제

1. 웹 표준
2. Sementic HTML

 

#1. 웹 표준

(1) 웹이란?

웹 모식도 / https://ds-b.jp/media/what-is-web/

웹을 한 단어로 치환하면 월드-와이드-웹(World-Wide-Web)일 것이다. 더 포괄적인 개념으로는 다양한 의미를 가질 수 있지만 개발자의 입장에서는 동의어로 생각해도 무방하다. 그렇다면 이것을 한 문장으로 정의하면,

 인터넷에 연결된 컴퓨터를 통해 사람들이 정보를 공유할 수 있는 전 세계적인 정보 공간을 말한다.

웹이라고 하면 우리가 지금 이 게시물을 읽고 쓰는 블로그도 그 일부분일 것이고, 관공서에서 만든 홈페이지 기업에서 서비스를 직접 제공하기 위해서 또는 자신의 브랜드나 기업을 홍보하기 위해서 만들고 운영하는 웹페이지 그 외에도 무수히 많은 공간들이 인터넷을 매개로 존재하고 이용되고 있을 것인데 그 모든 것을 포괄하는 개념이다.

 

단순히 한 공간에 방문하는 것에 그치지않고 사용자는 웹에서 다양한 상호작용을 한다. 이미지,텍스트,사운드와 같은 정보를 웹에서 얻을 수도 있으며, 지금 블로그 글을 쓰는 행위처럼 직접 공유할 수도있다. 또한, 하이퍼링크를 걸어 내가 참조한 웹페이지를 사용자가 방문하도록 할 수도 있다. 또는 Tistory에서 설계해놓은 UI를 따라가다가 내 블로그 내의 다른 게시물을 보러갈 수도 있고, 비슷한 주제의 다른 블로그의 게시물로 이동해서 정보를 검색할 수도 있다. 

 

이처럼, 웹은 인터넷을 매개로 텍스트나 그림, 소리, 영상 등과 같은 멀티미디어 정보를 하이퍼텍스트 방식으로 연결하여 제공한다.

 

하이퍼텍스트(hypertext)란, 문서간에 서로 참조할 수 있는 기술을 말하며 HTML 기반으로 작성된 웹의 핵심 개념 중 하나이다. 이 때, 다른 문서로 연결되는 참조를 하이퍼링크(hyperlink)라고 한다.

 

 

웹의 특성이나 발전과정 등은 더 잘 정리된 곳이 있기 때문에(웹 2.0, 웹 3.0은 좀 더 공부해볼 주제이긴하다..언젠가...), 오늘 포스팅은 웹 표준에 대해서 간단하게 정리해보고 Sementic HTML을 통해 어떻게 웹 표준을 준수할 수 있을지에 더 초점을 맞추어보도록 하겠다.

웹 3.0 개념 / https://m.upbitcare.com/academy/education/blockchain/292

 

 

(2) 웹 표준

웹 표준 / https://seulbinim.github.io/WSA/standards.html

 

웹 표준이란, 우리가 웹 사이트를 구축하기 위해 사용하는 기술이다. MDN 설명을 읽다가 HTML Living Standard를 연결해줘서 들어가서 읽는데 번역을 해서 봐도 머리가 빙빙 돌아서 일단 중단했다.

웹 표준을 당장 신경써서 개발하는 것은 사치일지도 모르겠다. 초,중,고등학교 시절 그리고 대학교 재학 중에도 크롬으로 넘어오기 전까지 계속 사용하던 인터넷 익스플로어가 이렇게 끝을 맞이할 줄은 몰랐지만, 다행히도(?) 브라우저 호환성에 문제가 있던 인터넷 익스플로어의 공식 지원이 종료된 지금 특별한 경우를 제외하고는 웹 표준을 지켜 개발하기만해도 브라우저 호환성에 대해 걱정할 필요가 없다. 그렇다면 웹 표준을 준수하는 개발의 출발점은 무엇일까? Sementic HTML의 적절한 활용이되겠다.

 

#2. Sementic HTML

(1) Sementic HTML의 개념

 

우리는 웹 페이지를 구축할 때, 시맨틱과 비시맨틱 HTML 요소의 조합을 사용한다. '시맨틱'이란 단어는 '의미와 관련된'을 의미하므로, 시맨틱 요소는 여는 태그와 닫는 태그 사이의 내용에 대한 정보를 제공한다. 요소가 어떤 기능을 하게 될 것인지에 대한 의미를 가지고 있는 요소를 시맨틱 요소라고 한다. 그리고 시맨틱 요소를 적절하게 사용하여 구성한 HTML을 시맨틱 HTML이라고 한다.

시맨틱 HTML을 사용하면, HTML 요소가 어떻게 표현되는지가 아니라 그 요소가 가지는 의미에 따라 선택할 수 있다. <div>와 <span>과 같은 요소는 태그 내부에 무엇이 있는지에 대한 컨텍스트를 제공하지 않아 의미론적이지 않다. 예를 들어, 헤더 정보를 포함하기 위해 <div> 요소를 사용하는 대신, 헤더 섹션으로 사용되는 <header> 요소를 사용할 수 있다.<header> 태그를 사용하면 열기 및 닫기 태그 안에 어떤 정보가 있는지에 대한 컨텍스트를 제공한다.

 

(2) 시맨틱 HTML을 사용하는 이유는 무엇인가?

1. 접근성: 웹 접근성은 나이, 성별, 장애 여부, 사용 환경을 떠나서 항상 동일한 수준의 정보를 제공할 수 있어야 함을 뜻한다. 시맨틱 HTML은 모바일 기기와 장애인을 위한 웹 페이지 접근을 가능하게 한다. 화면 판독기와 브라우저가 코드를 더 잘 해석할 수 있기 때문이다. 한 가지 예시를 들면, 시각 장애인의 경우 웹 페이지에 접근할 때 음성으로 화면을 스크린리더를 이용하게 된다. 이 때, HTML이 시맨틱 요소로 구성되어 있다면 화면의 구조에 대한 정보까지 추가로 전달해줄 수 있어 콘텐츠를 좀 더 정확하게 전달할 수 있게 된다. 시맨틱 요소만 잘 사용해도 웹 접근성을 향상시킬 수 있는 것이다.
2. SEO(Search Engine Optimization) 측면: 시멘틱 HTML의 사용은 웹사이트 SEO, 즉 검색 엔진 최적화를 개선한다. 이것은 웹페이지를 방문하는 사람들의 수를 늘리는 과정이다. 더 나은 SEO를 사용하면 검색 엔진이 웹 사이트의 콘텐츠를 더 잘 식별하고 가장 중요한 콘텐츠의 가중치를 적절하게 지정할 수 있다. 검색 엔진은 HTML 코드를 보고 문서의 구조를 파악한다. <div> 와 <span> 만 사용한 문서에서는 모든 요소가 비슷한 중요도의 내용을 담고 있다고 판단하는데, 시맨틱 요소를 사용하면, 어떤 요소에 더 중요한 내용이 들어있을지 우선 순위를 정할 수 있고, 우선 순위가 높다고 파악된 페이지를 검색 결과 상단에 표시하게 된다. 웹 페이지를 검색 엔진에 더 자주 뜨게 만들고 싶을 때, 광고비 등의 추가 지출을 하지 않고 시맨틱 HTML을 잘 짜는 것 만으로도 어느정도 효과를 볼 수 있다는 의미다.
3. 코드의 가독성: 시맨틱 HTML은 웹사이트의 소스 코드를 다른 웹 개발자들이나 디자이너가 읽기 쉽게 만든다. 여러 명의 개발자와 디자이너가 웹 페이지를 개발하면서 <div> 와 <span>와 같은 non-Sementic HTML 요소들로 코드를 작성한다면 요소의 이름을 보고서는 각 요소가 어떤 기능을 하는지 전혀 파악 할 수가 없다. 이런 경우 div 마다 class나 id를 붙여야하며, 그에 대한 컨벤션도 정해서 통일성있게 작업해야한다. 하지만, header, aside, nav, main, section, footer 이런 요소들을 사용하면 이름만 보고도 기능이 거의 정해지기 때문에 각 요소의 기능을 정의하느라 쏟아야하는 시간은 들지 않을 것이다. 그에따라 코드의 가독성이 높아져 코드를 작성하고 수정하는 시간도 단축된다.
4. 유지 보수성: 시맨틱 HTML은 웹 페이지를 유지 보수하기 쉽게 만들어준다. 각 요소에 시맨틱한 이름을 부여하면서 웹 사이트의 구조를 명확하게 만들 수 있으므로, 추가적인 작업이 필요한 경우 새로운 개발자들이나 디자이너들이 이해하기 쉬워진다. 시맨틱 HTML을 사용하면 구조가 명확해져서 나중에 수정이 필요한 경우 특정 요소를 쉽게 찾을 수 있으며, 더 나은 유지 보수성을 제공할 수 있다.
5. 재사용성: 시맨틱 HTML을 사용하면 코드를 재사용할 수 있다. 시맨틱 요소를 사용하면 다른 웹 페이지에서도 동일한 요소를 사용할 수 있다. 이를 통해 개발자들이 표준화된 코드를 작성하고 재사용하기 쉽게 만들어준다.
6. 향후 호환성: 시맨틱 HTML을 사용하면 향후 호환성도 높아진다. 웹 기술이 계속 발전하고 변화함에 따라 시맨틱 HTML은 새로운 요구 사항에 대한 적응성을 보장한다. 또한, 웹 페이지를 업데이트하는 경우 새로운 요구 사항을 충족시키기 위해 코드를 다시 작성할 필요가 없다.

시멘틱 HTML은 이와 같이 장점이 많은데, 어떤 요소들이 어떤 기능을 하는지 살펴보고 마무리하자. 내일은 이런 요소들을 이용해서 과제를 하고 원티드 프리온보딩 사전과제를 제출한 것과 그것에 대한 지속적이 업데이트를 하면서 Sementic HTML의 적용에 대해서도 다시 한 번 고찰해보자.

 

(3) 시멘틱 HTML의 종류

 

1) Header와 Nav

<header>는 링크를 포함하거나 소개하는 내용을 담고 있으며, <h1>부터 <h6>까지의 hgroup을 포함하고 있는 경우가 많다.

반드시 문서의 최상단에 위치하는 것은 아니며, article,section의 머릿말을 나타낼 때 사용할 수도 있다. 또한, aside 요소의 상단에도 header 요소가 들어갈 수 있다.

<header>
  <h1>
     Painful moments in life!
  </h1>
</header>

MDN 사이트를 통해서 예시를 많이 들어서, 나도 들어가서 개발자도구를 사용해서 이리저리 분석해보았다.

먼저, aside(nav) 요소 안에 있는 header 요소를 다음과 같이 확인할 수 있었다.

그런데, sementic HTML과의 연관성은 매우 작지만 이 aside 바가 화면 크기에따라 양쪽에 있던게 왼쪽으로 모였다가 다시 화면이 커지면 양쪽으로 퍼지는 것을 알 수 있었다. 이게 어떻게 구현이 되어서 그런것인지 궁금해서 알고싶었고 나도 이렇게 구현하고 싶었다.(꼭 해야하는 것은 아니지만 나도 할 줄 알고 싶다..!!)

 

offset으로 구현된게 아닐까 싶어서 열심히 찾아보고 overflow까지 검색해보게 되었는데.. 아직 정확하게는 모르겠다.

<nav>는 목차 별 링크를 담고 있는 block을 정의할 때 사용된다. (0305 추가) 조금 더 알아보니 오른쪽과 왼쪽에 aside를 만들어놓고 media query를 이용하여 일정 크기를 기준으로 보여주다가 사라지게 했다가 이런 방식을 이용했는데 나도 한 번 만들어보고나서 추후에 별도로 글을 쓸 일이 있으면 써봐야겠다.

 

다음 시멘틱 요소를 살펴보자.

 

2) Main, Footer

Main은 웹페이지의 주된 내용을 감쌀 때 주로 사용된다.