HTML <head> default code
코딩을 처음하게 되면 HTML <head> 태그에 어떤 코드를 필수로 설치해야 하는가에 대해 궁금해 하는 분이 많습니다.
그래서 필자가 사용중인 코드를 보여드립니다.
코딩에 도움되었으면 좋겠습니다.
https://codepen.io/lshjju/pen/xxXemMJ?editors=1100
material-html-css-default-improvement
...
codepen.io
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=3.0">
<meta name="keywords" content="jeon-jinuk">
<meta name="description" content="jeon-jinuk">
<meta name="author" content="jeon-jinuk">
<title>jinuk-------</title>
<link rel="stylesheet" href="style.css">
<style type="text/css"></style>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="script.js"></script>
<script type="text/javascript"></script>
</head>
<body>
<article>
<div>
<p class="p-title">Primary title</p>
<h1>Title step</h1>
<h2>Title step</h2>
<h3>Title step</h3>
<h4>Title step</h4>
<h5>Title step</h5>
<h6>Title step</h6>
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using
'Content here, content here', making it look like readable English.</p>
</div>
<div><button>Read more</button></div>
<div><a href="#" onclick="return false;">click</a></div>
<!-- <div><a id="noLink" href="/">click</a></div>
<script>
document.getElementById("noLink").addEventListener("click", function(event){
event.preventDefault()
});
</script> -->
<div><img src="https://images.unsplash.com/photo-1453372755486-254d0e724b38?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1952&q=80"></div>
</article>
</body>
</html>여기부터는 제미나이가 추천한 코드입니다.
위 필자의 코드와 적절하게 섞어쓰면 좋을것 같습니다.
HTML의 <head> 영역은 브라우저에게 페이지를 어떻게 해석할지 알려주는 **'설명서'**와 같습니다. 검색 엔진 최적화(SEO), 모바일 반응형 대응, 그리고 속도 최적화를 위해 꼭 필요한 현대적인 표준 코드를 정리해 드릴게요.
🏗️ 모던 웹 <head> 표준 템플릿
이 코드를 복사해서 <head> 태그 안에 넣으시면 됩니다.
HTML
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>페이지 제목 (60자 이내 권장)</title>
<meta name="description" content="페이지에 대한 간단한 요약 설명입니다. 검색 결과에 표시됩니다.">
<meta name="author" content="작성자 이름 또는 회사명">
<meta property="og:type" content="website">
<meta property="og:title" content="공유될 제목">
<meta property="og:description" content="공유될 설명문구">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:url" content="https://example.com">
<link rel="icon" href="/favicon.ico" type="image/x-icon">
<link rel="apple-touch-icon" href="/apple-touch-icon.png"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="stylesheet" href="./css/style.css">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
</head>
🔍 핵심 포인트 요약
- meta charset="UTF-8": 한글 깨짐 방지를 위해 필수입니다. HTML 문서에서 가장 상단에 위치하는 것이 관례입니다.
- viewport: 이 코드가 없으면 스마트폰에서 웹사이트가 아주 작게(PC 화면 그대로) 보입니다. 모바일 대응의 핵심입니다.
- Open Graph (og:...): 카카오톡이나 페이스북에 링크를 보냈을 때 예쁜 카드 형태로 나오게 해줍니다. 마케팅 측면에서 매우 중요하죠.
- preconnect: 외부 폰트나 라이브러리를 가져올 때 브라우저가 미리 연결을 준비하게 하여 로딩 속도를 몇 밀리초라도 줄여줍니다.
💡 꿀팁: 테마 컬러 설정
모바일 브라우저(크롬, 사파리 등)의 상단 주소창 색상을 웹사이트 분위기에 맞게 바꾸고 싶다면 아래 코드를 추가해 보세요. 브랜드 이미지를 훨씬 높여줍니다.
HTML
<meta name="theme-color" content="#007bff">
'HTML' 카테고리의 다른 글
| Formtag for backend coding (0) | 2026.03.10 |
|---|---|
| Semantic tag (0) | 2026.02.19 |
| HTML structure and comment (0) | 2026.02.19 |
| Hyper link tag and property (0) | 2026.02.18 |
| Multimedia tag and property (0) | 2026.02.18 |