김데이의 회사생활

[HTML] <HTML>, <HEAD>, <BODY> 기본 구조와 관련 태그 사용하기 본문

웹 퍼블리셔/HTML

[HTML] <HTML>, <HEAD>, <BODY> 기본 구조와 관련 태그 사용하기

theday365 2025. 4. 3. 15:55
반응형

안녕하세요, 김데이 입니다!

HTML 문서의 구조를 올바르게 작성하려면 문서 구조 관련 태그와 기타 태그를 함께 사용해야 합니다. 

 

이 태그들은 HTML 문서의 기본 골격을 형성하며, 브라우저가 올바르게 해석하고 렌더링 할 수 있도록 돕는 역할을 하게 됩니다. 아래에서 각각의 태그가 어떤 역할을 하는지, 그리고 어떻게 배치해야 하는지 상세히 알아보겠습니다.

 

1. 문서 구조 관련 태그 

HTML 문서는 기본적으로 트리 구조를 가지며, 3가지 기본 구조 태그를 가지고 있습니다.

 

1) <html> 태그 

 - 역할 : HTML 문서의 최 상위 루트 요소(root element)로, 모든 HTML 태그는 <html> 태그 내부에 포함 되어야 함.

 - 특징 : "lang" 속성을 사용하여 해당 문서의 언어를 지정 할 수 있다.

 

2) <head> 태그 

 - 역할 : 문서의 제목, 문자 인코딩 등 기본 정보와 메타 태그(SEO, 검색엔진최적화) 를 포함하며, CSS / JavaScript / 외부 리소스 등을 연결.

 - 함께 사용되는 주요 태그 : <meta>, <title>, <link>, <script>, <style> 

 

3) <body> 태그 

 - 역할 : 웹 페이지에서 사용자가 실제로 보게 되는 모든 컨텐츠(텍스트, 이미지, 입력창, 버튼 등등)를 포함하는 영역

 - 특징 : 대부분의 태그들이 <body> 태그 안에서 사용됨.

<html>
	<head>
    		<!-- 문서의 메타데이터, 외부 소스를 포함 -->
    	</head>
    	<body>
    		<!-- 실제 컨텐츠가 입력되는 부분 -->
    	</body>
</html>

 

 

 

2. 기본 태그와 함께 사용되는 주요 태그

앞서 잠깐 간략하게 설명 했지만, <head> <body> 각각 내부에 사용하는 태그가 다릅니다. 특히 <head> 태그 안에는 HTML 문서의 기능과 스타일의 확장을 위해서 꼭 사용해야 하는 태그들도 있습니다. 해당 태그들에 대해 자세히 알아보도록 하겠습니다. 

 

1) <meta> 태그
- 기능 : 웹 페이지의 메타 정보를 제공하여 검색 엔진 최적화(SEO) 및 반응형 디자인 설정을 표기함
- 주요 속성
   charset ="UTF-8"      : 문자 인코딩 설정
   name = "viewport"     : 반응형 디자인 설정 시 사용하는 속성 값
   name = "description" : 페이지 설명 (검색 엔진 최적화)

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 반응형 설정-->
<meta name="description" content="HTML 기본 구조 설명"> <!-- 검색 엔진 최적화-->

 

 

2) <link> 태그
- 기능 : 외부 리소스(CSS, 아이콘, 폰트 등)를 연결하는 태그
- 주요 속성
   rel="stylesheet"  : CSS 파일 연결 속성
   name = "icon"     : 파비콘 설정 속성

<link rel="stylesheet" href="styles.css"> <!-- 디자인 = style sheet 연결 -->
<link rel="icon" href="favicon.ico" type="image/x-icon"> <!-- 파비콘 연결 -->

 

 

3) <script> 태그
- 기능 : 외부 리소스중 Javascrip만 전용으로 연결하거나, Javascript 코드를 작성할 때 사용하는 태그
- 주요 속성
   src  : Javascript 파일 연결 속성

<!-- 내부 스크립트 사용 -->
<script>
    alert("페이지에 오신 것을 환영합니다!");
</script>

<!-- 외부 스크립트 사용 -->
<script src="script.js"></script>

 

 

4) <style> 태그
- 기능 : 외부 소스를 연결해서 사용하지 않고, 직접 CSS를 입력하여 적용할 때 쓰는 태그. 
            (되도록이면 <link>를 사용하여 외부 CSS를 연결 하는것이 좋은 방식)

<style>
    body {
        background-color: #f0f0f0;
        font-family: Arial, sans-serif;
    }
</style>

 

 

5) <title> 태그
- 기능 : HTML 문서의 제목을 정의하는 태그, 단순한 표시용이 아니라 검색 엔진 최적화에도 중요한 역할을 함. 

<title>HTML 기본 구조 - 웹 개발 입문</title>

 

 

전체 태그가 사용 된 예시를 보도록 하겠습니다!

<!DOCTYPE html>
<html lang="ko">
<head>
	<!-- 웹사이트를 설명하고, 검색 최적화가 이루어 지며, 외부 리소스를 연결 -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="HTML 문서 구조 설명">
    <title>HTML 문서 구조</title>
    <link rel="stylesheet" href="styles.css">
    <script src="script.js" defer></script>
</head>
<body>
    <!-- 실제 사용자가 보이는 영역 -->
</body>
</html>

 

 

 

기본 <html>, <head>, <body> 태그와 함께 기본으로 사용 되야 하는 <head> 내부 태그들에 대해 알아 보았습니다. 각각의 역할을 이해하면 더욱 효율적인 HTML 문서를 작성할 수 있어요 😉 다음에는 <body> 안에서 사용되는 태그들에 대해서 각 역할 별로 알아보도록 하겠습니다! 

반응형
저작자표시 비영리 변경금지

'웹 퍼블리셔 > HTML' 카테고리의 다른 글

[HTML] 블럭요소(Block) VS 인라인요소(Inline)  (24) 2025.02.18
[HTML 기초] 시맨틱 태그(Semantic Tags)의 종류와 역할  (18) 2025.02.05
'웹 퍼블리셔/HTML' Related Articles more