태그 에러가 있어도 브라우저는 똑똑하기 때문에 브라우저는 정상 출력됨
validator.w3.org 에서 태그의 유효성 확인할 수 있다.
큰 그림을 먼저 본다.
웹사이트는 커다란 박스안에 작은 박스들로 구성되어 있다.
웹사이트를 바라볼 때 작은 단위로 바라볼 수 있어야 한다.
BOX
header, nav, main, aside, footer ,div, span, form 등
섹션으로 나눌 수 있는 것
ITEM
a, button, input, label, img 등
사용자에게 보여지는 태그들
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<!-- Box vs Item -->
<header></header>
<footer></footer>
<section></section>
<div></div>
<span></span>
<h1>H1</h1>
<button></button>
<!-- a -->
<a href="https://google.com" target=_blank>Click</a>
<!-- Block vs Inline -->
<p>This is a sentence. <b>That</b> is..</p>
<p>This is a sentence. <span>That</span> is..</p>
<p>This is a sentence. <div>That</div> is..</p>
<!-- ol, ul, li -->
<ol type='I' reversed start="20">
<li>1</li>
<li>2</li>
<li>3</li>
</ol>
<ul>
<li>Hello</li>
<li>HTML</li>
<li>CSS</li>
</ul>
<!-- input -->
<label for="input_name">Name: </label>
<input id="input_name" type="password">
</body>
</html>