HTML에 대해 어디까지 알고 있나요? (웹 개발 10년차가 전하는 HTML과 HTML5)

개발 테크

3일 전

조회수

웹 페이지의 중요성이 갈수록 커지며, 이제 웹 페이지는 온라인 비즈니스를 위해 없어서는 안 될 필수 요소가 되었습니다. 심지어 명함 대신 웹 페이지를 공유하며 기업의 비즈니스를 소개하는 경우도 많아지고 있습니다.

그렇다면, 웹 페이지는 어떻게 시작되었을까요? 웹 페이지의 근간에는 HTML, CSS, JavaScript라는 세 가지 주요 기술이 있습니다. HTML은 웹 페이지의 구조를 형성하고, CSS는 디자인과 스타일을 결정하며, JavaScript는 동적인 기능을 추가해 사용자와의 상호작용을 가능하게 합니다.

이 중에서도 HTML은 웹 개발의 기초로서 매우 중요한 역할을 합니다. 웹 페이지의 구조와 콘텐츠를 정의하는 핵심 요소로, HTML을 제대로 이해해야 사용자에게 효과적으로 정보를 전달할 수 있습니다.

또한, HTML의 기본 원리를 잘 알면 CSS와 JavaScript를 활용할 때 더 나은 결과를 얻을 수 있으며, 웹 접근성과 SEO 최적화 측면에서도 유리합니다.

이번 시간에는 HTML의 탄생부터 현대적 활용까지 살펴보며, 이 언어가 왜 중요한지 깊이 이해해보겠습니다.

HTML이란?

HTML은 1991년 팀 버너스 리(Tim Berners-Lee)에 의해 최초로 개발되었습니다. 그는 월드 와이드 웹(WWW)의 창시자로 다양한 연구소와 과학자들이 정보를 공유하고 연결할 수 있는 방법을 고민하다가 HTML을 고안하였습니다.

HTML은 ‘HyperText Markup Language’의 약자로, 문서 내 서로 다른 부분을 연결하는 하이퍼텍스트를 사용하여 웹 페이지를 구성합니다. HyperText는 무엇이고, Markup Language는 뭘까요?

하이퍼텍스트(HyperText)

하이퍼텍스트는 문서 안에서 텍스트와 다른 문서를 링크로 연결하는 시스템을 말합니다. 하이퍼텍스트는 단순히 한 문서 내의 텍스트를 나열하는 것에 그치지 않고, 다양한 문서들이 서로 연결되어 정보의 흐름을 더 효율적으로 만들 수 있도록 합니다. 그리고 그 연결은 주로 이런 모양의 하이퍼링크를 통해 이루어집니다.

여기서 재밌는 사실은 하이퍼텍스트(HyperText)는 팀 버너스 리가 만든 개념이 아닙니다. 실제로 하이퍼텍스트의 아이디어는 1950년대부터 존재했으며, 여러 연구자들에 의해 다루어졌습니다.

팀 버너스 리는 기존의 하이퍼텍스트 개념을 발전시켜, 하이퍼링크와 인터넷을 결합하여 월드 와이드 웹(WWW)을 만들었습니다. 즉, 팀 버너스리가 웹을 통해 하이퍼텍스트를 실현한 것입니다.

마크업 언어(Markup Language)

마크업 언어는 문서의 구조를 정의하고, 다른 요소들에 대한 표현을 지정하는 언어입니다. 마크업 언어는 내용의 형식을 결정하는 데 사용되며, 문서가 어떻게 표시되고 어떻게 처리될지에 대한 지침을 제공하는데요.

HTML은 왜 마크업 언어의 구조를 선택했을까요? 바로 마크업 언어가 문서의 구조와 의미를 정의하는 데 중점을 두기 때문입니다.

웹 페이지는 단순한 텍스트의 나열이 아닌, 서로 관련된 정보를 구조적으로 나누고, 각 요소의 관계를 명확하게 나타내는 것이 중요했는데요.

마크업 언어가 텍스트를 태그로 감싸는 방식(<tagName>)으로 작동한다는 특징이 의미론적 구조를 정의하는 데 유리했습니다.

이를 통해 웹은 콘텐츠의 의미를 더 명확하게 전달할 수 있게 되었습니다. 그렇게 HTML은 하이퍼텍스트를 활용하는 마크업 언어라는 의미로 탄생했습니다.

HTML is a Programming Language?

