나의 HTML 보일러플레이트

웹은 하위 호환성을 지키면서 새 기능을 도입해 왔으며, HTML 보일러플레이트는 최신 기능을 활성화하고 소셜 미디어 미리보기·스타일·브라우저 테마 등을 설정하는 기본 틀임 head 요소 순서는 성능에 큰 영향을 주므로, 문자 인코딩을 문서 첫 1,024바이트 안에 선언하고 스타일시트를 직접 연결하며 필요한 글꼴을 사전 로드함 모바일 화면에는 width=device-width 를 사용하고 시스템 글자 크기를 따르는 text-scale을 고려하되, 확대·축소 제한은 극히 드문 예외를 제외하면 접근성을 해치므로 피해야 함 Open Graph와 브라우저 연동 설정으로 공유 미리보기, SVG 파비콘, 테마 색상, 피드 자동 탐색, OpenSearch 검색, 홈 화면 추가를 지원함 이 템플릿은 사이트별 수정이 필요한 출발점이며, 학술 인용·기사·영상 등 콘텐츠 유형과 페이지 요구에 맞춰 메타 태그와 JSON-LD 구조화 데이터를 선택해야 함 호환성을 유지하며 최신 기능을 선택하는 기본 틀 초기 HTML은 TITLE, H1, P, A만으로도 유효한 문서를 만들 수 있었으며, 첫 공식 표준인 HTML 2.0이 1995년 등장하면서 DOCTYPE, head, body를 갖춘 문서 구조가 자리 잡음 웹 표준의 “웹을 깨뜨리지 않는다” 원칙 덕분에 초기 웹사이트도 대체로 현대 브라우저에서 작동하지만, 기존 사이트를 깨뜨리지 않아야 한다는 제약은 변경을 어렵게 함 특정 요소가 있으면 새 기능을 사용하고 없으면 기존 동작으로 돌아가는 방식으로 호환성을 유지함 외부 서비스와 시스템의 요구까지 더해지면서 반복적으로 사용하는 보일러플레이트가 필요해짐 이 템플릿은 개인 CSS 초기화 스타일과 마찬가지로 개인의 취향과 선택이 강하게 반영된 기본 구조이자 HTML 문서 작성용 참고 자료임 문서 선언과 head 순서 head 요소 순서는 성능에 큰 영향을 주며, Capo.js로 성능 관점에서 순서를 평가할 수 있음 <!doctype html> 은 HTML 5에서 도입된 HTML Living Standard용 문서 유형 선언으로, 쿼크 모드 진입을 피하기 위해 포함함 <html lang="en"> 은 문서를 감싸고 RFC 5646에 맞는 언어 태그로 페이지 기본 언어를 지정함 개별 요소에서 언어를 재정의할 수 있음 언어 지정은 자동 번역, 하이픈 처리 같은 조판, 특히 스크린 리더를 비롯한 보조 기술에 중요함 <meta ...