<!--ex)--><p>Hello, World!!</p><!--<p>는 Opening Tag(여는 태그)--><!--</p>는 Closing Tag(닫는 태그)--><!--태그 안의 "Hello, World!!" 부분은 content(내용)--><!--여는 태그부터 닫는 태그까지 모두를 element(요소)-->
하나의 요소는 여는 태그와 닫는 태그 그리고 그 안의 내용으로 구성됨
닫는 태그는 태그 이름 앞에 슬래시('/')가 포함되며 닫는 태그가 없는 태그도 존재
2-2. HTML Attributes(속성)
<!--ex)--><pclass="editor-note">Hello, World!!!</p><!--class="editor-note" 부분이 속성-->
규칙
요소 이름 다음 바로 오는 속성은 요소 이름과 속성 사이에 공백이 있어야 함
하나 이상의 속성들이 있는 경우, 속성 사이에 공백으로 구분
속성 값은 열고 닫는 따옴표("")로 감싸야 함
목적
나타내고 싶지 않지만 추가적 기능, 내용을 담고 싶을 때 사용
CSS가 해당 요소를 선택하기 위한 값으로 활용
2-3. HTML 문서의 구조
<!--기본적인 HTML 문서 구조--><!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"/><title>My page</title></head><body><p>This is my page</p></body></html>
<!DOCTYPE html> : 해당 문서가 html의 문서라는 것을 표시
<html></html> : 전체 페이지의 콘텐츠를 포함
<title></title> : 브라우저 탭 및 즐겨찾기 시, 표시되는 제목으로 사용
<head></head> : HTML 문서에 관련된 설명, 설정 등(사용자에게는 보이지 않음)
<body></body> : 페이지에 표시되는 모든 컨텐츠
3. Text 구조
3-1. HTML Text 구조
HTML의 주요 목적 중 하나는 텍스트 구조와 의미를 제공하는 것
<h1>Main Heading</h1>
예를 들어 <h1> 태그의 경우, 단순히 텍스트를 크게 만든다의 의미를 넘어 해당 문서의 최상위 제목이라는 의미를 부여
3-2. 대표적인 HTML Text 구조
Heading & Paragraphs : h1~6, p
List : ol, ul, li
Unordered
Ordered
Emphasis & Important : em, strong
<!--HTML Text 구조 예시 (각자 위계와 역할을 부여)--><body><h1>Main Heading</h1><h2>Sub Heading</h2><p>This is my page</p><p>This is <em>emphasis</em></p><p>Hi <strong>my name</strong> is Jeonggon</p><ol><li>html</li><li>css</li><li>javascript</li></ol></body>
4. 참고
HTML 요소 이름은 대소문자를 구분하지 않지만 소문자 사용을 권장
HTML 속성의 따옴표는 작은 따옴표와 큰 따옴표를 구분하지 않지만, 큰 따옴표 사용을 권장
