HTML 포맷터
HTML(HyperText Markup Language)은 웹 페이지를 위한 표준 마크업 언어입니다. 이 도구는 적절한 들여쓰기로 HTML을 서식 지정하고, 프로덕션용으로 최소화하며, 메타데이터(제목, 설명, Open Graph 태그)를 추출하고, 누락된 alt 속성이나 사용 중단된 태그 같은 일반적인 문제를 검증합니다.
사양
주요 사용 사례
- 소스 보기 또는 API 응답의 최소화된 HTML 서식 지정
- 배포 전 HTML 크기 최적화
- SEO를 위한 페이지 메타데이터 감사 (제목, 설명, OG 태그)
- HTML 구조 및 중첩 문제 디버깅
- 접근성 기본 사항 검증 (alt 속성)
- 문서화를 위한 HTML 스니펫 준비
기능
- 일관된 들여쓰기로 HTML 예쁘게 출력
- 프로덕션용 HTML 최소화 (공백, 주석 제거)
- 페이지 메타데이터 추출 (제목, 설명, 문자셋)
- 소셜 미디어 미리보기를 위한 Open Graph 태그 파싱
- 스크립트 및 스타일시트 수 표시
- 일반적인 HTML 문제 검증 (누락된 alt, 사용 중단된 태그)
- 원본과 최소화 간 크기 비교 표시
예제
메타데이터가 있는 웹 페이지
사용해 보기 →head 메타데이터와 body 콘텐츠가 있는 완전한 HTML 문서.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="A sample web page for testing">
<meta property="og:title" content="Sample Page">
<meta property="og:description" content="This is a sample page">
<title>Sample Page</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Welcome</h1>
<nav>
<a href="/">Home</a>
<a href="/about">About</a>
</nav>
</header>
<main>
<p>Hello, world!</p>
</main>
<script src="app.js"></script>
</body>
</html>HTML 스니펫
사용해 보기 →컴포넌트 또는 부분 HTML 조각.
<div class="card">
<img src="image.jpg" alt="Card image">
<div class="card-body">
<h2 class="card-title">Card Title</h2>
<p class="card-text">Some description text here.</p>
<button class="btn btn-primary">Learn More</button>
</div>
</div>팁
- 페이지 로드 시간을 줄이기 위해 프로덕션에는 최소화 버전을 사용하세요.
- Open Graph 태그는 소셜 미디어에서 페이지가 공유될 때 어떻게 보이는지 제어합니다.
- description 메타 태그는 SEO와 검색 결과 스니펫에 중요합니다.
- 접근성을 위해 이미지에 항상 alt 속성을 포함하세요.
- 더 나은 구조를 위해 시맨틱 HTML 요소(header, main, nav, article)를 사용하세요.
이해하기 HTML 포맷터
HTML(HyperText Markup Language)은 웹의 기초 언어입니다. 모든 웹 페이지는 HTML 문서로, 브라우저가 파싱하고 렌더링하여 수십억 명이 매일 상호작용하는 시각적 인터페이스로 만드는 요소 트리입니다. WHATWG가 Living Standard로 유지하는 현재 버전은 번호가 매겨진 릴리스가 아닌 지속적으로 발전합니다.
HTML은 페이지의 시맨틱 구조를 제공합니다. <header>, <nav>, <main>, <article>, <footer> 같은 요소는 브라우저, 스크린 리더, 검색 엔진에 의미를 전달합니다. <head> 섹션에는 문서 제목, 문자 인코딩, 뷰포트 설정, 스타일시트, 스크립트, 소셜 공유를 위한 Open Graph 태그, SEO를 위한 구조화된 데이터 등의 메타데이터가 포함됩니다. <body>에는 표시되는 콘텐츠가 포함됩니다.
최신 HTML은 단순한 마크업을 훨씬 넘어섭니다. <canvas> 요소는 2D 및 3D 그래픽을 가능하게 합니다. <video>와 <audio> 요소는 네이티브 미디어 재생을 제공합니다. Web Components(<template>, <slot>, 커스텀 요소)는 재사용 가능한 캡슐화된 위젯을 허용합니다. 폼 요소는 required, pattern, min, max 같은 속성으로 클라이언트 측 검증을 지원합니다. 시맨틱 요소는 보조 기술에 명확한 문서 개요를 제공하여 접근성을 향상시킵니다.
개발자에게 HTML은 대규모로 직접 작성되는 경우가 드뭅니다. React, Vue, Svelte, Astro 같은 프레임워크가 컴포넌트 템플릿에서 HTML을 생성합니다. 서버 사이드 렌더링은 더 빠른 초기 페이지 로드를 위해 서버에서 HTML을 생성합니다. 정적 사이트 생성기는 배포 시 HTML을 미리 빌드합니다. 이러한 추상화에도 불구하고, 레이아웃 문제 디버깅, 성능 최적화, 접근성 준수 보장, SEO 문제 진단을 위해 출력 HTML을 이해하는 것이 필수적입니다.
HTML은 구문 오류에 관대합니다. 브라우저는 닫히지 않은 태그와 누락된 따옴표를 최선을 다해 렌더링합니다. 반면 XHTML은 엄격한 XML 규칙을 적용합니다: 모든 태그는 닫혀야 하고, 속성 값은 따옴표로 감싸야 하며, 요소는 적절히 중첩되어야 합니다. XHTML은 2000년대 초반에 인기가 있었지만, WHATWG HTML Living Standard는 더 관대한 HTML 파싱 모델로 돌아갔습니다. 오늘날 브라우저가 요구하지 않더라도, 유효한 XHTML이 될 수 있는 잘 구성된 HTML을 작성하는 것이 모범 사례로 간주됩니다.
Open Graph(og:) 메타 태그는 Facebook, LinkedIn, Twitter 같은 소셜 미디어 플랫폼에서 페이지가 공유될 때 어떻게 표시되는지 제어합니다. 주요 태그에는 og:title, og:description, og:image, og:url이 포함됩니다. Twitter는 존재 시 Open Graph를 재정의하는 자체 twitter:card 태그가 있습니다. 이러한 태그 없이 플랫폼은 제목과 이미지를 추측하려 하며, 종종 좋지 않은 결과를 보입니다. <nav>, <main>, <article>, <aside> 같은 시맨틱 HTML 요소는 관련 목적을 수행합니다. 브라우저, 스크린 리더, 검색 엔진에 콘텐츠의 구조와 의미를 전달합니다. 시맨틱 요소를 사용하면 장애가 있는 사용자의 접근성이 향상되고, 검색 엔진이 페이지 계층을 이해하는 데 도움이 되며, 코드베이스가 더 유지보수하기 쉬워집니다.
HTML 최소화는 기능을 변경하지 않고 불필요한 문자를 제거합니다: 태그 사이의 공백, HTML 주석, 선택적 닫기 태그, 중복 속성, 속성 값 주위의 불필요한 따옴표. 이는 파일 크기를 줄이고 페이지 로드 시간을 개선하며, gzip 압축 전 일반적으로 10-30%의 절감을 제공합니다. html-minifier-terser 같은 도구가 빌드 파이프라인에서 이를 자동으로 처리하므로, 프로덕션 배포를 위한 간단한 최적화가 됩니다.