Post

HTML - HTML5 & Basic Tags

Posted Updated
Preview Image
By HotHyun
16 min read
HTML - HTML5 & Basic Tags

이번 포스트에서는 Developer Roadmap에 나와있는 HTML Roadmap을 따라가보며 글을 쓰려고 한다.

Introduction

What are markup Languages?

마크업 언어(Markup Language)는 간단히 말해, 문서의 구조와 내용을 명시 하는 언어이다. 일반 텍스트 문서에 tag와 같은 특별한 표시를 추가하여 문서의 각 부분이 어떤 의미를 갖는지, 어떻게 보여야 하는지를 정의한다. 웹 페이지를 만드는 데에 사용되는 HTML이 가장 대표적인 마크업 언어이다.

마크업 언어는 주로 다음 3가지 요소로 구성된다.

  1. Tag: < 와 > 기호로 둘러싸인 명령어이다. Tag는 문서의 특정 부분이 어떤 요소인지를 나타낸다. 예를 들어, <p> 는 단락(paragraph)의 시작을, <h1> 은 가장 중요한 제목(heading 1)을 의미한다.
  2. Element: 시작 태그, 내용, 그리고 종료 태그로 이루어진 전체 부분을 말한다. 예를 들어, <p>이것은 단락입니다.</p> 전체가 하나의 Element 이다.
  3. Attribute: 태그에 추가적인 정보를 제공하여 요소의 기능을 확장한다. 속성은 보통 이름 = "값" 의 형태로 시작 태그 안에 포함된다. 예를 들어, <a> 태그에 href 라는 속성을 추가하여 링크를 만들 수 있다.

마크업 언어와 프로그래밍 언어의 가장 큰 차이점은 제어 구조의 유무이다.

  • 마크업 언어: 데이터의 구조와 의미를 정의하고 어떻게 보일지를 기술하는 데에 중점을 둔다. 조건문(if), 반복문(for)과 같은 동적인 로직이나 계산 기능이 없다. 따라서, 정적인 데이터를 표현하는 데에 사용된다.
  • 프로그래밍 언어: 데이터 처리, 계산, 알고리즘 실행 등 동적인 기능을 수행한다. 변수, 함수, 제어문 등을 사용하여 컴퓨터가 특정 작업을 수행하도록 지시한다.

HTML5?

HTML5는 2014년에 표준으로 확정되었다. 현재 모든 최신 웹 브라우저가 지원하는 웹의 공식 표준이다. 이전 전인 HTML4에 비해 무엇이 더 좋아졌는지를 간단하게 알아보자.

멀티미디어의 자체 지원

HTML4 에서는 웹에서 비디오나 오디오를 재생하려면 Flash, Silverlight 같은 외부 Plugin의 도움이 반드시 필요했다. 이 때문에 사용자들은 별도의 프로그램을 설치해야 했고, 보안에 취약하며 모바일 기기에서는 지원되지 않는 경우가 많았다.

HTML5 에서는 <video> 와 <audio> 라는 태그가 추가되어 플러그인 없이 어떤 브라우저에서든 동영상과 소리를 직접 재생할 수 있게 되었다. 유튜브, 넷플릭스 같은 모든 스트리밍 서비스가 이 기술을 기반으로 작동한다.

1

<video src="movie.mp4" controls></video>

Semantic Tags

HTML4 에서는 웹 페이지의 구조를 짤 때, 머리글(header), 메뉴(nav), 본문(section), 꼬리말(footer) 등 모든 것을 <div id="header">, <div id="nav"> 처럼 <div> 태그로 구분했다. 이는 사람이나 검색 엔진이 문서의 구조를 이해하기 어렵게 만들었다.

HTML5는 <header>, <footer>, <nav> , <article>, <section>, <aside> 등 의미가 명확한 Semantic Tag가 도입되었다. 이를 통해 브라우저, 검색 엔진, 스크린 리더 등이 웹 페이지의 구조를 훨씬 쉽게 파악할 수 있게 되었다.

그래픽 기능 강화

HTML4 에서는 동적인 그래픽 효과나 차트, 게임 등을 만드려면 플래시나 다른 외부 기술에 의존해야 했다.

