I. HTML5 문서 작성
HTML5 문서는 무조건 <!DOCTYPE html>로 시작한다. 2행 이후의 문서 전체는 html 요소가 되고 그 안에 head 요소와 body 요소가 위치하게 된다.
head 요소의 content로는 문서의 메타데이터가 포함된다.
body 요소의 content로는 웹 브라우저가 렌더링 할 내용이 포함된다.
Example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello world</title>
</head>
<body>
<h1>Hello world</h1>
<p>HTML is the standard markup language for ...</p>
</body>
</html>
II. Element
element는 HTML 문서를 구성하는 기본 요소이다. element는 일반적으로 start tag, end tag, content로 구성된다.
<h1>this is a content</h1>
Void Element
content 없이 start tag 하나로만 구성된 element도 존재한다. 이 때 start tag를 void tag, self-closing tag 등의 이름으로 부르기도 한다. void element가 아닌 일반 태그를 normal tag라고 부르기도 한다.
<br>
대표적인 void elements
- br
- hr
- img
- input
- link
- meta
III. Attribute
attribute는 start tag 내부에서 element의 detail을 표현하는 요소이다. 일반적으로 attribute는 attribute name과 attribute value로 구성된다. attribute value는 쌍따옴표 “ ” 혹은 홑따옴표 ‘ ’ 로 감싸는 것이 권장된다.
<img src="hello.jpg" width="500" height="600">
Global attribute
Global attribute는 모든 HTML 요소에서 공통적으로 사용할 수 있는 attribute를 의미한다. HTML5에는 많은 global attribute가 존재한다. 그 중에서 자주 사용되는 global attribute는 다음과 같다.
- id
- class
- hidden
- lang
- style
- tabindex
- title
IV. Comment
HTML 문서에서는 <!--주석--> 과 같은 방식으로 주석을 달 수 있다.
References
[1] https://poiemaweb.com/html5-syntax [2] https://www.w3.org/TR/2011/WD-html5-20110405/syntax.html#elements [3] https://www.w3schools.com/html/html_elements.asp [4] https://www.w3schools.com/html/html_attributes.asp [5] https://www.w3schools.com/tags/ref_standardattributes.asp
Uploaded by N2T
'Frontend > HTML' 카테고리의 다른 글
| 06. HTML5 이미지, 오디오, 비디오 (0) | 2022.08.27 |
|---|---|
| 05. HTML5 List & Table (0) | 2022.08.26 |
| 04. HTML5 하이퍼링크 (0) | 2022.08.26 |
| 03. HTML5 텍스트 관련 태그 (0) | 2022.08.26 |
| 02. HTML5 기본 태그 (0) | 2022.08.26 |