2.1 문자 실체 참조와 수치 문자 참조 적용
< > ©등 태그와 헷갈릴 수 있는 요소들.
문자실제참조(<)와 수치문자참조(<)이 있는데 둘 중에 아무거나 써도 html5는 상관 없다.
다만 xhtml의 경우 다르다.
2.2 구문을 강조하거나 하이라이팅 지정하기
strong
em
mark
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<h1>strong, em, mark</h1>
<!-- emphasis, strong importance, mark -->
<!--주관걱인 내용은 em-->
<p>나는 <em>예쁘다.</em></p>
<!--객관적인 내용은 strong-->
<p>저기 있는 웅덩이는 <strong>깊어서 들어가지 마세요.</strong></p>
<!--어떤 내용 A가 있고 그에 관련된 내용이 뒤이어 나올때 A를 mark 한다.-->
<p>
<mark>12월은 차량 사고 확률이 증가한다.</mark> 눈이 많이 오기 때문이다
</p>
</body>
</html>
2.3 단의어 정의와 약어, 작품의 제목 표현
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>dfn, abbr, cite</title>
</head>
<body>
<!--- dtn: 정의 -->
<p><dfn title="아이를 낳지 않겠다는 부부를 의미">딩크족</dfn></p>
<!--- abbr: 축약어에 대해 풀어쓴 의미를 알려줄 때 씀 -->
<p>월드와이드 웹 컨소시엄(<abbr title="World Wide Web Consortium">W3C</abbr>)</p>
<!-- cite: 작품 제목-->
<p><cite>가을동화</cite>아이유</p>
<!-- small: 앞쪽에 있는 내용에 대한 부가적인 설명-->
<p>값: 50,000원 <small>(부가세 별도)</small></p>
</body>
</html>
2.4 루비 주석과 시간의 표현
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<h1><ruby>家和萬事成<rt>가화만사성</rt></ruby></h1>
<h1>
<ruby>
家<rt>가</rt>
和<rt>화</rt>
萬<rt>만</rt>
事<rt>사</rt>
成<rt>성</rt>
</ruby>
</h1>
<p><time datetime="2017-09-11">오늘</time>은 친구 생일이라서 일찍 들어가 봐야 합니다.</p>
<p>논문 발표일은 <time datetime="2017-09-11">2017년 9월 11일</time>입니다.</p>
<!-- 년월일 표현: 20017-09-11 -->
<!-- 년월일 및 시간 표현: 20017-09-11T09:20 -->
</body>
</html>A ruby annotation is a small extra text, attached to the main text to indicate the pronunciation or meaning of the corresponding characters. This kind of annotation is often used in Japanese publications.
설명 출처:https://www.w3schools.com/TagS/tag_ruby.asp
즉, 의미나 발음 등을 표현 할때 이렇게 쓴다.
2.5 제목, 문단, 연락처, 인용문
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>h1~h6, p, address, blockquote, hr, pre</title>
</head>
<body>
<!-- h: 제목 -->
<h1>heading</h1>
<h2>heading</h2>
<h3>heading</h3>
<h4>heading</h4>
<h5>heading</h5>
<h6>heading</h6>
<!-- hr: 가로 구분선 -->
<hr />
<!-- p: 문단 -->
<p>hello world</p>
<!-- address: 주소 -->
<address>서울 광역시 동구동 426</address>
<!-- blockquote: 인용문: 들여쓰기 됨-->
<!-- title만 들어서 내용의 의미 파악에 도움. 소리 다 들을 필요 없으니 도움 -->
<blockquote cite="햄릿" title="햄릿 제2장">
<p>죽느냐 사느냐 그것이 문제로다</p>
</blockquote>
<!-- pre: 그대로 나타내게 할때-->
<pre>
나는 줄바꿈을 할거야
나는 띄어쓰기를 할거야.
</pre>
</body>
</html>
목록 작성하기
ul 밑으로 li만 가능. h나 p 넣지 말것.
테이블 작성하기
a요소 알아보기
img요소 알아보기
이미지맵 만들기
아이프레임 알아보기
폼 컨트롤 알아보기
html5에서 추가 된 폼 콘트롤과 속성들