웹사이트의 뼈대를 담당하는 HTML

여러분이 웹브라우저로 접속해서 보는 모든 화면은 HTML, CSS, 자바스크립트라는 컴퓨터 언어로 구성되어 있습니다. 웹사이트를 만들 때는 컴퓨터가 이해할 수 있는 이 세 가지 언어로 작성된 문서를 전달해야 합니다. 웹브라우저는 이 문서들을 읽고 우리가 보는 화려한 화면으로 변환합니다.

기억하고 있나요?

• 마크다운 내용으로 마인드맵을 그려주는 확장 프로그램은 무엇이었나요?
• 흐름도를 그리고 수정할 수 있는 확장 프로그램은 무엇인가요?
• 정답: Mermaid입니다.
• 정답: draw.io입니다.

요즘은 다양한 웹 개발 도구를 활용해 웹사이트를 만들지만, 어떤 도구를 쓰더라도 결국 바탕에는 이 세 가지 기술이 자리하고 있습니다. 그래서 여러분이 웹사이트를 만들고 싶다면 이 세 가지 기술에 대한 이해는 필수입니다. 여기서 중요한 것은 잘 사용하는 것이 아니라 잘 이해하는 겁니다. 그렇다면 HTML, CSS, 자바스크립트는 웹사이트에서 각각 어떤 역할을 할까요? 여기서는 이 세 가지를 우리 몸에 비유해서 설명해보려고 합니다.

HTML(HyperText Markup Language)은 웹사이트의 가장 기초가 되는 ‘문서의 구조’를 정의하는 언어입니다. 웹사이트에 포함되어 있는 텍스트, 이미지, 영상 등과 같은 정보성 데이터는 모두 HTML이 담당합니다. HTML은 ‘요소’라는 것을 이용해서 텍스트나 이미지에 의미를 부여하고 표현하는데요, 이렇게 정보에 의미를 추가로 부여하는 이유는 정보 검색에 편의를 더하기 위해서입니다. 예를 들어 h1이라는 요소로 감싼 텍스트는 ‘이 문서의 가장 중요한 제목이다’라는 의미를 가집니다. h2는 그다음 수준의 제목이 되겠죠.

이처럼 정보에 의미를 부여하면 구글이나 네이버와 같은 검색 엔진이 문서에서 중요한 데이터를 우선적으로 탐색할 수 있습니다. 이를 통해 검색 엔진 결과에 더 빠르고 정확하게 노출되는 생태계가 구성되므로, 이런 HTML 요소의 의미를 파악하는 것은 꽤나 중요합니다. 그리고 검색 엔진이 중요한 정보를 우선 인식하여 검색 결과에 먼저 노출되도록 하는 과정을 검색 엔진 최적화, 영어로는 SEO(Search) (Engine Optimization)라고 합니다. 이렇게 HTML은 웹 문서의 뼈대와 살을 담당하는 중요한 기술입니다.