<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>HTML Structure</title>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
- 지금 작성하는 문서가 html5의 버전으로 작성 되었다고 웹 브라우저에 알리는 것
<html></html>
- html 코드로 작성된 문서임을 알리는, 즉 html의 시작과 끝을 알리는 태그
- 웹 브라우저는 <html> 태그를 보고, 뒤따르는 HTML 코드를 해석해서 웹에 표현한다.
<head></head>
- html의 head, 즉 html문서의 머리글을 나타내는 태그
- 문서 제목, 문자코드(인코딩)와 같이 해당 문서의 정보를 담고 있으며,
- '메타 데이터의 집합'으로 웹 브라우저에 직접적으로 나타나지 않는 정보다.
* 메타데이터 : 데이터에 대한 데이터
<body></body>
- html의 body, 즉 html문서의 몸통, 본문을 나타내는 태그
- 웹 브라우저 화면에 나타나는 정보로 실제 내용에 해당한다.
요소 (Element)
- HTML 요소는 시작 태그와 종료 태그 그리고 태그 사이에 위치한 내용으로 구성
태그는 컨텐츠(내용)를 감싸는 것으로 그 정보의 성격과 의미를 정의
<start tag> content </end tag>
- 요소(element)는 중첩(nested)될 수 있다.
요소의 중첩을 통해 하나의 문서를 구조화
여는 태그와 닫는 태그의 쌍을 잘 확인해야한다.
잘못 작성하여도 오류를 반환하는 것이 아니라,
그냥 레이아웃이 깨진 상태로 출력되기 때문에, 디버깅이 힘들어 질 수 있다.
- 내용이 없는 태그들
br, hr, img, input, link, meta
속성 (Attribute)
- HTML에게 추가적인 정보나 명령을 받을 수 있게 정보들을 전달해준다.
- 속성명, 속성값으로 이루어진다.
<a herf="https://google.com"></a>
herf : attribute name (속성명)
https://google.com : attribute value(속성값)
- 태그별로 사용할 수 있는 속성은 다르다.
- 태그와 상관없이 사용 가능한 속성(HTML Global Attribute)들도 있다.
- 요소는 속성을 가질 수 있으며, 경로나 크기와 같은 추가적인 정보를 제공
- 요소의 시작 태그에 작성하며 보통 이름과 하나의 쌍으로 존재(아닌 것도 있다.)
- 공백은 No!!! " ", 쌍따옴표 사용!!!
(* 필수적인 것은 아니지만, 암묵적 규칙)
* HTML Global Attribute
모든 HTML 요소가 공통으로 사용할 수 있는 속성(몇몇 요소에는 아무 효과가 없을 수 있다.)
id, class, hidden, lang, style, title 등
참고 : https://developer.mozilla.org/ko/docs/Web/HTML/Global_attributes
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello, HTML</title>
</head>
<body>
<!-- 이것은 주석입니다. -->
<h1>
My first HTML
</h1>
<p>
This is main contents.
</p>
<span>This is inline elements</span>
<a href="https://google.com">Go google!!</a>
</body>
</html>
'Web > html' 카테고리의 다른 글
HTML 실습 (0) | 2021.08.15 |
---|---|
HTML 문서 구조화 (0) | 2021.08.15 |
HTML 시맨틱 태그(Semantic Tag) (0) | 2021.08.15 |
HTML이란? (0) | 2021.08.15 |