HTML5 페이지 구조

    html, head

 

1.  lang 속성값

  • 실제 웹브라우저가 동작하는데 어떠한 영향도 끼치지 않지만 구글과 같은 검색엔진에서 웹 페이지를 탐색할 때 어떤 페이지로 만들어져 있는지 쉽게 인식하기 위한 목적을 가지고 있다.
국가 속성값
한국 ko
일본 ja
중국 zh
미국 en
러시아어 ru
독일어 de

 

2. head 태그

  •  
태그명 설명
<!DOCTYPE html> 현재 웹 브라우저가 HTML5 문서임을 선언하는 태그
<html> html 태그는 모든 HTML 페이지의 루트 요소로 lang 속성을 입력할 수 있다.
<html lang = "ko">
meta 브라우저의 검색엔진이 작동 가능하도록 웹 페이지의 추가 정보 제공
title 브라우저의 검색엔진이 작동 가능하도록 웹 페이지의 제목 정보 제공
script 스크립트를 추가
link 웹 페이지에 link를 통해 파일을 추가
style 웹 페이지에 style 시트를 추가
base 웹 페이지의 기본 경로를 지정한다.
<base href="/images/" target="_blank" />

 

   meta tag 설명

속성명 설명
charset 문자코드 종류 설정
문자 깨짐이나 오류가 생길 수 있어 방지하기 위해 인코딩 선언한다.
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
Description 검색결과에 표시되는 설명
<meta name="discription" content="YI_DADA의 웹페이지입니다.">
Keywords 검색엔진에 검색되는 키워드
<meta name="keyword" content="YI_DADA">
author 웹페이지 제작자 명
<meta http-equiv="Author" content="홍길동">
publisher 제작사
<meta http-equiv="publisher" content="제작사">
other agent 웹 책임자
<meta http-equiv="other Agent" content="웹 책임자">
copyright 저작권
<meta http-equiv="copyright" content="저작권">
distribution 배포자
<meta http-equiv="distribution" content="배포자">
build, last-modified 제작년월일
<meta http-equiv="build" content="date">
<meta http-equiv="last-modified" content="Fri, 05 Jul 2020 20:07:00">
email, reply-to 이메일
<meta http-equiv="email" content="메일 주소">
<meta http-equiv="reply-to" content="메일 주소">
 title
문서 제목
<
meta http-equiv="title" content="YI_DADA의 웹페이지">
viewport 모바일 반응 페이지
<meta name="viewport " content="width=device-width, initial-scale=1.0">
generator 제작도구
<meta http-equiv="generator" content="제작도구">
filename 파일명
<meta http-equiv="filename" content="파일명">
imagetoolbar 그림 위 마우스 오버 시 이미지 관련 툴바 생성하지 않는다.
<meta http-equiv="imagetoolbar" content="no">
cache-control 캐쉬를 가져오지않아 사용자에게 항상 바뀐 내용을 보여줄 수 있지만 페이지 출력 속도가
오래 걸리는 단점을 가지고 있다.
</meta http-equiv="cache-control" content="no-cache">
refresh
60초마다 새로고침
<
meta http-equiv="refresh" content="60">
60초 후 설정 된 url 주소로 자동 이동 
</meta http-equiv="refresh" content="60; url="주소">
   

※ meta 태그 설명 출처(🏷️ 메타(meta) 태그 종류 & 사용법 (tistory.com))

 

<!DOCTYPE html>

<head>
    <html lang="ko">
    <meta charset="UTF-8">
    <meta name="description" content="Free Web tutorials">
    <meta name="keywords" content="HTML, CSS, JavaScript">
    <meta name="author" content="John Doe">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

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

    <script>
        document.getElementById("demo").innerHTML = "Hello JavaScript!";
    </script>

    <style>
        h1 {
            color: red;
        }

        p {
            color: blue;
        }
    </style>
</head>


<body>
</body>

</html>

 

 

 

 

 

 

'Programming > html, css' 카테고리의 다른 글

HTML5 : 글자태그  (0) 2023.03.29

+ Recent posts