코딩 첫걸음 | HTML 문서 기본 구조
이번 주제는 HTML의 기본 구조를 이루는 태그입니다. HTML 문서를 작성하기 위해 태그들을 적절히 조합하고 내용을 채워 넣어 웹 페이지를 만들어 보세요.
목차
- <!DOCTYPE> 선언
- <html> 태그
- <head> 태그
- <title> 태그
- <h1> ~ <h6> 태그
- <body> 태그
1. <!DOCTYPE>
문서 유형을 정의하는 선언문입니다. <!DOCTYPE html>는 이 문서가 HTML임을 나타냅니다. 이 선언문은 문서가 사용하고 있는 HTML 버전을 웹 브라우저에 알려줍니다. 모든 HTML 문서에서 가장 먼저 나와야 합니다
다음과 같이 사용합니다.
htmlCopy code
<!DOCTYPE html>
2. <html> 태그
HTML 문서의 최상단(루트) 요소로, 문서의 시작과 끝을 나타냅니다. 브라우저에 그 안에 있는 모든 것이 HTML 코드임을 알려줍니다.
예를 들어 다음과 같이 사용할 수 있습니다. 예시의 <html lang = “ko”>는 웹페이지 텍스트의 기본 언어를 지정하기 위해 lang 속성을 사용했습니다. “ko”는 기본 언어가 한국어라는 의미이며, html 문서의 기본 언어를 영어로 지정하고 싶은 경우에는 <html lang = “en”>과 같이 작성하면 됩니다.
html
<html lang="ko">
<!-- HTML content goes here -->
</html>
3. <head> 태그
<head> 태그에는 웹페이지에 직접 표시되지 않는 HTML 문서에 대한 메타 정보가 포함됩니다. 여기에는 문서 제목, 문자 집합, 스타일시트 및 스크립트와 같은 요소가 포함됩니다.
html
<head>
<title>Page Title</title>
</head>
4. <title> 태그
문서의 제목을 정의하는 태그입니다. <head> 섹션 내에 중첩된 <title> 태그는 브라우저의 제목 표시줄이나 탭에 나타나는 웹페이지의 제목을 지정합니다.
html
<title>My First HTML Page</title>
5. <h1> ~ <h6> 태그
<h1>부터 <h6>까지의 태그는 HTML에서 제목을 나타내는 태그들입니다. 이 태그들은 문서의 구조와 내용의 계층을 표현하는 데 사용됩니다.
- <h1>: 가장 상위 레벨의 제목을 나타냅니다. 일반적으로 문서의 주요 제목이나 페이지 제목에 사용됩니다.
- <h2>: 두 번째 레벨의 제목을 나타냅니다. <h1> 다음으로 중요한 제목에 사용됩니다.
- <h3>: 세 번째 레벨의 제목을 나타냅니다. <h2> 하위의 소제목에 사용됩니다.
- <h4>: 네 번째 레벨의 제목을 나타냅니다. <h3> 하위의 소제목에 사용됩니다.
- <h5>: 다섯 번째 레벨의 제목을 나타냅니다. <h4> 하위의 소제목에 사용됩니다.
- <h6>: 여섯 번째 레벨의 제목을 나타냅니다. 가장 하위 레벨의 제목에 사용됩니다.
html
<h1>웹 개발 기초</h1>
<p>이 문서는 웹 개발의 기초를 다룹니다.</p>
<h2>HTML 기본 구조</h2>
<p>HTML 문서의 기본 구조는 다음과 같습니다.</p>
<h3>태그 종류</h3>
<p>HTML에는 다양한 태그들이 있습니다.</p>
<h4>블록 레벨 태그</h4>
<p>블록 레벨 태그는 줄 바꿈이 일어나는 태그들입니다.</p>
<h5>인라인 태그</h5>
<p>인라인 태그는 줄 바꿈 없이 한 줄에 표시되는 태그들입니다.</p>
<h6>특수 태그</h6>
<p>특수한 기능을 가진 태그들도 존재합니다.</p>
6. <body> 태그
문서의 본문 내용을 포함하는 영역입니다. 사용자에게 보여지는 모든 내용이 여기에 위치합니다.<body> 태그는 텍스트, 이미지, 링크, 표, 목록 등과 같이 웹 페이지에 표시되는 HTML 문서의 모든 콘텐츠를 포함합니다.
html
<body>
<h1>Welcome to My Website</h1>
<p>This is a paragraph of text.</p>
</body>
html 문서 구조 태그 활용 예시
위에서 배운 태그들을 활용하면 아래와 같은 html 문서를 작성할 수 있습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<title>나의 첫 HTML 문서</title>
</head>
<body>
<h1>환영합니다!</h1>
<p>이것은 HTML 문서의 기본 구조를 보여주는 예시입니다.</p>
<p>다음은 이 문서에 사용된 주요 태그들입니다:</p>
<p>이제 여러분도 이 기본 구조를 활용하여 자신만의 HTML 문서를 만들어 보세요!</p>
</body>
</html>
- 웹 브라우저는 <!DOCTYPE html> 선언을 통해 이 문서가 HTML5 문서임을 인식합니다.
- <html lang="ko"> 태그는 문서의 루트 요소이며, 문서가 한국어로 작성되었음을 나타냅니다.
- <head> 태그 안에는 문서의 메타데이터가 위치합니다. 여기서는 <title> 태그를 사용하여 문서의 제목을 "나의 첫 HTML 문서"로 설정하였습니다. 이 제목은 브라우저의 탭이나 즐겨찾기에 표시됩니다.
- <body> 태그 안에는 문서의 실제 내용이 위치합니다.
- <h1> 태그는 가장 상위 레벨의 제목인 "환영합니다!"를 나타냅니다.
- <p> 태그는 단락을 나타내며, 총 세 개의 단락이 있습니다.
- 첫 번째 단락: "이것은 HTML 문서의 기본 구조를 보여주는 예시입니다."
- 두 번째 단락: "다음은 이 문서에 사용된 주요 태그들입니다:"
- 세 번째 단락: "이제 여러분도 이 기본 구조를 활용하여 자신만의 HTML 문서를 만들어 보세요!"
- 문서는 </html> 태그로 종료됩니다.
위에서 알려드린 기본 구조 태그와 함께 다른 태그들을 활용하면 더 풍부한 내용의 HTML 문서를 작성할 수 있습니다. 보다 가독성 높은 HTML 문서를 완성하고 싶다면 아래 글도 참고해 보세요.
CREDIT
글 | ChatGPT, Claude, 박영경 팀스파르타 에디터
