02. HTML5 기본 태그

I. DTD 태그

DTD(Document Type Definition) 태그는 웹 페이지의 형식을 브라우저에게 전달하는 태그이다.

문서의 최상단에 위치해야 하며 HTML5와 같은 경우 <!DOCTYPE html> 이 DTD 태그가 된다.

II. html 태그

html 태그는 html element를 정의하며, html element는 DTD 요소를 제외한 모든 element의 조상 element가 된다. 즉, DTD 요소를 제외한 모든 element는 html element의 자손 element가 된다.

III. head 태그

head 태그는 head element를 정의하며, head element는 문서의 메타데이터를 포함하게 된다. head element에는 렌더링되는 element를 포함시킬 수 없다.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Math Problem Solver</title>
	</head>
	<body>
		Hello, world!
	</body>
</html>

meta 태그

meta 태그는 charset attribute를 통해 HTML 문서의 문자 인코딩 방식을 브라우저에게 전달하거나, description, author, keywords와 같은 정보를 검색 엔진에게 전달하는 목적으로 사용한다.

<head>
	<meta charset="utf-8">
	<meta name="description" content="이 사이트는 여러 종류의 수학 문제를 대신 풀어 줍니다.">
</head>

title 태그

title 태그는 브라우저의 탭에 표시되는 문서의 제목을 정의한다.

<head>
	<meta charset="utf-8">
	<title>Math Problem Solver</title>
</head>

style 태그

style 태그는 internal style sheet를 정의할 때 사용한다.

<head>
	<meta charset="utf-8">
	<style>
		body {
			background-color: yellow;
			color: blue;
		}
	</style>
</head>

link 태그

link 태그는 external style sheet를 link하는 역할을 맡는다.

<head>
	<meta charset="utf-8">
	<link rel="stylesheet" href="style.css">
</head>

script 태그

script 태그는 JavaScript 코드를 embed 하거나 external script file을 참조할 때 사용한다. script 태그는 경우에 따라 head 섹션에 위치시킬 수도 있고 body 섹션에 위치시킬 수도 있다.

embedding

<head>
	<meta charset="utf-8">
	<script>
		document.addEventListener('click', () => {
			alert("클릭!");
		});
	</script>
</head>

reference to external script file

<head>
	<meta charset="utf-8">
	<script src="click.js></script>
</head>

IV. body 태그

body 태그는 body element를 정의하며, body element는 메타데이터를 제외한 대부분의 element를 포함한다.

<html>
  <head>
    <meta charset="utf-8">
    <title>Math Problem Solver</title>
  </head>
  <body>
    <h1>어떤 문제를 풀어볼까요?</h1>
		<p>...</p>
  </body>
</html>

Reference

[1] https://poiemaweb.com/html5-tag-basic

[2] https://www.w3schools.com/tags/tag_style.asp

[3] https://www.w3schools.com/tags/tag_link.asp

[4] https://www.w3schools.com/js/js_whereto.asp

Uploaded by N2T

'Frontend > HTML' 카테고리의 다른 글

06. HTML5 이미지, 오디오, 비디오 (0)	2022.08.27
05. HTML5 List & Table (0)	2022.08.26
04. HTML5 하이퍼링크 (0)	2022.08.26
03. HTML5 텍스트 관련 태그 (0)	2022.08.26
01. HTML5 기본 문법 (0)	2022.08.25