HTML 보일러플레이트

📋 포맷/변환

HTML 기본 구조를 자동 생성합니다. 메타태그·OG 태그·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 구조를 몇 번의 클릭으로 만들어줍니다. 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 — 빠른 프로토타이핑용, 프로덕션은 빌드 버전 사용

💡 실무 팁

og:image는 1200x630 비율을 권장합니다. 카카오톡은 캐시가 강해 한 번 잘못 노출되면 며칠간 잘못된 이미지가 보입니다. 공유 전 페북 디버거로 미리 확인하세요.

자주 묻는 질문

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

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

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

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

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

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