728x90
HTML의 기본 구조와 주요 개념들을 다음과 같이 정리할 수 있습니다:
HTML의 기본 구조
<!DOCTYPE html>
<!-- HTML의 주석 -->
<!-- HTML의 시작 태그 <html> -->
<html>
<!-- 웹 페이지의 정보를 가지고 있는 <head> 태그 -->
<head>
<meta charset="UTF-8">
<!-- 브라우저 윈도우의 제목으로 표시되는 <title> 태그 -->
<title>웹 페이지 제목</title>
</head>
<!-- 브라우저 안에 표시되는 부분 <body> 태그 -->
<body>
안녕하세요
</body>
</html>
- <!DOCTYPE> 선언
- HTML 문서의 버전을 정의하며, 브라우저가 HTML을 해석하는 방식을 결정합니다.
- HTML5에서는 <!DOCTYPE html>로 선언합니다.
- 주석
- HTML 코드 내에서 설명을 추가할 수 있으며, 브라우저는 이를 무시합니다.
- 주석은 <!-- 주석 내용 --> 형태로 작성됩니다.
- <head>와 <body>
- <head>: 문서의 메타데이터를 포함합니다. 화면에 표시되지 않으며, 문서 제목, 문자 집합, CSS, 자바스크립트 등을 포함할 수 있습니다.
- <body>: 문서의 실제 내용을 포함하며, 화면에 표시됩니다.
- 요소 (Element)
- HTML 요소는 시작 태그, 내용, 끝 태그로 구성됩니다.
- 예: <title>웹 페이지 제목</title>
HTML 작성 시 주의사항
- 태그 이름의 대소문자
- 태그 이름은 대소문자를 구분하지 않습니다. 예: <TITLE>과 <title>는 동일합니다.
- W3C는 소문자 사용을 권장하며, XHTML에서는 소문자를 반드시 사용해야 합니다.
- 중첩 요소
- 하나의 요소 안에 다른 요소들이 포함될 수 있습니다.
- 예: <html> 태그 안에 <head>와 <body> 태그가 포함될 수 있습니다.
- 공백 처리
- 시작 태그와 종료 태그 사이의 연속된 공백은 하나의 공백으로 취급됩니다.
- 예: <p> 안녕하세요 반가워요 </p>는 브라우저에서 공백이 하나로 처리됩니다.
속성
- 속성의 형태
- 요소에 대한 추가 정보를 제공하며, 시작 태그에 이름="값" 형태로 기술됩니다.
- 예: <a href="www.naver.com">네이버</a>
- 속성의 사용
- 속성 값은 큰따옴표 또는 작은따옴표로 묶는 것이 권고됩니다.
- 공백이 포함된 속성 값은 인용 부호로 묶어야 합니다.
- 공통 속성
- class: 요소의 클래스 이름
- id: 요소의 아이디
- style: 요소에 대한 인라인 CSS 스타일
- title: 요소에 대한 추가 정보로, 툴팁으로 표시됨
참고사항
- 공백 요소 (Empty Element)
- 내용이 없는 요소를 의미하며, 종료 태그가 없습니다.
- 예: <br> (줄바꿈), <img> (이미지)
- 대소문자 구분
- 태그는 대소문자를 구분하지 않지만, W3C는 소문자를 권장합니다.
- XHTML에서는 반드시 소문자를 사용해야 합니다.
728x90
'프론트엔드 > HTML' 카테고리의 다른 글
| 상대 경로, 절대 경로 (0) | 2024.07.17 |
|---|---|
| [HTML] head태그 안에 들어가는 태그 알아보기 (0) | 2024.07.17 |
| [HTML] CSS, JS 연결하기 (0) | 2024.07.17 |
| [HTML] HTML, HEAD, BODY 태그 (0) | 2024.07.16 |
| [HTML] <!DOCTYPE html> (0) | 2024.07.16 |
