HTML 문서의 기본 구조와 <meta>, <br> 태그 표현 방식
HTML 문서는 아래와 같은 기본 구조를 가집니다:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<header>
<h1>메인페이지</h1>
<ul>
<li><a href="index.html">home</a></li>
<li><a href="notice/list.html">공지사항목록</a></li>
<li><a href="member/signup-agree.html">회원가입</a></li>
<li><a href="member/login.html">로그인</a></li>
</ul>
</header>
</body>
</html>- <!DOCTYPE html>: 이 문서가 HTML5 문법을 따른다는 선언입니다. 브라우저가 HTML5 모드로 렌더링하게 만들어줍니다.
- <meta charset="UTF-8">: HTML 문서의 문자 인코딩을 UTF-8로 설정합니다. 한글 깨짐 방지를 위해 꼭 필요합니다.
- <br> 태그는 줄바꿈 태그인데, HTML5에서는 <br>처럼 끝태그 없이 사용해도 되며, XHTML에서는 <br />처럼 닫아줘야 했습니다.
👉 차이점 요약:
- <br>: HTML5 스타일 (요즘 대부분 사용)
- <br />: XHTML 스타일
HTML, XHTML, Polyglot의 차이와 하이퍼링크 작성 방식
HTML 문서는 다음처럼 여러 형태로 존재해 왔습니다.
(1) 일반 HTML5 문서
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML Template</title>
</head>- <br> 가능
(2) Polyglot (HTML과 XHTML을 모두 만족하는 문서)
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8" />
<title>Polyglot Template</title>
</head>- <br> 또는 <br /> 둘 다 가능 (호환 목적)
(3) XHTML 문서
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>XHTML Template</title>
</head>- 반드시 <br />처럼 셀프 클로징 태그를 써야 함 (XML 문법을 따르기 때문)
General Markup Language의 필요성과 발전
문제 상황
과거에는 데이터를 다음처럼 그냥 줄로 써서 저장했습니다.
1 안녕하세요 2019-03-29 1어떤 값이 '번호'인지, '날짜'인지, '제목'인지 알 수 없습니다. 그래서 정보의 의미(구조)를 설명할 수 있는 마크업 언어가 필요했습니다.
발전 과정
이렇게 사람이 이해하기 어렵던 정보를 구조화하여 표현하면 다음과 같습니다:
{공지사항}
[행]
번호 = 1
제목 = "안녕하세요 HTML"
작성일 = "2019-03-29"
조회수 = 1➡ 이런 구조를 기계가 이해하도록 만든 것이 마크업 언어입니다.
마크업 언어 형태
<공지사항>
<행>
<번호>1</번호>
<제목>안녕하세요 HTML</제목>
<작성일>2019-03-29</작성일>
<조회수>1</조회수>
</행>
</공지사항>이렇게 각 항목의 의미를 태그로 감싸 표현함으로써 기계와 사람이 모두 이해할 수 있는 표준 구조화 문서가 된 것입니다.
SGML과 HTML 관계
SGML (Standard Generalized Markup Language)
- 1960년대 IBM에서 범용 마크업 언어로 개발
- 다양한 마크업 언어를 정의할 수 있는 메타 언어
HTML의 위치
- HTML은 SGML의 하위 응용 언어(subset)입니다.
- SGML로부터 정의된 HTML은 .dtd 문서 형식을 통해 문서의 형식을 정의합니다.
예: html.dtd 파일
<!ELEMENT HTML (HEAD | BODY)>
<!ELEMENT HEAD (META* | TITLE?)>
<!ELEMENT BODY (#PCDATA | DIV ...)*>이런 정의를 기반으로 웹 문서는 브라우저에 의해 해석됩니다.
SGML 기반 정의의 문제점
- .dtd로 문서 구조를 정의해야 하기 때문에 복잡함
- 현대 웹은 빠르게 변화하고 다양한 디바이스와 환경에 대응해야 하므로, 유연하고 단순한 문서 구조가 필요
- HTML5에서는 더 이상 .dtd 같은 선언을 하지 않고, 그냥 <!DOCTYPE html>만 쓰면 됨
'HTML & CSS' 카테고리의 다른 글
| HTML 역사와 HTML5탄생배경 (0) | 2025.07.12 |
|---|---|
| 시멘틱 웹과 XML 그리고 XHTML과의 관계 (0) | 2025.07.12 |
| 파일 구조와 경로 (0) | 2025.07.12 |
| DOCTYPE과 W3C (0) | 2025.07.11 |
| 인터넷과 웹의 차이 (0) | 2025.07.11 |