form

section vs div

section : 구역의 주제가 명확할 때(section태그 안에는 heading태그를 사용해 줄 것)
div : 디자인적으로 나뉘어있고 의미 구분이 어려울 때
구역의 주제가 명확하면 section, 디자인적으로 나뉘어있고 도저히 의미 구분이 어려우면 div...

ul > li

li는 같은 레벨일때에만 사용하기!

<label>

단순히 input 태그를 설명하는 텍스트를 옆에 붙여 무엇을 입력해야 하는지 설명할 수 있겠지만, 시각 장애인들도 폼을 사용할 수 있도록 시멘틱한 요소를 사용
1. 텍스트의 설명과 폼 입력 모두를 포함하는 방식

<label>
	이름 :
	<input type="text" name="name">
</label>

2.폼 입력에서 분리하여 for 속성을 이용해 레이블을 지정하는 방식

<label for="myName">이름 : </label>
<input type="text" name="name" id="myName">

type은 올바른 데이터 입력을 요구하기위해, id는 label과 연결하기 위해, name은 서버전송할때 key값으로 주기위해

<fieldset>

<fieldset> 요소를 사용하면 그 자식 요소로 사용되는 폼 컨트롤들을 그룹화 할 수 있다. 특히 폼 내용이 방대하여 섹션별로 나눌 필요성이 있을 경우 유용하게 사용됨.

<legend>

<legend> 요소는 <fieldset> 태그 바로 뒤에 위치하며 폼 그룹의 목적을 나타내는 제목을 의미합니다. 반드시 <fieldset>의 첫번째 자식으로 사용해야한다. 무조건!

Input vs button 무엇을 써야할까?

<button> 요소는 <input> 요소보다 스타일을 적용하기 훨씬 수월하다. <input>은 닫는 태그가 없기 때문에 value 특성에 텍스트 값 밖에 지정할 수 없지만, <button>은 내부에 여러가지 자식 컨텐츠를 추가할 수 있고 여기 더해 ::after와 ::before 와 같은 가상 요소를 사용하는 것도 가능하다. 더 다채롭고 멋진 스타일을 적용해야 한다면 <button> 요소를 우선적으로 고려해 보는것이 좋다.

<small>

HTML <small> 요소는 덧붙이는 글이나, 저작권과 법률 표기 등의 작은 텍스트를 나타낸다. 기본 상태에서 <small>은 자신의 콘텐츠를 한 사이즈 작은 글꼴(small에서 x-small 등)로 표시하지만, 스타일을 적용한 후에도 글씨 크기가 작을 필요는 없다.