▣ 태그 이름은 대소문자를 구분하지 않음
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>소문자</title>
</head>
<body>
HTML5 문서는 소문자로 작성할 것을 권장합니다.
</body>
</html>
<!DOCTYPE html>
<HTML lang="en">
<HEAD>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<TITLE>대문자</TITLE>
</HEAD>
<BODY>
HTML5 문서는 소문자로 작성할 것을 권장합니다.
</BODY>
</HTML>
※ 대소문자를 구분하진 않지만 소문자로 작성하는게 좋음 ※
▣ 본문 내 연속된 공백이나 줄 바꿈은 하나의 공백으로 처리
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>공백처리 문제</title>
</head>
<body>
HTML5에서는
엔터, 탭, 스페이스바와 같은
키보드 값을 인식하지 않습니다.
<p>HTML5에서는 스페이스바 대신 특수문자를 사용해주세요.</p>
</body>
</html>※ 본문 내 연속된 공백이나 줄 바꿈을 여러번 하더라도 하나의 공백으로만 처리 되기 때문에
스페이스바 대신 특수문자 사용해야함 ※
▣ 태그의 포함 관계를 표현하기 위해 들여쓰기 적용
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>잘 정리된 문서</title>
</head>
<body>
<p>문서의 구조를 명확하게 작성해주세요.</p>
<p>들여쓰기를 해야 소스코드의 가독성이 높아집니다.</p>
<p>줄 바꿈도 해주세요.</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>정리가 안 된 문서</title>
</head>
<body>
<p>문서의 구조를 명확하게 작성해주세요.</p>
<p>들여쓰기를 해야 소스코드의 가독성이 높아집니다.</p><p>줄 바꿈도 해주세요.</p>
</body>
</html>
※ 들여쓰기와 줄바꿈을 잘해줘야 소스코드의 가독성이 높아짐 ※
▣ 종료 태그를 반드시 사용
· 일반적인 표기 형식 : <p>~</p>
· 단축 표기 형식 : <p/>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>종료 태그 작성</title>
</head>
<body>
HTML5에서는 종료 태그를 사용하도록 권장합니다.
<p></p>
태그 사이가 공백이라면 단축형 태그를 사용할 수 있습니다.
<p/>
p 태그는 한 줄을 띌 때 사용합니다.
</body>
</html>
※ 종료태그 반드시 꼭 사용 ※
▣ 주석은 '<! --' 로 시작해서 '-->' 로 끝냄
<!-- 작성자 : 별초롱언니 -->
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 문서의 메타정보를 작성하는 부분입니다. -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>주석</title>
</head>
<body>
<!-- 이 문서는 HTML5 웹 표준 문서입니다. -->
<p>주석은 소스코드를 설명하거나 불필요한 부분을 일시적으로 사용하지 않기 위해 씁니다.</p>
</body>
</html>
'웹프로그래밍 HTML > HTML 구조와 규칙' 카테고리의 다른 글
| 웹 문서의 레이아웃 (0) | 2025.03.04 |
|---|---|
| 태그의 분류 및 속성 (0) | 2025.03.04 |
| HTML5 문서의 구조 (1) | 2025.03.04 |