HTML 알아보기

우리는 인터넷을 통해 웹사이트에 있는 정보를 쉽게 얻을 수 있습니다. 각 웹사이트는 사용자가 원하는 정보들을 웹페이지에 담고 있는데요. 어떻게 컴퓨터는 이런 정보를 사용자에게 전달할 수 있는 걸까요? 바로 프로그래밍 언어를 통해서입니다. 물론 이렇게 웹페이지에 문서나 이미지 등의 정보를 담기 위해서는 여러 언어가 쓰이지만 오늘은 가장 기본적인 언어, HyperText Markup Language(HTML)에 대해 알아볼까 합니다

 

이 HTML은 최초의 웹브라우저였던 월드와이드웹(WorldWideWeb)를 위해 개발되었던 언어입니다. 참고로 월드와이드웹(WorldWideWeb)은 도메인에 쓰이는 www(World Wide Web)하고는 별개입니다.

 

출처 펙셀

웹의 언어 HTML란?

HTML은 웹페이지를 구성하는데 있어 가장 기본적인 언어입니다. HTML로 쓰인 텍스트를 웹브라우저가 해석해 스크린 화면으로 렌더링 해주게 되는데요. 덕분에 화면에 빽빽이 채워진 글자가 아닌 문단 정렬 등으로 깔끔하게 정리된 문서를 볼 수 있는 거죠. 하지만 홀로 쓰이진 않고 주로 CSS와 JavaScript와 함께 쓰이며 스타일을 더해줘야 합니다.

 

HTML이 다른 언어와 함께 쓰이는 이유

HTML은 기본적인 요소와 내용 구성을 위해 쓰입니다. 예를 들어 이미지를 붙이고 링크를 삽입할 수 있으며, 글자 색을 바꾸거나 글씨체를 바꿀 수도 있습니다. 하지만 그 외에 것들은 벅차기 마련입니다. 만약 어떤 정보를 테이블로 표시하고 싶다면? 다음 페이지로 이동하기 위한 버튼을 만들고 싶다면? 그래서 함께 사용되는 것이 CSS와 JavaScript입니다. 이 두 언어를 통해 시각적인 효과를 더하고 원하는 기능을 추가할 수 있는 거죠.

 

HTML의 구성

HTML은 Element라 불리는 요소로 이루어집니다. 이 요소는 태그(tag)와 내용(contents)으로 구성되어 있는데요. 예를 들어 <p> Hello World! </p>의 경우 <p>와 </p>는 태그이며 그 안에 쓰인 텍스트는 내용입니다.

또한 보시면 아시겠지만 <div>, <p>, 또는 <img>와 같이 꺽쇠 괄호 <>로 둘러싸인 태그를 사용하여 정의합니다. <img>와 같은 일부 태그는 이미지를 웹페이지에 직접 가져오는 등의 기능을 수행합니다. <p>, </p>와 같은 태그는 여는 태그와 닫는 태그 사이에 있는 내용물에 영향을 줍니다.

 

HTML의 진화: HTML5

HTML는 팀 버너스-리(Tim Berners-Lee)가 최초의 웹 브라우저인 WorldWideWeb을 위해 개발한 언어이며, 1991년에 도입된 이후로 계속해 발전해 왔습니다. 아주 기본적인 요소만 갖추다 HTML4 이후부터 CSS와 JavaScript를 지원하게 되어 웹페이지를 좀 더 자유롭게 디자인할 수 있게 되었죠. 현재는 2014년 공식화된 HTML5가 가장 최신 버전입니다.

 

HTML5의 큰 특징으로는 반응형 디자인 기술과 CSS3 미디어 쿼리를 결합하여 다양한 기기와 화면 크기에도 적응하는 웹 사이트를 만들 수 있게 된 건데요. 덕분에 작은 핸드폰 화면으로 pc스크린의 내용 그대로를 보는 것이 아니라 작은 스크린 사이즈에 맞게 내용을 볼 수 있게 된 거죠.

 

그 외에도 <canvas>와 같은 요소를 사용하여 비디오와 오디오의 원활한 통합은 물론, 동적인 2D 그래픽을 가능하게 하여 게임과 데이터 시각화 같은 컨텐츠를 향상시켰습니다.

 

HTML5는 양식 요소를 위한 여러 새로운 입력 유형과 속성도 도입했습니다. 날짜 선택기, 이메일 유효성 검사, 숫자 입력 및 플레이스 홀더 텍스트와 같은 기능 덕분에 사용자 경험을 개선시키고 개발자와 사용자 모두에게 데이터 입력을 간소화할 수 있었습니다. 또한 접근성(Accessibility)을 통해 장애를 가진 사용자들도 더 쉽게 웹 사이트와 애플리케이션을 이용할 수 있게 만들었습니다.

 

HTML을 배워야 하는 이유

HTML을 이해하면 개인 블로그부터 전문 웹사이트까지 원하는 시각적 효과를 더하는데 유리할 수 있습니다. 물론 디자인적 요소는 CSS 등을 사용해야겠지만 기본적인 텍스트를 다루는 데에는 HTML만으로도 유용합니다. 따라서 문서의 가독성을 높이는 등에 쓰일 수 있겠죠. 또한 IT기업에 종사하는 자라면, 개발자나 디자이너와 협업할 때 도움이 될 수 있습니다. 가장 기본적인 언어 중 하나이기 때문에 다른 언어를 알지 못하더라도 프로그래밍 언어의 기초적인 부분을 이해할 수 있기 때문입니다.