<!DOCTYPE html>
출력할 웹 페이지의 형식을 html 이라는 것을 브라우저에게 전달하며 맨 첫 줄에 위치함.
웹 페이지에 단 하나만 존재하며 html 태그는 모든 HTML 요소의 부모 요소이고 <!DOCTYPE> 를 제외하고는 HTML 의 모든 요소들은 html 요소 내부에 작성해야 한다.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>문서 제목</title>
</head>
<body>
화면에 표시할 모든 콘텐츠는 이곳에 기술한다.
</body>
</html>
head 요소는 메타데이터를 포함하기 위한 요소이며 html 과 마찬가지로 웹페이지에 단 하나만 존재한다.
메타데이터는 HTML 문서의 title, style, link, script에 대한 데이터로 화면에 표시되지 않는다.
head 요소에는 메타데이터 이외의 화면에 표시되는 일체의 요소를 포함시킬 수 없다.
그런데 메타데이터란 무엇일까?
메타데이터의 가장 단순한 정의는 데이터를 설명하는 데이터입니다. 예를 들어 HTML은 데이터입니다.
그리고 HTML의 < head > 안에는 문서 작성자나 문서 요약과 같이 문서를 설명하는 데이터, 즉 메타데이터를 넣을 수 있습니다.
https://developer.mozilla.org/ko/docs/Glossary/Metadata
문서의 제목을 정의하며 브라우저의 탭에 표시된다.
<title>문서 제목</title>
style 요소에는 HTML 문서를 위한 style 정보를 정의한다.
<style>
body {
background-color: yellow;
color: blue;
}
</style>
link 요소에는 외부 리소스와의 연계 정보를 정의한다. 주로 HTML과 외부 CSS 파일을 연계에 사용된다.
<link rel="stylesheet" href="style.css">
Javascript 를 정의하는 요소를 넣는다.
<script>
document.addEventListener('click', function () {
alert('Clicked!');
});
</script>
또는 src attribute 를 사용하여 외부 js 파일을 로드할 수 있다.
<script src="main.js"></script>
meta 요소는 description, keywords, author, 기타 메타데이터 정의에 사용된다. 메타데이터는 브라우저, 검색엔진(keywords) 등에 의해 사용된다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<p>안녕하세요</p>
<p>Hello</p>
<p>こんにちは</p>
<p>你好</p>
<p>שלום</p>
<p>สวัสดี</p>
</body>
</html>
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
<meta name="description" content="Web tutorials on HTML and CSS">
<meta name="author" content="John Doe">
body tag는 HTML 문서의 내용을 나타내며 웹페이지에 단 하나만 존재한다. 메타데이터를 제외한 웹페이지를 구성하는 대부분의 요소가 body 요소 내에 기술된다.
<html>
<head>
<meta charset="utf-8">
<title>문서 제목</title>
</head>
<body>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</body>
</html>
참고 사이트 : https://poiemaweb.com/html5-tag-basic
읽어봐야 하는 레퍼런스 : https://developer.mozilla.org/ko/docs/Web/HTML/Element