HTML
""
웹페이지의 구조와 뼈대를 설계하는 웹 기술의 절대적인 기반이자 국제 표준 마크업 언어. 그리고 이것을 프로그래밍 언어라고 불렀다가 지나가던 개발자들에게 뭇매를 맞고 쫓겨나는 초보자들의 수난사(...)
1. 개요
HTML(HyperText Markup Language)은 웹 브라우저가 화면을 그릴 수 있도록 텍스트와 이미지 등의 요소를 적절히 배치하고 구조화하는 역할을 한다.
태그(Tag)라고 불리는 <요소> 형태의 괄호를 사용하여 제목, 문단, 이미지, 링크 등을 정의하며, 브라우저는 이 코드를 파싱하여 인간이 읽을 수 있는 예쁜 화면으로 변환(렌더링)해 준다.
변수 선언, 반복문, 조건문 같은 연산 로직이 전혀 존재하지 않기 때문에 컴퓨터 프로그래밍 언어가 아닌 마크업 언어로 엄격히 분류된다.
2. HTML5와 시맨틱 웹
2014년에 표준안으로 확정된 HTML5의 등장은 웹 생태계의 판도를 완전히 바꾸어 놓았다. 단순히 플래시(Flash)나 실버라이트 같은 무거운 외부 플러그인 없이도 웹 브라우저 자체적으로 비디오, 오디오 재생 및 2D 그래픽 구현이 가능해졌다.
또한, 의미 있는 태그를 사용하는 시맨틱 웹(Semantic Web)의 개념이 강화되어, 검색 엔진이 웹사이트의 구조를 더 잘 파악할 수 있도록 도왔다.
<header>: 페이지 상단 영역<nav>: 메뉴 및 네비게이션<article>: 실제 본문 내용<footer>: 페이지 하단 정보 영역
3. 관련 밈 및 드립
3.1. HTML은 프로그래밍 언어인가요?
개발자 커뮤니티에서 가장 유서 깊고 가장 잘 먹히는 어그로성 질문이다.
이 질문 하나면 순식간에 수십 명의 개발자들이 나타나 분개하며 "마크업 언어일 뿐이다!"라고 설명충 빙의를 시도한다.
이를 비꼬는 밈으로 "HTML도 조건문을 지원합니다! <!--[if IE 9]> 같은 주석 조건문이 있거든요!"라며 억지 쉴드를 치거나, 면접에서 "C언어로 HTML을 코딩해봤습니다"라는 기상천외한 답변을 하는 짤방이 널리 돌아다닌다.1
3.2. 지옥 (Div Soup)
현대 프론트엔드 프레임워크나 초보 개발자들의 코드를 보면, 시맨틱 태그를 쓰지 않고 모든 레이아웃과 구성을 오직 <div> 태그로만 떡칠해 놓은 광경을 자주 볼 수 있다.
이러한 코드를 펼쳐보면 <div> 안에 <div>가 들어있고 그 안에 또 <div>가 들어있어 코드 가독성이 극악으로 치닫는데, 개발자들은 이를 "디브 수프(Div Soup)" 혹은 "디브 지옥"이라고 부르며 절규한다.
4. 여담
- 선언문 DOCTYPE의 정체: HTML 파일의 가장 첫 줄에 적는
<!DOCTYPE html>은 사실 HTML 태그가 아니라, 브라우저에게 "이 문서는 최신 HTML5 규격으로 작성되었으니 표준 모드로 올바르게 렌더링해달라"고 알리는 선언문이다. - 태생은 학술용 문서 포맷: HTML의 창시자 팀 버너스리는 원래 물리학자들이 논문과 문서를 서로 쉽게 공유하고 하이퍼링크로 연결할 수 있도록 하기 위해 HTML을 발명했다. 즉, 태생은 학술용 문서 포맷이었다.
- 깜빡이 태그의 추억: 과거 HTML 초창기에는 글씨가 깜빡이게 만드는
<blink>태그나 글씨가 오른쪽에서 왼쪽으로 흘러가게 만드는<marquee>태그가 선풍적인 인기를 끌었으나, 웹 표준을 해치고 사용자 가독성을 심각하게 방해한다는 이유로 현재는 완전히 퇴출당해 역사 속으로 사라졌다.2