새 HTML 문서를 구성하는 방법

HTML(HyperText Markup Language)은 웹 콘텐츠의 중추로서 웹사이트에 표시되는 정보에 구조를 제공합니다. 모든 HTML 문서는 필수 요소를 포함하는 기본 구조를 따릅니다. 주요 구성요소를 자세히 살펴보겠습니다.

1. '<!DOCTYPE html>'

이 선언은 사용되는 HTML의 문서 유형과 버전을 정의합니다. 최신 웹페이지에서는 '<!DOCTYPE html>'를 사용하는 것이 일반적입니다.

2. '<html>'

루트 요소는 전체 HTML 문서를 캡슐화합니다.

3. '<head>'

헤드 섹션에는 제목, 문자 집합, 연결된 스타일시트 등 문서에 대한 메타 정보가 포함되어 있습니다.

4. '<title>'

이 요소는 브라우저 탭이나 창에 나타나는 HTML 문서의 제목을 설정합니다.

5. '<body>'

body 요소에는 텍스트, 이미지, 링크 등을 포함한 HTML 문서의 내용이 포함됩니다.

HTML 문서 예

이제 모든 것을 예제로 정리해보자:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My HTML Document</title>
</head>
<body>
    <h1>Welcome to My Website</h1>
    <p>This is a simple example of an HTML document.</p>
    <img src="example.jpg" alt="An example image">
    <a href="https://www.example.com">Visit Example.com</a>
</body>
</html>

이 예에서는 "My HTML Document"를 원하는 제목으로 바꾸고 이에 따라 '<body>' 내의 내용을 조정합니다. 이 기본 구조를 이해하면 잘 조직되고 의미상 의미 있는 웹 페이지를 만들기 위한 기반이 마련됩니다.

보너스: 종료 태그

HTML 페이지를 작성할 때 페이지 흐름 및 렌더링 문제를 방지하려면 모든 태그가 제대로 닫혀 있는지 확인하는 것이 중요합니다. 이 작업에 도움이 되도록 HTML 닫히지 않은 태그 검사기 도구를 확인하여 HTML 코드의 구조적 문제를 찾아보세요.

html 문서 헤드 본문 메타 제목 div p img a h1 lang charset 뷰포트