일단 HTML의 가장 기본적인 문서 형태를 보고, 최상위에 해당하는 주요 태그들에 대해 먼저 살펴보도록 하겠습니다. 간단하게 리뷰를 하는 형태이니 편한 마음으로 살펴보겠습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" content="HTML문서의 기본 구조">
<meta name="description" content="HTML문서의 기본적인 구조에 대한 태그를 설명합니다.">
<meta name="author" content="John Doe">
<title>Example Document</title>
</head>
<body>
<h1>HTML 기본 테스트 문서입니다.</h1>
<hr>
<p>1번 항목</p>
<p>2번 항목</p>
<p>3번 항목</p>
</body>
</html>
HTML 기본 테스트 문서입니다.
1번 항목
2번 항목
3번 항목
○ <!DOCTYPE html> 태그
해당 태그는 가장 기본 적인 문서의 유형(document type)을 선언하는 태그입니다. 해당 문서가 HTML5로 작성되었음을 선언하는 기본 태그입니다.
○ <html> 태그
html 문서의 가장 기본적인 태그이며, html 파일의 시작과 끝을 정의합니다. <html> 태그 사이에 모든 문서의 내용이 작성되는 것을 원칙으로 하며, </html> 태그 뒤에는 아무 내용도 작성하지 않습니다.
단, 예제에 보면 <html lang="ko"> 형태로 html 태그가 시작되는 것을 볼 수 있습니다. html 태그에서는 lang 속성을 사용하여, 해당 전체 문서에서 사용하는 언어에 대한 속성을 지정할 수 있습니다. 해당 태그가 적용되는 가장 대표적인 사례는, 검색 엔진에서 언어 제한을 수행할 경우입니다. ("한국어 웹"만 검색할 겨우, lang 속성이 "ko"인 문서만 검색) 이밖에도 html 태그의 lang 속성을 기준으로 수행되는 여러 작업에 적용될 수 있습니다.
○ <head> 태그
head 태그에는 브라우저에 직접 표시되지는 않지만, 브라우저에 전달할 정보들이 저장되는 태그입니다. 스타일시트 파일도 이 태그 내에서 연결되는 등, 중요한 역할을 하게 됩니다. 우선 여기서는 <title>과 <meta> 태그를 중심으로 살펴보겠습니다.
<title> 태그는 말 그대로 문서의 제목을 의미합니다. 브라우저 제목 표시줄에 출력되며, 검색 엔진에 노출되는 타이틀이며 즐겨찾기 메뉴에 표시되는 주요 영역입니다. 이 타이틀 텍스트는 검색엔진 최적화에 있어서도 중요한 영향을 미치니, 항상 신중하게 결정해야 합니다.
<meta> 태그는 말 그대로 해당 웹 문서에 대한 메타 정보를 담게 됩니다. meta 태그의 속성 종류는 다양하게 존재하므로 추후 세부적으로 살펴보겠지만, 몇 가지 대표적인 메타 태그 속성을 알아보겠습니다.
<meta charset="UTF-8">위와 같이 메타 태그의 charset 속성은 한글을 사용하는 문서에서 인코딩 규격을 지정하는 태그입니다. 한글을 사용하는 문서에서는 브라우저에서 임의 인코딩으로 인한 오류를 방지하기 위해 반드시 넣어야 합니다.
<meta name="description" content="HTML문서의 기본적인 구조에 대한 태그를 설명합니다.">위의 name 속성의 description은 문서에 대한 간단한 요약 정보를 기술하게 됩니다. 이 부분은 주로 검색 엔진에서 해당 사이트가 노출되었을 때, title과 더불어 함께 주로 표시되는 영역입니다. meta 태그의 keywords와 더불어 현재는 SEO에 크게 영향을 주지 않는 것으로 알려져 있지만, 검색 엔진 노출 시 클릭률에 큰 영향을 주기 때문에 깔끔하게 주요 키워드를 넣어 작성해야 합니다. 영어 150자, 한글 100자 정도의 길이를 추천합니다.
○ <body> 태그
사실 body 태그는 별도의 설명이 필요 없습니다. 실제 브라우저에 출력될 내용들이 작성되는 영역이며, 유저가 화면에서 보게 되는 대부분의 내용들은 body 태그에 실제로 작성된다는 점을 기억해 두면 됩니다.
'Programming > HTML+CSS' 카테고리의 다른 글
| 2. 내용 입력하기(3) - 표 생성하기 1 (0) | 2023.02.24 |
|---|---|
| 2. 내용 입력하기(2) - 목록 생성하기 (0) | 2023.02.23 |
| 2. 내용 입력하기(1) - 텍스트 입력 2 (0) | 2023.02.22 |
| 2. 내용 입력하기(1) - 텍스트 입력 1 (0) | 2023.02.22 |
| 1. HTML문서의 구조(2) - 시맨틱 태그 (0) | 2023.02.20 |
