최근에는 웹을 개발할 때 HTML5를 사용해서 웹페이지의 뼈대를 만든다.
누군가는 기존의 버전도 괜찮은거 같은데 왜 HTML5를 사용하냐고 물어볼 수도 있을 것이다.
본인은 이 글에서 기존 HTML 버전이 가지고 있는 한계와 HTML5로 업데이트하면서 얻은 점들을 중심으로 설명을 해보려 한다.
왜 HTML 5인가?
접근성, 검색 효율, 멀티미디어 지원 기능, 모바일 지원 기능을 개선시켰다.
HTML 4.01의 특장점
기존 HTML 4.01은 HTML 4.0을 안정화시켜 표현에 사용되었던 <center> 나 <font> 태그 등의 사용을 줄이기 시작했으며, 브라우저 간 구현 차이로 생긴 문제점을 개선시켰다.
그 결과로 HTML 문서는 문서의 의미에 보다 집중할 수 있게 되었으며, 브라우저 간의 호환성이 향상되는 결과를 가져오기도 했다.
HTML 4.01의 약점과 파생효과
하지만 HTML 4.01에도 한계는 존재했다.
먼저 유지 보수 측면에서 보자면 표현 목적의 태그를 사용할 지 여부를 DTD에서 선택할 수 있었으며, 이에 따라 유지보수의 난이도가 올라가는 문제가 남아있었다.
표현 측면에서는 일부 표현 목적의 태그의 경우 크기나 위치가 고정되었기 때문에 스마트폰 및 태블릿 환경에서는 요소가 랜더링되지 않는 문제점도 존재했다.
검색 효율 및 접근성 측면에서는 <div> 태그만을 사용하여 콘텐츠를 구분하였기 때문에 검색 효율을 개선시키는데 있어서 한계가 존재했으며, 시각장애인들이 사이트의 구조를 이해하는데 있어서도 한계가 존재했다.
HTML 4.01과 HTML 5의 다른 점
HTML 5로 업데이트되면서 시맨틱 태그가 추가되었으며, 이에 따라 아래의 효과를 얻을 수 있게 되었다.
- 시각장애인들의 웹문서 파악이 용이해짐
- 콘텐츠의 구분이 용이해져 검색 효율이 상승
- 표현 목적의 태그를 제거하여 유지보수 간편화
그리고 표현 목적의 태그를 제거하고 표현을 CSS 파일에서 담당하게 함으로써 다양한 화면크기에 쉽게 적응할 수 있도록 개선하였다.
또한 <audio>와 <video> 태그를 추가하여 플러그인을 설치하지 않고도 음악 또는 비디오 서비스를 사용자들에게 제공할 수 있도록 개선하였다.
HTML 5의 한계점과 개선할 점
HTML 5에서는 표현 목적의 태그(<strike> 등)을 제거하여 유지보수를 간편하게 만들려고 노력했다. 하지만 여전히 한계점은 존재한다.
HTML 문서 내부에서 여전히 <style> 태그 내에서 스타일 설정이 가능하며, <script> 태그 내에서는 스크립트 설정이 가능하기 때문에 내부 설정 및 외부 파일(스타일 및 자바스크립트 파일)과 같이 사용할 경우 유지보수가 어려워질 위험성이 남아있다.
따라서 유지보수 문제를 개선하기 위해서 HTML 문서에서는 가급적 문서의 구조 위주로 정의하고, 스타일 및 스크립트 파일은 외부에서 가져오는 것을 조직 차원에서 권장할 필요가 있다.
다만 스타일을 설정할 때 tailwind css 또는 bootstrap을 사용할 경우에는 스타일 설정을 HTML 문서에서 주로 작성하는 것을 권장할 필요가 있다.
이를 통해 유지보수를 좀 더 간편하게 할 수 있도록 개선한다면 개발자들의 개발 효율을 극대화할 수 있다. 그리고 개발자들이 HTML 문서를 작성할 때 좀 더 문서의 의미에 집중하게 하여 웹 접근성 및 검색 효율도 개선시키는 것도 가능하다.
PS
- 혹시 질문사항이나 피드백 있으시면 댓글 또는 제 인스타로 DM 부탁드립니다.
- 인스타는 제 프로필 밑에 집모양 클릭하시면 들어가실 수 있어요!!
참고자료
