<!DOCTYPE html>
- 문서의 첫 부분에서 문서 유형을 지정하는 단일 태그
- 문서 유형 : 웹 브라우저에게 "이 문서는 ~~니까 잘 처리해줘"
<html>~</html>
- 문서가 시작되고 끝나는 것을 나타내는 태그
- 모든 내용은 이 안에 작성됨
- 태그 내부에 다양한 태그들을 포함 → 들여쓰기로 구분
<head>~</head>
- 웹 브라우저 화면에는 보이지 않지만, 웹 브라우저가 알아야 할 모든 정보를 포함
- 예) <title> / css 링크 / 다른 메타데이터(작성자, 중요한 키워드 등)
- <meta charset="utf-8">
문자 인코딩 및 문서 키워드 등에 대한 요약 정보를 기입하는 단일 태그
- 문자 인코딩 ≫ 한글을 표시하기 위해 문자 세트를 지정하는 작업
- 영문/한글 모두 사용하기 위해 utf-8 방식을 사용하는 것이 좋음
- <title>~</title>
문서의 제목을 나타냄
콘텐츠는 브라우저 탭에 표시됨
- 브라우저 사이트를 북마크할 때 <title>의 내용물을 추천하는 북마크 이름으로 사용하기도 함
- <meta name="" content="">
저자와 설명을 추가
많은 <meta> 요소는 name과 content 속성을 가짐
- name : 메타 요소가 어떤 정보의 형태를 갖고 있는지
- content : 실제 메타데이터의 컨텐츠
- 관리자를 정리하고 머릿말 요약하는 데 유용함
- 저자를 지정하는 것 > 콘텐츠 작성자에 대한 정보를 볼 수 있게 해줌
- 페이지 콘텐츠 관련 키워드 포함하는 것 > 검색엔진에서 이 페이지가 더 많이 표시될 가능성이 생기게 할 수 있음 : SEO
<meta name="author" content="Chris Mills" />
<meta
name="description"
content="The MDN Learning Area aims to provide
complete beginners to the Web with all they need to know to get
started with developing web sites and applications." />
- <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
favicon - 맞춤 아이콘 추가하기
1. 인덱스 페이지 같은 디렉토리에 .ico 포멧의 파일 저장
2. <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />를 <head>에 추가하여 favicon을 참조
- <link rel="stylesheet" href="my-css-file.css" />
- css와 JavaScript 적용하기
css 적용 ≫ 문서의 head 부분에 <link> 태그 사용
- rel="stylesheet" : 문서의 스타일시트임을 나타냄
- href="경로" : 스타일 시트 파일의 경로를 포함
JS 적용 ≫ head에 들어갈 필요 x </body> 태그 바로 앞, 즉 문서 본문의 맨 끝에 넣음
- <script src="my-js-file.js"></script>
<body>~</body>
- 실제 브라우저 화면에 표시될 내용을 입력하는 태그
- 텍스트 표시하는 태그
- 이미지 표시하는 태그
- 각종 사용자 인터페이스(버튼, 입력란, 드롭다운 메뉴 등)를 나타내는 태그
- 태그 안에 태그를 포함하는 등 여러 방식으로 작성 가능
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>제목</title>
</head>
<body>
내용
</body>
</html>