“HTML is a Programming Language (저는 HTML로 프로그래밍해요)”라는 밈을 아시나요? HTML을 프로그래밍 언어라고 생각하는 사람들에 대한 조롱(?) 섞인 유머로 한때 개발자들 사이에서 유행했던 밈입니다.

이는 앞서 살펴본 바와 같이 HTML이 프로그래밍 언어가 아닌 마크업 언어(Markup Language)라는 점을 강조합니다.

HTML은 웹 개발에 사용되는 언어이지만, 엄밀히 말하면 변수 할당이나 수학적 계산과 같은 프로그래밍 기능을 수행하지 않고, 단순히 문서의 구조와 표현을 담당하기 때문에 프로그래밍 언어라고 보기는 어렵습니다.

이제 HTML을 포함한 웹 개발의 핵심 기술인 HTML, CSS, JavaScript에 대해 좀 더 깊이 알아보겠습니다. 이들 각각의 기술이 어떻게 발전해왔는지, 그리고 오늘날 웹에서 어떤 역할을 하는지 살펴보도록 하겠습니다.

HTML, Javascript, CSS

HTML, Javascript, CSS는 웹 개발의 핵심 기술로 웹의 동작과 모습을 형성하는데 중요한 역할을 합니다. 대략적으로 HTML은 웹의 구조를 담당하고, CSS는 디자인을 담당하며, Javascript는 동작과 상호작용을 담당합니다.

* 웹 페이지의 디자인을 담당하는 CSS가 궁금하다면?

▶ CSS로 효율적인 웹 개발과 디자인, 이렇게 해결한다!

이 세 기술은 상호보완적으로 사용되며, 웹 개발의 핵심을 이루고 있습니다. 흥미로운 점은 처음부터 HTML, Javascript, CSS가 모두 처음부터 제시된 기술이 아니라는 점입니다. HTML은 1991년 출시 이후 몇차례의 업데이트를 거쳤고, Javascript는 1995년에, CSS는 1996년에 세상에 등장했습니다.

HTML 1.0 (1991년): 웹의 첫 번째 표준 마크업 언어로, 텍스트 기반의 간단한 웹 페이지를 만들 수 있었습니다.
HTML 2.0 (1995년): HTML 1.0의 기능을 확장하여 더 다양한 태그와 기능을 지원하였고, 웹 브라우저에서 페이지를 렌더링하는 데 필요한 표준을 확립했습니다.
HTML 3.2 (1997년): HTML에 Javascript, CSS를 추가하여 웹 페이지의 레이아웃을 더 세밀하게 제어하고, 동적 웹 어플리케이션의 틀을 마련했습니다.
HTML 4.01 (1999년): 접근성과 표준을 강조하며, 웹 페이지의 콘텐츠를 구조적으로 정의하는 데 더 중점을 두었습니다.
HTML5 (2014년): 웹 애플리케이션 개발을 위한 다양한 기능을 추가하며, 멀티미디어 콘텐츠, 애니메이션, 모바일 웹 등의 지원을 강화했습니다.

초기 HTML 태그와 활용

1996년에 업데이트된 HTML 4.01 이전의 초기 HTML은 웹 페이지의 내용을 구조화하고 표시하는 데 사용되는 기본적인 태그들로 이루어져 있었습니다. 당시 웹은 '정보 공유'를 목적으로 성장했기 때문에, 문서를 구조화하는 방식과 유사한 형태를 띠고 있었습니다.

초기 HTML 태그들은 웹 페이지를 구성하는 기본 요소를 정의하며, 간단한 웹 문서를 손쉽게 만들 수 있도록 도와주었는데요. 오늘날에도 여전히 사용되는 HTML의 주요 태그들을 소개합니다.

<html>

HTML 문서의 시작과 끝을 나타내는 루트 요소입니다. 모든 HTML 태그는 이 태그 안에 포함되어야 합니다.

<html>

</html>

<head>

문서의 메타데이터를 포함하는 영역으로, 브라우저에 보여지지 않는 정보입니다. 인포메이션을 포함하며 주로 스타일 시트, 스크립트, 제목 등이 들어갑니다.

<title> : 웹 페이지의 제목을 설정합니다. 브라우저 탭에 표시됩니다.
<meta> : 문서의 정보(예: 문자 인코딩, 키워드, 설명 등)를 정의합니다.
<link> : 디자인 혹은 외부 CSS 파일을 연결합니다.
<script> : JavaScript 코드를 포함하거나 외부 스크립트를 연결합니다.

<head>

</head>

<body>

실제 웹 페이지의 내용을 포함하는 태그입니다. 사용자에게 표시되는 모든 요소는 이 태그 내에 작성됩니다.

