HTML5 기본 템플릿 구조

프로그래밍/HTML

HTML5 기본 템플릿 구조

HoBiC 2024. 5. 14. 14:01

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=EDGE" />
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <meta name="keywords" content="컴퓨터, 저장장치, hdd"/>
    <meta name="description" content="컴퓨터의 저장장치들에 대해 알려드립니다.">
    <meta property="og:type" content="website">
    <meta property="og:url" content="http://local.co.kr/hdd.html">
    <meta property="og:title" content="저장장치 - 컴퓨터">
    <meta property="og:description" content="컴퓨터의 저장장치들에 대해 알려드립니다.">
    <meta property="og:image" content="/ogimage.gif">
    <meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width" />
    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href"/favicon-16x16.png">
    <link rel="icon" type="image/x-icon" href="/favicon.ico">           
    <link rel="stylesheet" type="text/css" href="/common/css/base.css"/>
    <script type="text/javascript" src="/common/js/jquery.min.js"></script>
    <title>제목</title>
</head>
<body>

</body>
</html>

이 메타 태그는 Internet Explorer 브라우저가 최신 엔진으로 렌더링되도록 지시합니다.

이 메타 태그는 문서의 콘텐츠 유형과 문자 인코딩을 지정합니다.

이 메타 태그는 검색 엔진에게 페이지와 관련된 키워드를 제공합니다. 여기에 키워드를 입력하여 페이지의 주제를 설명할 수 있습니다

이 메타 태그는 페이지의 간단한 설명을 제공합니다. 이 설명은 검색 결과에 표시될 수 있습니다.

Open Graph 프로토콜을 사용하여 페이지의 유형을 지정합니다. 여기서는 웹사이트를 나타내는 website로 설정되어 있습니다.

메타 태그는 Open Graph 프로토콜을 사용하여 페이지의 URL을 지정합니다.

이 메타 태그는 Open Graph 프로토콜을 사용하여 페이지의 제목을 지정합니다.

이 메타 태그는 Open Graph 프로토콜을 사용하여 페이지의 간단한 설명을 지정합니다.

이 메타 태그는 Open Graph 프로토콜을 사용하여 페이지와 연결된 이미지를 지정합니다. 이 이미지는 소셜 미디어 등에서 페이지를 공유할 때 사용될 수 있습니다.

content="user-scalable=no": 사용자가 확대/축소를 할 수 없도록 설정합니다.

initial-scale=1.0: 페이지가 처음 로드될 때 초기 줌 레벨을 1.0으로 설정합니다.

maximum-scale=1.0: 최대 줌 레벨을 1.0으로 제한합니다.

minimum-scale=1.0: 최소 줌 레벨을 1.0으로 제한합니다.

width=device-width: 뷰포트의 너비를 디바이스의 실제 너비로 설정합니다.

사이즈별 파비콘을 선언합니다.