온라인 멘토와 함께하는 공부/HTML

HTML 문서의 기본 구조

열공노년 2023. 11. 24. 17:29
반응형

HTML 문서의 기본 구조

HTML 문서의 기본 구조는 웹 페이지의 뼈대를 형성하며, 주로 다음과 같은 요소들로 구성됩니다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>문서 제목</title>
</head>
<body>
    <h1>가장 큰 제목</h1>
    <p>문단입니다.</p>
    <!-- 여기에 더 많은 HTML 요소들이 들어갈 수 있습니다. -->
</body>
</html>
  1. <!DOCTYPE html>: 이 선언은 문서가 HTML5를 따르고 있음을 브라우저에 알리는 역할을 합니다. 이는 문서의 최상단에 위치해야 합니다.
  2. <html>: 이 태그는 HTML 문서의 루트 요소로, 문서의 전체 내용을 감싸는 컨테이너 역할을 합니다.
  3. <head>: 문서의 메타데이터를 포함하는 부분으로, 예를 들어 문서의 제목(<title>), 문자 인코딩(<meta charset="UTF-8">), 스타일시트 링크(<link>), 스크립트(<script>), 기타 메타 정보(<meta>) 등이 이 안에 포함됩니다.
  4. <title>: 브라우저 탭에 표시되는 문서의 제목을 정의합니다.
  5. <body>: 실제로 브라우저에 표시되는 문서의 내용을 담는 부분입니다. 텍스트, 이미지, 링크, 리스트, 테이블 등의 요소들이 여기에 위치합니다.
  6. 주석(<!-- 주석 내용 -->): 문서 내에서 코드에 대한 설명이나, 임시로 코드를 비활성화할 때 사용합니다. 브라우저에는 표시되지 않습니다.

위의 구조는 HTML 문서를 작성할 때의 기본적인 템플릿으로, 웹 페이지를 구성하는 기본적인 요소들을 포함하고 있습니다.

 

기본 문서의 표현

HTML 소스를 'index.html'로 저장하고 크롬에서 불러낸 모습은 아래와 같습니다.

소스와 브라우저에서 확인된 모습

정리

HTML 문서는 `<!DOCTYPE html>`, `<html>`, `<head>`, `<body>` 태그로 구성되며, 제목과 내용을 담습니다.

반응형