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 |
|---|