<body>

</body>

<h1> ~ <h6>

페이지 내 제목과 소제목을 정의하는 태그로, <h1>은 가장 큰 제목, <h6>은 가장 작은 제목을 나타냅니다. 이 태그들은 검색 엔진이 페이지의 주제를 파악하는 데 도움을 주어, 검색 엔진 최적화(SEO)를 위해 중요한 역할을 합니다.

<body>

</body>

<p>

문단을 정의하는 태그입니다. 주로 텍스트 내용을 포함하며, 브라우저에서 기본적으로 문단 간에 여백을 생성합니다.

<body>

<p>이것은 첫 번째 문단입니다.</p>

<p>이것은 두 번째 문단입니다.</p>

</body>

<a>

하이퍼링크를 정의하는 태그입니다. 다른 페이지로 이동할 수 있게 해주는 중요한 요소입니다. href 속성에 링크할 URL을 지정하고, target 속성에 링크를 여는 방법을 지정합니다(예: _blank를 사용하면 새 탭에서 열립니다).

<body>

</body>

<img>

이미지를 삽입하는 태그입니다. src 속성으로 이미지 파일의 경로를 지정하고, alt 속성으로 이미지가 표시되지 않을 때 대체 텍스트를 제공합니다.

<body>

</body>

<ul>, <ol>, <li>

리스트를 생성하는 태그입니다. <ul>은 비순서 목록(불릿), <ol>은 순서 목록(번호)을 정의하며, <li>는 리스트 항목을 나타냅니다.

<ul>

</ul>

<ol>

</ol>

<div>

문서 내에서 블록 수준의 구획을 만들기 위한 태그입니다. 흔히 CSS와 함께 사용되어 레이아웃 및 스타일링에 활용됩니다.

지금까지 소개한 태그들을 종합하면 아래와 같이 html 파일을 생성하고, 해당 html파일을 브라우저에서 확인하면 출력되는 모습을 확인할 수 있습니다. div 태그가 눈에 잘 띄도록 한 쪽에는 붉은색 테두리를, 다른 한 쪽에는 푸른색 테두리를 스타일 지정했습니다.

<html>

<head>

</head>

<body>

<p>이것은 첫 번째 문단입니다.</p>

<p>이것은 두 번째 문단입니다.</p>

<ul>

</ul>

</div>

<ol>

</ol>

</div>

</body>

</html>

(초기 HTML 태그를 활용해 구현한 화면)

웹이 정보문서?

(* 이미지 출처: 나무위키 웹 디자인)

초기의 HTML 태그는 정보를 구조화하고 문서처럼 정리하는 데 초점이 맞춰져 있었습니다. 마치 위키문서처럼 내용을 정리하고 다른 문서로 연결하는 데 적합했죠. 그러나 지금 이 글을 읽고 있는 여러분도 웹을 단순히 정보지로만 여기지는 않을 것입니다.

목적에 따라 누군가는 웹으로 제품의 랜딩 페이지나 쇼핑몰의 상세 페이지를 만들고, 또 다른 누군가는 웹으로 게임이나 비디오 플랫폼을 제작합니다.

특히, 요즘처럼 스마트폰과 태블릿의 화소 수가 증가하면서 다양한 화면 크기와 해상도에 맞춘 웹 페이지가 필수적이 되었고, 비디오와 오디오 같은 멀티미디어 콘텐츠의 중요성도 점점 커지고 있습니다.

* 자동으로 페이지 사이즈가 변경되는 반응형 웹 사이트의 제작 방법이 궁금하다면?

▶ 반응형 웹 사이트 만들기, 디자이너가 Figma로 쉽게 하는 방법

이처럼 사용자들이 다양해지고 많아지면서 요구되는 사용자 인터페이스는 점점 복잡해졌습니다. 이에 따라 단순히 연결된 정보 문서를 보는 수준을 넘어, 더 발전된 웹 기술이 필요해졌습니다. 이러한 변화 속에서 2014년, HTML5가 업데이트되며 새로운 시대를 열게 되었습니다.

HTML 5의 주요 태그

HTML 5는 웹 페이지 제작의 효율성과 구조적 의미를 향상시키기 위해 개발된 웹 표준입니다. 웹의 콘텐츠를 보다 잘 표현하고, 사용자 경험을 개선하며, 다양한 디바이스에서의 접근성을 높이기 위해 새로운 태그들이 추가되었습니다. HTML5에서 새롭게 도입된 태그들은 크게 시맨틱 태그, 멀티미디어 태그, 그래픽 태그, 고급 폼 요소, 그리고 기타 유용한 태그가 있습니다.

