■ 요약
▶ <head> 요소는 메타데이터에 대한 컨테이너다.
▶ <head> 요소는 <html> 태그와 <body> 태그 사이에 위치한다.
▶ <title> 요소는 필수이며 문서의 제목을 정의한다.
▶ <style> 요소는 단일 문서에 대한 스타일 정보를 정의하는데 사용된다.
▶ <link> 태그는 대부분 외부 스타일 시트를 연결하는데 사용된다.
▶ <meta> 요소는 일반적으로 문자 집합, 페이지 설명, 키워드, 문서의 작성자, 뷰포트 설정을 지정하는 데 사용된다.
▶ <script> 요소는 Javascript 클라이언트 측에 정의하는 데 사용된다.
▶ <base> 요소는 페이지의 모든 상대 URL에 대한 기본 URL 및/또는 대상을 지정한다.
▶ HTML <head> 요소는 아래에 요소에 대한 컨테이너이다.
▷ <title>, <style>, <meta>, <link>, <script>, <base>
■ HTML <head> 요소
▶ <head> 요소는 메타데이터에 대한 컨테이너이며 <html>태그와 <body> 태그 사이에 위치한다.
▶ HMTL 메타데이터는 HTML 문서에 대한 데이터이다.
▶ 메타데이터는 표시되지 않는다.
▶ 메타데이터는 일반적으로 문서 제목, 문자 집합, 스타일, 스크립트, 기타 메타 정보를 정의한다.
■ HTML <title> 요소
▶ <title> 요소는 문서의 제목을 정의한다.
▶ 제목은 텍스트만 사용해야하며, 페이지의 탭이나 Browser 제목 표시줄에 표시된다.
▶ <title> 요소는 HTML 문서에서 필수다
▶ 페이지 제목의 내용은 최적 검색 엔진(SEO) 에서 매우 중요하다.
▶ 페이지 제목은 검색 엔진 알고리즘에서 검색 결과에 페이지를 나열할 때 순서를 결정하는 데 사용된다.
▶ <title> 요소 :
▷ Browser 툴바에 제목을 정의한다.
▷ 즐겨찾기에 추가될 때 페이지의 제목을 제공한다.
▷ 검색 엔진 결과에 페이지의 제목을 표시한다.
▶ 따라서 제목을 최대한 정확하고 의미있게 만들어야 한다.
<!DOCTYPE html>
<html>
<head>
<title>A Meaningful Page Title</title>
</head>
<body>
The content of the document......
</body>
</html>실습 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml_head_title
■ HTML <style> 요소
▶ <style> 요소는 단일 HTML 페이지에 대한 스타일 정보를 정의하는 데 사용된다.
<style>
body {background-color: powderblue;}
h1 {color: red;}
p {color: blue;}
</style>실습 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml_head_style
■ HTML <link> 요소
▶ <link> 요소는 현재 문서와 외부 자원 사이에 관계를 정의한다.
▶ <link> 태그는 대부분 외부 스타일 시트를 연결하기 위해 사용된다.
<link rel="stylesheet" href="mystyle.css">실습 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml_head_link
■ HTML <meta> 요소
▶ <meta> 요소는 일반적으로 문자 집합, 페이지 설명, 키워드, 문서 작성자 및 뷰표트 설정을 지정하는 데 사용된다.
▶ 메타데이터는 페이지에 표시되지 않지만 Browser, 검색 엔진 및 기타 웹 서비스에서 사용된다.
■ 예시
▶ 문자 집합 정의
<meta charset="UTF-8">
▶ 검색 엔진을 위한 키워드 정의
<meta name="keywords" content="HTML, CSS, JavaScript">
▶ 웹 페이지의 설명을 정의
<meta name="description" content="Free Web tutorials">
▶ 문서의 작성자 정의
<meta name="author" content="John Doe">
▶ 매 30초 마다 문서 새로고침
<meta http-equiv="refresh" content="30">
▶ 모든 장비에서 웹 사이트를 보기 좋게 만들기 위한 뷰포트 설정
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="author" content="John Doe">실습 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml_head_meta
■ 뷰포트 설정
▶ 뷰포트는 웹 페이지에서 사용자가 볼 수 있는 영역이며, 기기에 따라 다르다
▶ 모든 웹 페이지에 다음 <meta> 요소를 포함해야 한다.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
▶ 이것은 페이지의 크기와 배율을 제어하는 방법에 대한 Browser 지침을 제공한다.
▶ "width=device-width" 부분은 장비의 화면 너비를 따르도록 페이지의 너비를 설정한다.
▶ "initial-scale=1.0" 부분은 페이지가 Browser에 의해 처음 로드될 때 초기 확대/축소 수준을 설정한다.
▶ 다음은 뷰포트 메타 태그가 없는 웹 페이지와 뷰포트 메타 태그가 있는 동일한 웹 페이지의 예시이다.
■ HTML <script> 요소
▶ <script> 요소는 Javascript 클라이언트 측에 정의하는 데 사용된다.
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Hello JavaScript!";
}
</script>실습 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml_head_script
■ HTML <base> 요소
▶ <base> 요소는 모든 상대 경로 URL에 대한 기본 URL 및/또는 대상을 지정한다.
▶ <base> 태그에는 "href" 또는 "target" 속성이 있거나 둘 다 있어야 한다.
▶ 문서에는 하나의 단일 <base> 요소만 있을 수 있다.
<head>
<base href="https://www.w3schools.com/" target="_blank">
</head>
<body>
<img src="images/stickman.gif" width="24" height="39" alt="Stickman">
<a href="tags/tag_base.asp">HTML base Tag</a>
</body>실습 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml_head_base
출처 : https://www.w3schools.com/html/html_head.asp
HTML head Elements
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
'HTML' 카테고리의 다른 글
| HTML / (41) 반응형 웹 디자인 (0) | 2023.02.24 |
|---|---|
| HTML / (40) 레이아웃 요소 및 기술 (0) | 2023.02.24 |
| HTML / (38) 파일 경로 (0) | 2023.02.24 |
| HTML / (37) Javascript (0) | 2023.02.24 |
| HTML / (36) iframes (0) | 2023.02.24 |