1. <!DOCTYPE html>
- 현재 문서가 HTML5로 작성한 웹 문서라는 것을 의미한다.
2. <html> ~ </html>
- 웹 문서의 시작과 끝을 나타내는 태그이다.
- 웹 브라우저가 <html> 태그를 만나면 </html>까지 소스를 읽어 화면에 표시한다.
<!-- 문서에서 사용할 언어 지정 예시 -->
<html lang="ko">
...
</html>
3. <head> ~ </head>
- 웹 브라우저가 웹 문서를 해석하는데 필요한 metadata를 정의하는 부분이다.
- metadata란 HTML 문서에 대한 정보로, 웹 브라우저에는 직접적으로 표현되지 않는 정보를 의미한다.
- 이러한 메타데이터는 <title>, <style>, <meta>, <link>, <script>, <base> 태그 등을 이용하여 표현할 수 있다.
3.1 <meta>
- 웹 브라우저에는 보이지 않지만 웹 문서와 관련된 정보를 지정할 때 사용한다.
<!-- 인코딩 지정 예시 -->
<meta charset="UTF-8">
<!-- 웹 문서의 키워드 예시 -->
<meta name="keywords" content="html의 구조">
<!-- 웹 문서의 설명 예시 -->
<meta name="description" content="html의 구조를 알아봅시다">
<!-- 웹 문서의 소유자나 제작자 예시 -->
<meta name="author" content="Myoungkun Kim">
3.2 <title>
- HTML 문서의 제목을 정의한다.
- 웹 브라우저의 toolbar에 표시되며, 즐겨찾기에 추가할 때 제목이 된다.
- 검색 엔진의 결과 페이지에 제목으료 표시된다.
<title>제목입니다</title>
4. <body> ~ </body>
- 실제 웹 브라우저 화면에 나타나는 내용이다.
<body>
<h1>웹 개발</h1>
<hr>
<p>HTML</p>
<p>CSS</p>
<p>자바스크립트</p>
</body>
참고
- http://tcpschool.com/html/html_intro_basicStructure
- 『HTML+CSS+자바스크립트 웹 표준의 정석』