레이아웃 관련

header

// header 태그는 문서의 머리 부분을 의미합니다.
<header>
...
</header>

main

// main 태그는 문서 안에서 가장 중요한 영역을 의미합니다.
<main>
...
</main>

footer

// footer 태그는 문서의 바닥 영역을 의미합니다. 대개 회사의 주소나 copyright 관련된 내용이 들어갑니다.
<footer>
...
</footer>

nav

// nav 태그는 네비게이션을 의미합니다. GNB(Global Navigation Bar)가 이 안에 속합니다.
<nav>
	<ul>
		<li>메뉴 1</li>
	</ul>
</nav>

aside

// aside 태그는 main 영역의 측면에 붙는 보조 정보 영역을 의미합니다. 보통의 경우에는 광고 배너로 많이 쓰입니다.
<aside>
...
</aside>

section

// section 태그는 주제별로 묶인 집합을 의미합니다. 
// 동일한 내용으로만 구성되며, 다른 내용을 표현하려면 또 다른 section 태그를 사용해야 합니다.
<section>
	<h2>섹션의 주제</h2>
	<p>섹션의 내용</p>
</section>

목록 관련

ul

// ul 태그는 unordered list라 해서 순서가 없는 목록을 표현할 때 사용합니다. li 태그를 자식 요소로 가집니다.
<ul>
	<li></li>
</ul>

ol

// ol 태그는 ordered list라 해서 순서가 있는 목록을 표현할 때 사용합니다. li 태그를 자식 요소로 가집니다.
<ol>
	<li></li>
</ol>

폼 관련

form

// form 태그는 로그인, 회원 가입 등과 같은 양식을 구현할 때 사용합니다. 
// fielset 태그와 legend 태그를 자식 요소로 가집니다.
<form>
	<fieldset>
		<legend>양식의 제목</legend>
		...
	</fieldset>
</form>

label

/* 
	1) label 태그는 input이 연결해 사용합니다. input의 의미를 명확하게 나타냅니다. 
	2) label 태그의 사용법은 두 가지입니다. 
*/

// label 태그 사용법 1: wrap
<label>
	<input />
</label>

// label 태그 사용법 2: for
<label for="test">input 제목</label>
<input id="test" />

input

/* 
	1) input 태그는 type attribute의 value에 따라 여러 가지가 나뉩니다. 종류가 많으니 꼭 찾아보세요!
	2) placeholder attribute의 값으로는 안내 문구가 들어갑니다.
	3) required attribute는 꼭 필요한 내용일 경우에만 사용합니다.
*/
<input type="text" placeholder="아이디를 입력해주세요" required />
<input type="password" />
...

select

/* 
	1) select 태그는 option 태그를 자식으로 가집니다.
	2) select 태그도 label 태그와의 연결이 필요합니다.
	3) option 태그에서 select attribute는 미리 선택된 값을 나타냅니다.
*/
<label for="filter">필터의 제목</label>
<select id="filter" required>
	<option value="a" selected>세트 A</option>
	<option value="b">세트 B</option>
	<option value="c">세트 C</option>
</select>

button

// button 태그의 type은 셋이 존재합니다. 
// form 정보를 서버로 보내는 submit, form에 기입한 내용을 삭제하는 reset, 
// 그리고 일반적인 의미의 button이 있습니다.
<button type="submit">버튼 A</button>
<button type="reset">버튼 B</button>
<button type="button">버튼 C</button>

텍스트 관련

hn

// hn 태그에는 h1부터 h6까지 있습니다. 제목, 주제를 의미합니다.
<h1>제목 A</h1>
<h2>제목 B</h2>
<h3>제목 C</h3>
<h4>제목 D</h4>
<h5>제목 E</h5>
<h6>제목 F</h6>

p

// p 태그는 문단을 의미합니다.
<p>한 문단의 내용이 들어갑니다.</p>

a

/*
	1) a 태그는 하이퍼 링크를 위한 태그입니다.
	2) a 태그의 href attribute는 hypertext reference로, 즉 하이퍼 링크 주소를 의미합니다.
	3) a 태그의 target attribute의 값은 여럿이지만, 
    중요한 것은 새로운 윈도우나 탭에서 오픈하는 _blank, 현재 탭에서 오픈하는 _self만 알면 됩니다.
*/
<a href="url" target="_blank">링크</a>

이미지 관련

img

/*
	1) image 태그는 이미지를 표현하는 태그입니다.
	2) image 태그의 src attribute는 이미지 경로를 값으로 가집니다.
	3) image 태그의 alt attribute는 alternative text라고 해서 서버 문제로 이
   미지가 내려오지 않을 때 어떠한 이미지인지 알려줍니다. 
    또한 스크린 리더기 사용자에게 이미지를 설명하기 위해 반드시 필요한 값입니다.
*/
<img src="url" alt="value" />

의미 없는 태그

div & span

/*
	1) div 태그와 span 태그는 의미가 없는 태그입니다. 따라서 아무 때나 사용할 수 있습니다.
	2) div 태그는 block level element, span 태그는 inline level element입니다. 이것만 구분하시면 됩니다.
*/
<div>뷰포트 전체를 꽉 채웁니다.</div>
<span>텍스트 길이만큼 늘어납니다.</span>