**HyperText Markup Language (HTML)**은 웹 페이지를 구성하는 언어이다.
예를 들어 naver.com에 접속하려고 하면, 1) 브라우저는 naver.com을 운영하는 웹 서버에 네트워크를 통해 HTTP 요청을 보낸다. 그러면 2) naver.com을 운영하는 웹 서버는 브라우저에게 웹 페이지를 반환한다.
사실 여기서 웹 페이지라는 것은 자세히 들여다보면 결국 텍스트로 이루어진 정보에 불과하다. 이 텍스트에는 웹 페이지가 어떤 형태로 구성될지가 정해진 규칙에 따라 작성되어 있다. 브라우저는 이 규칙을 기반으로 텍스트를 해석하여 화면에 웹 페이지를 시각적으로 표현한다.
여기서 규칙이라는 것은 HTML이라는 언어의 규칙을 따른다. HTML은 웹 페이지를 구성하는 내용을 정의하고 그 구조를 만드는 데 사용되는 언어로, 브라우저가 이를 읽고 해석하여 시각적인 디자인과 콘텐츠로 화면에 보여주는 원리가 숨어 있다.
🚩 이해를 돕고자 쉽게 설명하기 위해서 웹 페이지가 HTML로 이루어져있다고 했지만 실제로는 HTML과 더불어 JavaScript 또는 CSS 등 다양한 요소가 포함될 수도 있다.
다음 사진과 같이 파이어폭스 또는 크롬 브라우저에서 URL 주소창에 example.com를 입력한 후, 엔터키를 눌러 예시 웹사이트에 접속한다.
키보드에서 F12 키를 눌러서 아래 사진의 빨간 네모로 표시된 바와 같이 개발자 도구를 연다.
이후 아래 사진에서 작은 빨간 네모로 표시된 Inspector 탭을 누른다. 그러면 큰 빨간 네모로 표시된 바와 같이 <와 >과 반복적으로 등장하는 텍스트가 나오는데, 이것이 바로 웹 페이지의 HTML 소스 코드이다.
이처럼 HTML이 웹 페이지에 존재하는 텍스트, 상자, 입력 폼, 버튼, 하이퍼 링크, 이미지 등 웹 페이지에 존재하는 구성요소의 위치와 구성을 정의하고, 브라우저가 이를 해석하여 우리에게 시각적으로 보여주는 원리이다.
앞서 브라우저에서 키보드의 F12 키를 눌러 개발자 도구를 열어서 실습을 진행했다. **개발자 도구(Developer Tools, DevTools)**는 브라우저에 내장된 웹 개발 및 디버깅 도구로 웹 해킹을 수행할 때 빈번하게 사용되는 도구 중 하나이다. 개발자 도구는 웹 개발자가 웹 페이지를 분석하고 디버깅하는 데에 사용된다. 웹 페이지의 소스 코드를 살펴보거나 브라우저와 웹 서버 간의 통신 내용을 확인하거나 디버깅할 수 있는 다양한 기능을 제공한다.
HTML이 언어인 만큼 C 언어나 Python처럼 특정한 문법이 존재하며, 이 문법에 따라 정해진 규칙대로 작성해야 한다. 기본적으로, HTML은 **요소(Element)**들로 이루어져 있고, 이 요소들을 어떤 규칙으로 작성해야 하는지를 문법이라 부를 수 있다. 또한 HTML은 필수적으로 존재해야 하는 요소들이 있다.