반응형
HTML 문서의 기본 구조
HTML 문서는 크게 세 부분으로 나눌 수 있습니다.
- <!DOCTYPE html> 선언:
- 문서의 유형을 선언하는 부분입니다. HTML5 문서임을 나타냅니다.
- <html> 태그:
- HTML 문서의 시작과 끝을 알리는 가장 바깥쪽 태그입니다.
- <head> 태그:
- 문서에 대한 메타 정보를 담는 부분입니다. 제목, 스타일 시트, 스크립트 등이 여기에 포함됩니다.
- <title> 태그: 브라우저의 제목 표시줄에 나타나는 페이지 제목을 설정합니다.
- <meta> 태그: 문서에 대한 추가적인 정보를 제공합니다. (예: 인코딩, 설명, 키워드 등)
- <body> 태그:
- 실제로 웹 페이지에 보이는 내용을 담는 부분입니다. 텍스트, 이미지, 링크 등 모든 콘텐츠가 여기에 포함됩니다.
<!DOCTYPE html>
<html>
<head>
<title>HTML 문서 구조 예시</title>
<meta charset="UTF-8">
</head>
<body>
<h1>안녕하세요, HTML!</h1>
<p>이것은 HTML 문서의 예시입니다.</p>
<img src="image.jpg" alt="예쁜 고양이">
</body>
</html>
각 부분의 역할
- <!DOCTYPE html>: 브라우저에게 이 문서가 HTML5 문서임을 알려줍니다.
- <html>: HTML 문서의 시작과 끝을 나타내는 최상위 태그입니다.
- <head>: 문서에 대한 정보를 담고 있습니다. 사용자에게 직접 보이지는 않지만, 브라우저나 검색 엔진에서 사용됩니다.
- <title>: 브라우저의 제목 표시줄에 나타나는 제목을 설정합니다.
- <body>: 실제로 웹 페이지에 보이는 내용을 담는 부분입니다.
- <h1>: 가장 큰 제목을 나타내는 태그입니다. <h2>, <h3> 등 더 작은 제목을 표현하는 태그도 있습니다.
- <p>: 단락을 나타내는 태그입니다.
- <img>: 이미지를 삽입하는 태그입니다. src 속성에 이미지 파일의 경로를 지정하고, alt 속성에는 이미지에 대한 설명을 입력합니다.
왜 HTML 문서의 구조를 알아야 할까요?
- 웹 페이지를 이해하고 수정할 수 있습니다: HTML 문서의 구조를 알면 웹 페이지의 어떤 부분을 수정해야 하는지 쉽게 파악할 수 있습니다.
- 더 효율적인 웹 페이지를 만들 수 있습니다: HTML 문서의 구조를 잘 활용하면 검색 엔진 최적화(SEO)에도 도움이 됩니다.
- 다른 웹 개발 언어와 연동할 수 있습니다: CSS와 JavaScript를 배우기 위한 기반이 됩니다.
반응형
'HTML&CSS' 카테고리의 다른 글
| #6 HTML 태그 (0) | 2024.08.25 |
|---|---|
| #5 HTML 시맨틱 태그 (0) | 2024.08.25 |
| #4 HTML5의 새로운 기능 (1) | 2024.08.25 |
| #3 HTML 요소와 속성 (0) | 2024.08.25 |
| #1 HTML 이란 (0) | 2024.08.24 |
| ul li 가운데 정렬 (0) | 2016.05.24 |
| audio 태그 다음곡 연속재생 (2) | 2016.05.11 |
| HTML form테그 post 방식 한글깨짐 방지 (0) | 2016.04.12 |