HTML5 에서는 <canvas> 와 <svg> 태그가 표준으로 도입되었다. <canvas> 태그는 자바스크립트를 통해 2D 그래픽, 애니메이션, 게임 등을 자유롭게 그릴 수 있는 캔버스를 제공하며, <svg> 태그는 크기를 아무리 조절해도 깨지지 않는 Vector Graphic 을 HTML에 직접 포함시킬 수 있어 아이콘이나 로코, 차트 표시에 매우 유용하다.

Form Control

HTML4 에서는 텍스트, 비밀번호, 체크박스 등 기본적인 입력 창만 제공했다. 그래서 날짜를 선택하는 달력이나 색상을 고르는 팔레트 등은 모두 자바스크립트 라이브러리를 이용해 따로 만들어야 했다.

HTML5 에서는 email, tel, url, date, color, range 등 다양한 입력 타입을 지원한다. 브라우저가 해당 타입에 맞는 UI를 자동으로 보여준다. 또한 required(필수 입력) 나 pattern (정규식 검사) 등 자체적인 유효성 검사 기능도 추가되어 훨씬 편리해졌다.

Client Storage

HTML4 에서는 브라우저에 정보를 저장할 수단이 Cookies 밖에 없었다. 쿠키는 용량이 매우 작고(4KB) 매번 서버로 전송되어 성능을 저하시키는 단점이 있었다.

HTML5 에서는 localStorage와 sessionStorage라는 훨씬 더 강력한 웹 스토리지 기술이 도입되었다. 약 5MB 이상의 데이터를 사용자의 브라우저에 저장할 수 있어, 인터넷이 끊겨도 작동하는 오프라인 웹 앱을 만들거나 사용자의 설정 등을 안전하게 보관할 수 있게 되었다.

간결해진 문법

HTML4 에서는 문서 타입을 정의하는 <!DOCTYPE> 선언이 매우 길고 복잡했다. 예를 들면 아래와 같았다.

1

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

HTML5 에서는 <!DOCTYPE html> 이렇게 한 줄로 간단하게 통일되었다. 문자 인코딩 설정 또한 <meta charset="UTF-8"> 이렇게 매우 간결해졌다.

Basic Tags

<!DOCTYPE html>

<!DOCTYPE> 는 엄밀히 말해 HTML 태그는 아니다. 이 문서가 어떤 버전의 HTML로 작성되었는지를 웹 브라우저에 알려주는 선언문(Declaration) 이다. 그렇기에 이는 가장 첫 줄에 위치해야한다.

과거에는 HTML 4.01, XHTML 1.0 등 다양한 버전이 있었고, 각 버전에 따라 DOCTYPE 선언이 매우 길고 복잡했다. 하지만 HTML5 가 표준이 되면서 <!DOCTYPE html> 하나로 통일되어 매우 간결해졌다.

웹 브라우저는 DOCTYPE 선언을 보고 페이지를 렌더링할 모드를 결정한다.

  • Standard Mode: <!DOCTYPE html> 이 있으면, 브라우저는 최신 웹 표준에 맞춰 페이지를 정확하게 렌더링한다.
  • Quirks Mode: 만약 DOCTYPE 이 없거나 잘못 쓰여있으면, 브라우저는 오래된 방식으로 페이지를 렌더링한다. 아주 오래된 웹사이트와의 호환성을 위한 것인데, 개발자가 의도하지 않은 화면 깨짐 현상이나 버그를 유발할 수도 있다.

<html>

<html> 태그는 DOCTYPE 선언 바로 다음에 나와 HTML 문서의 전체 범위를 정의한다. 이 태그는 웹 페이지의 모든 내용을 감싸는 최상위 부모 요소(root element) 이다. <html> 태그 바깥에는 어떤 내용도 있어서는 안된다.(DOCTYPE 제외!)

1
2
3

<!DOCTYPE html>
<html>
</html>

<html> 태그는 lang 이라는 attribute를 가지고 있는데, 이는 해당 웹 페이지가 어떤 언어로 작성되었는지를 명시한다. 이는 검색 엔진 최적화(SEO)와 웹 접근성에 매우 중요하다.