HTML 5 시맨틱 태그

시맨틱 태그는 콘텐츠의 의미를 명확하게 전달하는 태그로, 개발자와 사용자가 웹 페이지의 구조를 이해하는 데 도움을 줍니다. 주요 시맨틱 태그로 <header>, <footer>, <article>, <section>, <nav>, <aside> 같은 것들이 있습니다.

이전의 HTML에서는 <div>로 수행하던 작업들을 다양한 목적에 맞게 사용할 수 있도록 변경되었습니다.

HTML 5 멀티미디어 태그

멀티미디어 태그는 웹 페이지에서 비디오와 오디오 콘텐츠를 삽입하고 관리하는 데 사용되는 태그입니다. <video>와 <audio> 태그가 추가되어 사용자가 별도의 플러그인 없이도 다양한 멀티미디어 콘텐츠를 쉽게 재생할 수 있도록 합니다.

HTML 5 그래픽 태그

그래픽 태그는 <canvas>와 <svg>와 같이 웹 페이지에서 동적 또는 정적인 그래픽 요소를 표시하는 데 도움을 주는 태그입니다. 고급 폼 요소는 <input>을 통해 사용자 입력을 수집하고 관리하는 데 유용한 다양한 HTML5 태그와 속성을 제공합니다.

그 외에도 구분하기는 어렵지만 <time>, <mark>,<template>, <details>와 <summary> 둥 웹 개발에 있어 다양한 기능과 편의성을 제공하는 기타 유용한 태그들이 있기에 소개하겠습니다.

HTML 5의 개발 편의성을 제공하는 유용한 태그

<header>

문서나 섹션의 머리말을 정의하며, 내비게이션 링크, 로고 등을 포함할 수 있습니다.

<nav>

<ul>

</ul>

</nav>

</header>

<footer>

문서나 섹션의 바닥글을 정의하며, 저작권 정보, 연락처, 관련 링크 등을 담을 수 있습니다.

</footer>

<article>

독립적으로 구분된 콘텐츠 블록을 정의합니다. 블로그 포스트, 뉴스 기사 등 개별적으로 독립적인 정보를 담을 때 유용합니다.

<p>2025년 신제품 출시 소식입니다...</p>

</article>

<section>

관련된 콘텐츠 블록들을 그룹화하는 데 사용되며, 주제를 명확히 하여 문서를 구조화하는 데 도움을 줍니다.

</section>

<nav>

내비게이션 링크를 포함하는 블록으로, 웹 페이지 내에서 다른 페이지나 섹션으로의 경로를 제공합니다.

<nav>

<ul>

</ul>

</nav>

<aside>

본문과 간접적으로 관련된 콘텐츠를 정의합니다. 예를 들어, 측면 바나 참고 사항 등을 담을 때 사용됩니다.

<aside>

<ul>

</ul>

</aside>

<video>

비디오 콘텐츠를 삽입하기 위해 사용됩니다. 크기 조정, 자동 재생, 반복 재생과 같은 속성을 설정할 수 있습니다.

이 브라우저는 비디오를 지원하지 않습니다.

</video>

<audio>

오디오 콘텐츠를 삽입하기 위해 사용하며, 다양한 장치에서 소리 재생을 지원합니다.

이 브라우저는 오디오를 지원하지 않습니다.

</audio>

<canvas>

JavaScript를 사용하여 동적으로 그래픽을 그릴 수 있는 영역을 정의합니다. 2D 또는 3D 그래픽을 생성하는 데 매우 유용합니다.

var c = document.getElementById("myCanvas");

var ctx = c.getContext("2d");

ctx.fillStyle = "#FF0000";

ctx.fillRect(20, 20, 150, 50);

</script>

<svg>

벡터 그래픽을 정의하고 효과적으로 표시하는 데 사용됩니다.

</svg>

<input>

새로운 입력 유형이 추가되어 다양한 형태의 데이터를 수집할 수 있습니다.

type="date": 날짜 선택.
type="email": 이메일 형식 입력.
type="url": URL 형식 입력.
type="range": 슬라이더 형태의 입력.

</svg>

<datalist>

자동 완성 목록을 사용자가 선택할 수 있도록 제안하는 목록을 제공하기 위해 사용됩니다.

</datalist>

<progress>

작업의 진행 상태를 표시하는 데 사용되는 태그입니다.

<meter>

