728x90
HTML 문서의 기본 구조
HTML 문서는 <html> 태그로 시작하여 </html> 태그로 끝납니다.
- 시작 태그: <html>
- 종료 태그: </html>
이 태그는 HTML 문서의 전체 범위를 정의하며, 브라우저에 문서의 시작과 끝을 알려줍니다.
HTML 문서의 구성
- 문서의 전체 범위 (<html> 태그)
- <html> 태그: HTML 문서의 시작과 끝을 정의합니다. 문서 전체를 감싸는 태그입니다.
- <!DOCTYPE html>: HTML5 문서임을 선언합니다. 브라우저에 문서가 HTML5 표준을 따르도록 알려줍니다.
<!DOCTYPE html> <html> <head> <!-- 문서의 정보를 정의하는 부분 --> </head> <body> <!-- 문서의 내용을 정의하는 부분 --> </body> </html>
- 문서의 정보를 나타내는 <head> 태그
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>문서 제목</title> </head>
- <meta charset="UTF-8">: 문서의 문자 집합을 정의합니다. 보통 UTF-8을 사용하여 다양한 문자를 지원합니다.
- <meta name="viewport" content="width=device-width, initial-scale=1.0">: 모바일 장치에서의 표시를 조정합니다.
- <title>: 브라우저 탭에 표시될 문서의 제목을 정의합니다.
- <head> 태그는 문서의 메타데이터를 포함합니다. 이 부분은 웹 페이지에서 직접 보이지 않으며, 문서의 제목, 문자 집합, 스타일 시트, 자바스크립트 파일 등을 정의합니다.
<body> <header> <h1>웹 페이지 제목</h1> <nav> <ul> <li><a href="#">홈</a></li> <li><a href="#">소개</a></li> <li><a href="#">연락처</a></li> </ul> </nav> </header> <main> <p>안녕하세요! 이것은 본문입니다.</p> <img src="example.jpg" alt="예시 이미지"> </main> <footer> <p>© 2024 회사 이름</p> </footer> </body> - 문서의 내용을 나타내는 <body> 태그
- <header>: 웹 페이지의 헤더 부분을 정의합니다. 일반적으로 로고, 제목, 내비게이션 메뉴 등을 포함합니다.
- <nav>: 내비게이션 링크를 포함하는 영역입니다.
- <main>: 페이지의 주요 콘텐츠를 포함하는 부분입니다.
- <footer>: 페이지의 바닥글을 정의합니다. 보통 저작권 정보나 추가 링크를 포함합니다.
- <body> 태그는 웹 페이지에서 실제로 표시되는 내용(로고, 헤더, 푸터, 내비게이션, 버튼 등)을 포함합니다.
왜 HTML 태그가 필요한가요?
파일 확장자가 .html이라고 해도 브라우저는 문서의 구조를 정확하게 이해하고 해석하기 위해 HTML 태그를 필요로 합니다. HTML 태그는 브라우저가 문서의 구조와 내용을 해석할 수 있도록 명확하게 지시합니다.
- <!DOCTYPE html>: HTML5 문서로 해석되도록 브라우저에 지시합니다. 이 선언이 없으면 브라우저가 문서를 구버전 HTML로 해석할 수 있습니다.
- <html>, <head>, <body>: 각 태그는 문서의 특정 부분을 정의하며, 브라우저가 문서를 어떻게 표시해야 하는지를 결정합니다.
728x90
'프론트엔드 > HTML' 카테고리의 다른 글
| 상대 경로, 절대 경로 (0) | 2024.07.17 |
|---|---|
| [HTML] head태그 안에 들어가는 태그 알아보기 (0) | 2024.07.17 |
| [HTML] CSS, JS 연결하기 (0) | 2024.07.17 |
| [HTML] <!DOCTYPE html> (0) | 2024.07.16 |
| [HTML] HTML 기본 구조 (0) | 2024.07.16 |