한국어 페이지의 경우 <html lang="ko"> 이렇게 사용한다.

<head> 태그는 웹 페이지의 metadata를 담는 부분이다. metadata란, 페이지 자체에 직접 표시되지는 않지만 페이지를 설명하는 데이터를 의미한다. 여기에는 페이지 제목, 인코딩 방식, 외부 파일(CSS, JS) 연결 정보 등이 포함된다.

<head> 안에 들어가는 주요 태그들은 아래와 같다.

  • <title>: 브라우저 탭에 표시되는 페이지의 제목을 정의한다. 검색 엔진 결과 페이지(SERP) 에서도 이 제목이 사용되므로 SEO에 가장 중요한 태그 중 하나이다.
  • <meta>: 아래에서 더 자세히 설명하겠지만, 페이지의 다양한 메타 정보를 정의한다.
  • <link>: 외부 리소스, 특히 CSS 스타일시트를 연결할 때 사용한다. (Ex. <link rel="stylesheet" href="style.css">)
  • <style>: CSS 코드를 HTML 문서 내에 직접 작성할 때 사용한다.
  • <script>: JavaScript 파일을 연결하거나 코드를 직접 작성할 때 사용한다. (보통 <body> 태그가 닫히기 직전에 두는 것이 성능에 더 좋다.)

<body>

<body> 태그는 사용자의 웹 브라우저 화면에 실제로 보여지는 모든 콘텐츠를 담는 공간이다. 텍스트, 이미지, 영상, 링크, 버튼 등 우리가 보는 웹 페이지의 모든 시각적 요소가 이 태그 안에 위치한다. HTML 문서에는 단 하나의 <body> 태그만 존재할 수 있다.

1
2
3
4
5

<body>
	<h1>안녕하세요!</h1>
	<p>이것은 단락입니다.</p>
	<img src="image.jpg" alt="예시 이미지" />
</body>

모든 시각적인 작업과 사용자 상호작용은 바로 이 <body> 태그 안에서 이루어진다. 따라서 웹 개발의 대부분은 <body> 내부의 요소들을 구성하고 디자인하는 과정이라고 할 수 있다.

<meta>

<meta> 태그는 <head> 태그 안에서만 사용되며, 페이지에 대한 다양한 종류의 메타데이터를 제공하는 데 사용된다. <title> 이나 <link> 가 표현할 수 없는 나머지 모든 정보를 담당한다. <meta> 태그는 대부분 이름="값" 형태의 속성으로 정보를 표현하며, 종료 태그가 없다.

몇가지 메타 태그들을 알아보자.

  • 문자 인코딩 설정: <meta charset="UTF-8"> 이 태그는 페이지의 문자 인코딩 방식을 UTF-8로 지정한다. UTF-8은 전 세계 거의 모든 문자를 지원하는 표준 인코딩 방식이다. 이 설정을 하지 않으면 한글이나 다른 언어가 깨져 보일 수 있다. HTML5에서는 이 줄을 <head> 의 가장 처음에 두는 것을 강력히 권장한다.
  • SEO를 위한 정보
    • <meta name="description" content="이 페이지는 HTMl 기본 태그를 설명합니다.">: 페이지의 내용을 요약한 설명문이다. 검색 엔진 결과에서 페이지 제목 아래에 노출된다.
    • <meta name="keywords" content="HTML, 태그, DOCTYPE, head, body">: 페이지의 핵심 키워드를 나열한다.
    • <meta name="author" content="Gemini">: 문서의 작성자를 명시한다.
  • 반응형 웹 디자인을 위한 Viewport 설정
    • <meta name="viewport" content="width=device-width, initial-scale=1.0">
    • 모바일 기기에서 페이지가 어떻게 보일지를 제어하는 매우 중요한 설정이다.
      • width=device-width: 페이지의 너비를 기기의 화면 너비에 맞춘다.
      • initial-scale=1.0: 페이지가 처음 로드될 때 확대/축소되지 않은 원래 크기로 보이게 한다. 이 설정이 없으면 모바일에서 데스크탑 페이지가 아주 작게 축소되어 보일 수 있다.
This post is licensed under CC BY 4.0 by the author.