[html] header에 들어가야 하는 필수 코드들!!

HTML 문서의 <head> 섹션에 들어가는 필수 및 권장 코드 요소들은 다음과 같습니다. 이들은 웹 페이지의 기본적인 설정, 스타일링, 스크립트 로딩, 검색 엔진 최적화(SEO) 등에 중요한 역할을 합니다.

1. 문자 인코딩 (Character Encoding) - 필수!

<meta charset="UTF-8">

목적: 브라우저에게 이 HTML 문서가 어떤 문자 인코딩 방식(예: UTF-8)으로 작성되었는지 알려줍니다. UTF-8은 전 세계 거의 모든 문자를 지원하므로 웹 표준으로 가장 널리 사용됩니다. 이게 없거나 잘못되면 한글 등이 깨져 보일 수 있습니다.

2. 뷰포트 설정 (Viewport Settings) - 필수 (특히 반응형 웹)

<meta name="viewport" content="width=device-width, initial-scale=1.0">

목적: 모바일 기기 등 다양한 화면 크기에서 웹 페이지가 어떻게 보여질지 제어합니다.
- width=device-width: 뷰포트 너비를 기기의 화면 너비에 맞춥니다.
- initial-scale=1.0: 페이지가 처음 로드될 때 확대/축소되지 않은 원래 크기(100%)로 보이도록 설정합니다. 반응형 웹 디자인의 필수 요소입니다.

3. 페이지 제목 (Page Title) - 필수!

<title>여기에 페이지 제목을 입력하세요 | 블로그 이름</title>

목적: 브라우저 탭이나 창의 제목 표시줄에 표시됩니다. 즐겨찾기 시 기본 이름이 되며, 검색 엔진 결과 페이지(SERP)에서 가장 중요한 제목 요소 중 하나입니다. SEO에 매우 중요하며, 해당 페이지의 내용을 명확하게 나타내는 키워드를 포함하는 것이 좋습니다.

4. 메타 설명 (Meta Description) - SEO에 매우 중요 (필수는 아님)

<meta name="description" content="이 페이지의 내용을 요약하는 설명을 1-2 문장으로 작성하세요. 검색 결과에 표시됩니다.">

목적: 검색 엔진 결과 페이지(SERP)에서 페이지 제목 아래에 표시되는 요약 설명입니다. 사용자의 클릭률(CTR)에 영향을 미치므로, 페이지 내용을 정확하게 요약하고 관련 키워드를 포함하여 매력적으로 작성하는 것이 중요합니다.

5. CSS 스타일시트 연결 (Linking CSS Stylesheets) - 디자인에 필수

<link rel="stylesheet" href="style.css">

목적: 외부 CSS 파일(예: style.css)을 HTML 문서에 연결하여 웹 페이지의 디자인과 레이아웃을 적용합니다. 대부분의 웹사이트는 디자인을 위해 CSS를 사용하므로 사실상 필수입니다. href 속성에는 CSS 파일의 경로를 지정합니다.

6. 파비콘 (Favicon) - 권장

<link rel="icon" href="/favicon.ico" type="image/x-icon">
<!-- 또는 PNG 등 다른 형식 -->
<link rel="icon" href="/favicon.png" type="image/png">
<!-- 다양한 기기를 위한 추가 아이콘들 -->
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

목적: 브라우저 탭, 북마크 목록 등에 표시되는 작은 아이콘입니다. 웹사이트의 브랜딩과 사용자 경험을 향상시킵니다.

7. 표준 URL (Canonical URL) - SEO에 중요 (특히 중복 콘텐츠 우려 시)

<link rel="canonical" href="https://www.example.com/page-url">

목적: 여러 URL(예: http vs https, www vs non-www, 파라미터가 붙은 URL 등)이 동일하거나 매우 유사한 콘텐츠를 가리킬 때, 검색 엔진에게 어떤 URL을 대표(표준) 버전으로 간주해야 하는지 알려줍니다. 중복 콘텐츠 문제를 방지하고 SEO 점수를 통합하는 데 도움이 됩니다.

8. (선택적) JavaScript 연결 (Linking JavaScript)

<script src="script.js" defer></script>

목적: 외부 JavaScript 파일(예: script.js)을 연결합니다.
참고: <script> 태그는 <head> 안에 넣을 수도 있지만, 페이지 로딩 성능을 위해 <body> 태그가 닫히기 직전에 넣거나, <head>에 넣을 경우 defer 또는 async 속성을 사용하는 것이 좋습니다.
- defer: HTML 파싱과 병렬로 스크립트를 다운로드하고, HTML 파싱이 끝난 후 실행합니다.
- async: HTML 파싱과 병렬로 스크립트를 다운로드하고, 다운로드가 완료되는 즉시 (파싱 중단 가능성 있음) 실행합니다.

요약: 최소 필수 <head> 구조

<!DOCTYPE html>
<html lang="ko"> <!-- 언어 설정도 중요 -->
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>페이지 제목</title>
    <meta name="description" content="페이지 요약 설명">
    <link rel="stylesheet" href="css/style.css"> <!-- CSS 파일 경로 -->
    <link rel="canonical" href="이 페이지의 표준 URL">
    <!-- 필요에 따라 파비콘, 스크립트 등 추가 -->
</head>
<body>
    <!-- 페이지 콘텐츠 -->
</body>
</html>