HTML 보일러플레이트

HTML 템플릿을 빠르게 생성합니다. 메타태그, CSS/JS 라이브러리 옵션 포함.

기본 설정

제목

설명

언어

문자셋

라이브러리

CSS

JavaScript

생성된 HTML

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Website</title>
  <meta name="description" content="웹사이트 설명">
  <link rel="icon" type="image/x-icon" href="/favicon.ico">
  <link rel="apple-touch-icon" href="/apple-touch-icon.png">
</head>
<body>

  <h1>Hello World</h1>

</body>
</html>

🏗️ HTML 보일러플레이트란?

HTML 보일러플레이트(Boilerplate)는 새 웹페이지를 시작할 때 필요한 기본 HTML 구조를 말합니다. DOCTYPE, 메타태그, 문자셋, 뷰포트 설정 등 매번 작성해야 하는 반복적인 코드를 자동으로 생성해주며, Open Graph 태그, Twitter Card, CSS/JS 라이브러리 CDN 링크까지 옵션으로 추가할 수 있습니다. 새 프로젝트를 시작할 때 몇 번의 클릭으로 표준을 준수하는 HTML 시작점을 얻을 수 있습니다.

📋 포함 가능한 요소

기본 메타태그

charset, viewport, description

소셜 미디어

Open Graph, Twitter Card

CSS 프레임워크

Tailwind, Bootstrap, CSS Reset

JS 라이브러리

jQuery, Alpine.js

💡 HTML 템플릿 팁

viewport: 모바일 반응형 디자인에 필수, 항상 포함 권장
description: 검색 엔진에 표시되는 설명, SEO에 중요
Open Graph: 카카오톡, 페이스북 등에서 링크 공유 시 미리보기 표시
Tailwind CDN: 빠른 프로토타이핑에 유용, 프로덕션은 빌드 버전 사용

자주 묻는 질문

HTML5와 XHTML의 차이점은 무엇인가요?▼

HTML5는 현대 웹 표준으로 더 유연한 문법을 허용합니다. XHTML은 XML 기반으로 더 엄격한 문법을 요구하며, 태그 닫기와 속성 따옴표가 필수입니다. 새 프로젝트는 HTML5 사용을 권장합니다.

CDN 대신 로컬 파일을 사용해야 하나요?▼

프로토타이핑에는 CDN이 편리하지만, 프로덕션에서는 빌드 도구를 통해 로컬 번들링하는 것이 성능과 안정성 면에서 유리합니다.

Google Analytics 코드는 어디에 넣어야 하나요?▼

보통 </body> 직전에 넣지만, Google은 <head> 내부 삽입을 권장합니다. 이 도구는 body 하단에 생성하며, 필요시 위치를 수동 조정하세요.