1. Doctype tag
<!Doctype html>
2. html tag
- 모든 HTML tag의 부모 요소
- 모든 요소는 html tag 내에서 기술됨
- 단 <!DOCTYPE>은 예외임
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>문서 제목</title>
</head>
<body>
화면에 출력할 모든 컨텐츠는 여기에 기술함
</body>
</html>
- html은 global attribute를 지원함
- 특히 lang attribute를 많이 사용
<html lang="ko">
3. head tag
- metadata를 포함하기 위한 요소
- metadata : HTML 문서의 title, style, link, script에 대한 정보
- metadata 이외의 화면에 표시되는 요소 포함 불가능
3.1 title tag
- 문서의 제목을 정의함
- 정의된 제목은 브라우저 탭에 표시됨
3.2 style tag
- HTML 문서를 위한 style 정보를 정의함
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>문서 제목</title>
<style>
body {
background-color: yellow;
color: blue;
}
</style>
</head>
<body>
화면에 출력할 모든 컨텐츠는 여기에 기술함
</body>
</html>
3.3 link tag
- 외부 리소스와의 연계 정보를 정의함
- 주로 HTML과 외부 CSS 파일 연계에 사용됨
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>문서 제목</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
화면에 출력할 모든 컨텐츠는 여기에 기술함
</body>
</html>
3.4 script tag
- client-side JavaScript를 정의함
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<script>
document.addEventListener('click', function() {
alert('Clicked!');
});
</script>
</head>
<body>
화면에 출력할 모든 컨텐츠는 여기에 기술함
</body>
</html>
- src attribute를 사용하여 외부 JavaScript 파일 로드 가능
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<script src="main.js"></script>
</head>
<body>
화면에 출력할 모든 컨텐츠는 여기에 기술함
</body>
</html>
- description, keywords, author, 기타 metadata를 정의함
- charset attribute : 브라우저에서 사용할 문자셋을 정의함
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<p>안녕하세요</p>
<p>Hello</p>
</body>
</html>
- SEO(Search Engine Optimization)를 위해 검색엔진이 사용할 keywords를 정의함
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
<meta name="description" content="Web tutorials on HTML and CSS">
<meta name="author" content="Lee Sora">
<meta http-equiv="refresh" content="30">
4. body tag
- HTML문서의 내용을 나타냄
- metadata를 제외한 웹페이지를 구성하는 대부분의 요소가 body tag 내에서 기술됨