범위 내에서 측정을 나타내는 태그로, 그래픽적으로 값의 상태를 표현합니다.

<time>

날짜 및 시간을 정의하며, 기계 및 사용자가 이해할 수 있는 형식을 지원합니다.

<mark>

강조 표시된 텍스트를 나타내는 태그로, 주로 검색어 강조에 사용됩니다.

<template>

사용할 수 있는 내용을 정의하는 태그로, JavaScript로 동적으로 내용을 추가하는 데 사용됩니다.

<p>이것은 템플릿의 내용입니다.</p>

</template>

<details>/<summary>

특정 정보를 숨기거나 보여줄 수 있는 인터페이스를 제공하는 태그입니다. 사용자 인터페이스에 대한 상호작용을 개선합니다.

<p>여기서는 추가적인 정보를 제공합니다.</p>

</details>

HTML은 웹 개발에 필수적인 요소입니다.

온라인 비즈니스와 IT 개발의 다양한 분야에서 웹 개발은 필수적인 요소입니다. 특히, UI 디자인과 관련된 모든 웹 분야에서 HTML은 핵심적인 역할을 하며, CMS 기반 콘텐츠(블로그, 개인 웹사이트, 전자상거래 플랫폼), 온라인 교육 및 학습 관리 시스템(LMS), 포트폴리오 사이트, 기업 웹사이트, 모바일 애플리케이션 등 다양한 분야에서 널리 활용됩니다.

많은 개발자들이 HTML을 사용하고 있지만, 그 배경과 활용 방법을 깊이 이해하지 못하는 경우가 많습니다. 접근성과 사용자 경험을 고려한 HTML 작성은 결과물의 퀄리티를 높이고 사용자 만족도로 이어질 수 있습니다.

오늘 이랜서에서 소개하는 HTML에 대한 깊은 이해를 통해, 탄탄한 웹 개발 역량을 쌓는 데 도움이 되길 바랍니다.

고객 만족도를 높이는 웹 페이지 기능 업그레이드 콘텐츠

▶ 구글 지도 활용 방법 (Feat. 구글 맵 API 사용법)

▶ Chat GPT API를 활용해서 AI 챗봇을 만드는 방법(key 생성, 결제)

▶ 알고리즘 추천 시스템을 위한 '협업 필터링'이란?

웹 페이지 활용 능력을 확실하게 키워주는 웹 페이지 견인 콘텐츠

▶ [Bootstrap] 10년차 프리랜서가 부트스트랩을 활용하는 방법

▶ Tailwind CSS로 퍼블리싱이 더 쉬워지는 이유, 지금 확인하세요!

▶ 콘텐츠 관리 시스템(CMS)을 활용해 코딩없이 웹사이트를 개발하고 콘텐츠를 관리하는 방법

탄탄한 실력을 바탕으로 퀄리티를 높이는 웹 개발자

대한민국 No.1 IT 인재 매칭 플랫폼 이랜서에서 매칭받으세요!

이랜서는 25년간 축적한 노하우와 데이터를 바탕으로, IT 프리랜서의 전문성과 협업 능력을 철저히 검증해 프로젝트에 가장 적합한 IT 프리랜서를 매칭하는 대한민국 No.1 IT 인재 매칭 플랫폼입니다.

이랜서만의 데이터를 활용한 맞춤형 매칭 서비스를 통해 현재까지 약 80,000건 이상의 프로젝트에 성공적으로 IT 프리랜서를 매칭하며, 프로젝트 재의뢰율 98%를 달성해 기업과 프리랜서 모두에게 신뢰받는 플랫폼으로 자리 잡고 있습니다.

25년의 데이터로 이뤄지는 프로젝트 맞춤형 매칭 서비스

이미 많은 기업들이 이랜서의 매칭 서비스를 통해

IT 인재 채용의 어려움을 해결하고 있습니다.

ㅡ 이랜서의 프로젝트 맞춤형 매칭 서비스를 활용한 기업들의 리뷰 ㅡ

IT 인재 채용의 어려움을 겪는 기업들을 위해 이랜서는 25년의 노하우와 데이터를 활용하여 프로젝트 맞춤형 매칭 서비스를 제공하고 있습니다.

빠르게 변화하는 IT 트렌드에 발맞춰, 이랜서는 프로젝트 등록 후 24시간 이내에 25년의 데이터로 검증된 IT 프리랜서를 매칭합니다. 웹 개발부터 AI 프로그램 개발까지, IT 분야라면 어떤 프로젝트든 최적의 IT 프리랜서를 신속하게 매칭해 드립니다.