html은 일반적으로 크게 head와 body로 나뉜다. body에는 보통 문서의 모든 내용이 들어가는데, 그 중에 대표적으로 자주 쓰이는 요소(element) 일부를 알아보겠다.

텍스트 관련

h1, h2, h3, h4, h5, h6

<h1>헤더1</h1>
<h2>헤더2</h2>
<h3>헤더3</h3>
<h4>헤더4</h4>
<h5>헤더5</h5>
<h6>헤더6</h6>

헤더(header) 태그라고 불리며, 본문 내의 제목을 작성하는데 사용된다.

• 마크다운(markdown)의 #과 동일하다.

p

<p>
  문단의 내용
</p>

문단/단락(paragraph)을 나누는/감싸는데에 사용된다.

strong

<strong> 내용 </strong>

내용을 강조(굵게)한다.

• 마크다운(markdown)의 **(내용)**과 동일하다.

em

<em> 내용 </em>

내용을 강조(기울임)한다.

• 마크다운(markdown)의 *(내용)* 혹은 _(내용)_과 동일하다.

del

<del> 내용 </del>

내용을 삭제했다는 것을 취소선으로 나타냄.

• 마크다운(markdown)의 ~~(내용)~~과 동일하다.

b

<b> 내용 </b>

내용을 굵게 만든다.

i

<i> 내용 </i>

내용을 기울인다.

u

<u> 내용 </u>

내용에 밑줄을 긋는다.

s

<s> 내용 </s>

내용에 취소선을 긋는다.

sub

<sub> 내용 </sub>

내용을 아래 첨자로 만든다.

sup

<sup> 내용 </sup>

내용을 위 첨자로 만든다.

blockquote

<blockquote>
  내용
</blockquote>

내용을 인용할 때 사용한다. (줄바꿈 있음)

q

<q> 내용 </q>

내용을 인용할 때 사용한다. (줄바꿈 없음)

pre

<pre>
  내용
</pre>

코드를 쓸 때 사용한다. (줄바꿈 있음)

• 마크다운(markdown)의 ```(내용)```과 동일하다.

code

<code> 내용 </code>

짧은 코드를 쓸 때 사용한다. (줄바꿈 없음)

• 마크다운(markdown)의 `(내용)`과 동일하다.

hr

내
<hr>
용

구분선을 만들어 준다.

• 빈 요소이다.
• 마크다운(markdown)의 ---과 동일하다.

br

줄 <br> 바꿈

줄을 바꿔준다. (break)

• 빈 요소이다. 따라서 <br/>, <br /> 의 표기도 가능하다.

ol

<ol>
  <li>내용1</li>
  <li>내용2</li>
</ol>

정렬된 목록/리스트(ordered list)를 나타낸다.

type

<ol type="i">
  <li>내용1</li>
  <li>내용2</li>
</ol>

1(기본값), a, A, i, I를 넣어 개별 요소 앞에 나타나는 유형을 바꿀 수 있다.

ul

<ul>
  <li>내용1</li>
  <li>내용2</li>
</ul>

정렬되지 않은 목록/리스트(unordered list)를 나타낸다.

li

<li> 내용 </li>

ol, ul, menu 요소 안에서 하나의 목록/리스트(list) 아이템을 나타낸다.

영역 관련

div

<div>
  분할
</div>

일반적으로 스타일을 적용하기 위한 영역을 분할(division)하기 위해 사용된다. 속에 여러 태그를 품을 수 있다. 속성 없이는 별다른 효과는 없다.

• 태그가 끝날 때 줄바꿈이 일어난다.

span

<span>영역</span> 지정

일반적으로 스타일을 적용하기 위해 텍스트를 감싸 영역을 지정할 때 사용된다. 속성 없이는 별다른 효과는 없다.

• 태그가 끝날 때 줄바꿈이 일어나지 않는다.

표 관련

table

<table>
  <tr>
    <th>제목</th>
    <th>내용</th>
  </tr>
  <tr>
    <td>title</td>
    <td>content</td>
  </tr>
</table>

표를 나타내는 태그. 표 내부 요소 전체를 감싸준다.

thead

<thead>
  <tr>
    <th>제목</th>
    <th>내용</th>
  </tr>
</thead>

표의 머리글을 나타내는 태그.

• table 하위, tr 상위에 쓴다.

tbody

<tbody>
  <tr>
    <td>제목</td>
    <td>내용</td>
  </tr>
</tbody>

표의 내용을 나타내는 태그.

• table 하위, tr 상위에 쓴다.

tfoot

<tfoot>
  <tr>
    <th>제목</th>
    <td>내용</td>
  </tr>
</tfoot>

표의 바닥글을 나타내는 태그.

• table 하위, tr 상위에 쓴다.

tr

<tr>
  <td>제목</td>
  <td>내용</td>
</tr>

표의 열(table row)을 나타내는 태그. 한 열의 내부 요소를 감싸준다.

th

<th>내용</th>

표의 헤더 칸(table header cell)을 나태내는 태그.

• tr 하위에 쓴다.

td

<td>내용</td>

표의 한 칸(table data cell)을 나태내는 태그.

• tr 하위에 쓴다.

미디어 관련

a

주로 문서에서 이동할 하이퍼링크를 만드는 데에 사용된다.

href

<a herf="하이퍼링크">하이퍼텍스트</a>

하이퍼텍스트 참조(hypertext reference)에 사용되는 속성. 흔히 말하는 링크(하이퍼링크)를 다는 데에 사용된다. 안에 들어가 있는 하이퍼텍스트를 누르면 링크로 이동한다.
상대 경로와 URI Fragment도 가능하다.

target

<a herf="하이퍼링크" target="키워드">하이퍼텍스트</a>

연결될 하이퍼링크가 어디서 열릴지를 결정한다.

_self : 현재 창에서 열린다. 기본값(default)
_blank : 새 탭(내지는 새 창)에서 열린다.
_parent : 부모에 표시한다. 부모가 없다면 _self와 동일
_top : 최상단 부모(조상)에 표시한다. 부모가 없다면 _self와 동일
[자체키워드] : 아무 단어나 집어넣을 수도 있다. 기본적으로는 _blank처럼 작용하고 같은 [자체키워드] 의 창이 열려 있을 경우 그 창에 열린다.

img

문서에 이미지를 첨부할 때 사용된다.

• 빈 요소이다.

<img src="이미지 링크" alt="대체 텍스트" width="숫자" height="숫자">

src

이미지의 링크 (웹페이지, 상대 경로 모두 가능) 를 적는다.

• 필수적인 속성(attribute)이다.

alt

대체 텍스트를 적는다.

width

이미지의 너비를 적는다. 숫자px만큼의 너비다.

• css로 다시 변경할 수 있다.

height

이미지의 높이를 적는다. 숫자px만큼의 높이다.

• css로 다시 변경할 수 있다.

video

문서에 영상을 첨부할 때 사용된다.

<video src="영상 링크" autoplay muted controls width="숫자" height="숫자">

src

영상의 링크 (웹페이지, 상대 경로 모두 가능) 를 적는다.

autoplay

자동재생 여부를 결정한다.

• boolean 값이다.
• Chrome(크롬) 브라우저의 경우 autoplay만 사용하면 자동재생이 먹히지 않는다. 사용하려면 muted와 같이 사용해야 한다.

muted

초기 설정의 무음 여부를 결정한다.

• boolean 값이다.

controls

영상 하단의 컨트롤바 여부를 결정한다.

• boolean 값이다.

width

영상의 너비를 적는다. 숫자px만큼의 너비다.

• css로 다시 변경할 수 있다.

height

영상의 높이를 적는다. 숫자px만큼의 높이다.

• css로 다시 변경할 수 있다.

audio

문서에 음성을 첨부할 때 사용된다. 기본적으로 눈에 보이는 요소는 없다.

<audio src="음성 링크" autoplay controls></audio>

src

영상의 링크 (웹페이지, 상대 경로 모두 가능) 를 적는다.

autoplay

자동재생 여부를 결정한다.

• boolean 값이다.
• Chrome(크롬) 브라우저의 경우 먹히지 않는다.

controls

영상 하단의 컨트롤바 여부를 결정한다.

• boolean 값이다.

iframe

HTML 문서 안에 다른 HTML 문서를 불러올 때 사용하는 태그.

<iframe src="HTML 파일 링크" width="숫자" height="숫자"></iframe>

src

링크 (웹페이지, 상대 경로 모두 가능) 를 적는다.

width

너비를 적는다. 숫자px만큼의 너비다.

• css로 다시 변경할 수 있다.

height

높이를 적는다. 숫자px만큼의 높이다.

• css로 다시 변경할 수 있다.

폼 관련

form

<form>
  폼의 내용
</form>

폼(form)의 영역을 설정한다. label, input, textarea, select, button 등의 요소가 하위 요소로 들어간다.

label

<label>보여질 라벨 이름</label>

일반적으로 input에 설명을 적는 용도로 사용된다. (select도 가능)

• label 요소 안에 input을 넣으면 그 label과 input은 연결된다.

for

<label for="input id 이름">보여질 라벨 이름</label>

input의 id명을 적으면 그 id를 가진 input과 연결된다.

input

값을 입력받을 수 있는 칸을 만든다.

• 빈 요소이다.

name

<input name="값의 이름">

입력 값을 지칭하는 명칭을 정한다. 되도록 필수적으로 넣어주는 것이 좋다.

type

<input type="유형">

• text : 한 줄 문자열 입력. 기본값(default)
• email : 한 줄 이메일 입력. text와는 다르다.
• password : 한 줄 문자열. 입력되는 값을 가린다.
• checkbox : 체크할 경우 value 값이 넘어가며 value 값이 없을 경우엔 on이 넘어간다. 체크하지 않을 시 아무것도 안 넘어간다. (none 값이 넘어가는 게 아님. 넘어간다는 동작 자체가 없음.)
• radio : 같은 name을 가진 radio 중에서 하나만 선택할 수 있다. 선택할 경우 value 값이 넘어가며 value 값이 없을 경우엔 on이 넘어간다. 선택하지 않을 시 아무것도 안 넘어간다. (none 값이 넘어가는 게 아님. 넘어간다는 동작 자체가 없음.)
• number : 숫자를 입력하고 화살표 버튼으로 값을 조정할 수 있다.
• range : 슬라이드 바(슬라이더)로 범위를 조정한다.
• date : 날짜 입력
• file : 파일 업로드

placeholder

<input placeholder="문구">

값이 비어 있을 경우 떠있는 문구를 정한다.

• type이 text, search, url, tel, email, password, number인 경우에만 사용 가능하다.

value

<input value="값">

값. 초기값을 설정한다.

• type이 image인 경우를 제외하고는 모두 사용 가능하다.
• html에서 속성값을 작성할 경우에는 단순히 초기값 정도로 작용하지만, js나 react 등으로 연동 시 input 내의 값 그 자체의 값이다.

autocomplete

<input autocomplete="값">

자동완성을 지원하게 만들어준다. 자세한 값은 여기 참조.

• type이 checkbox, radio 혹은 버튼인 경우를 제외하고 모두 사용 가능하다.

required

<input required>

필수적으로 입력해야 하는 값인지 아닌지를 판별한다.

• boolean 값이다.
• type이 hidden, range, color 혹은 버튼인 경우를 제외하고 사용 가능하다.

min, max, step

<input min="수" max="수" step="수">

min : 최솟값
max : 최댓값
step : 화살표 한 번 누를 때 얼마나 움직이는지

• type이 date, month, week, time, datetime-local, number, range인 경우에만 사용 가능하다.

minlength, maxlength

<input minlength="정수" maxlength="정수">

minlength : 최소 길이
maxlength : 최대 길이

• type이 text, search, url, tel, email, password인 경우에만 사용 가능하다.

multiple

<input type="email/file" multiple>

한 개 이상 받을 수 있는지 아닌지를 결정한다.

• boolean 값이다.
• type이 email, file인 경우에만 사용 가능하다.

accept

<input type="file" accept=".[확장자1], .[확장자2] ...">

받을 파일 확장자를 지정할 수 있다.

• type이 file인 경우에만 사용 가능하다.

files

받은 파일을 유사 배열(FileList) 형태로 가지고 있다.

• type이 file인 경우에만 사용 가능하다.

disabled

<input disabled>

동작 및 상호 작용을 비활성화한다. Boolean 속성이라 작성한 순간 true가 된다. (심지어 속성값이 없을지라도)

textarea

여러 줄의 텍스트를 입력 받을 수 있는 칸을 만든다.

<textarea name="이름" placeholder="내용"></textarea>

name, placeholder, autocomplete, required, disabled

input과 거의 동일. name, placeholder, autocomplete, required, disabled

select

<select id="genre" name="genre">
  <option>내용1</option>
  <option>내용2</option>
</select>

여러 선택지 중에 하나를 선택할 수 있는 드롭다운(dropdown) 리스트를 만든다.
option의 상위 요소.

name, multiple, autocomplete, required, disabled

input과 거의 동일. name, multiple, autocomplete, required, disabled

option

<option value="값">내용</option>

선택지들을 감싼다.

value

제출(submit)할 때 보낼 값. 없다면 텍스트 내용에서 가져온다.

disabled

동작 및 상호 작용을 비활성화한다. Boolean 속성이라 작성한 순간 true가 된다. (심지어 속성값이 없을지라도)

button

<button type="유형">버튼 이름</button>
<button type="유형" disabled>버튼 이름</button>

버튼을 만든다.
form 안에 있을 경우 눌렀을 때 기본적으로 form 안의 input 값을 전송한다. 이유는 후술.

type

버튼의 동작을 결정한다.

submit : form 안의 값들을 전송한다. 기본값(default)
reset : form 안의 값들을 초기화한다.
button : 기본적으로 아무 동작도 없다.

disabled

동작 및 상호 작용을 비활성화한다. Boolean 속성이라 작성한 순간 true가 된다. (심지어 속성값이 없을지라도)

기타

script

<script>
  js 코드
</script>

html 파일에 사용 가능한 코드를 넣기 위해 사용한다. 주로 Javascript 코드를 넣기 위해 사용한다.
내부에 코드를 작성하면 작동한다.

src

<script src="[파일 링크]"></script>

파일의 링크를 적는다. 해당 속성을 사용할 경우 내부에 적지 않아도 된다.

type

<script type="module" src="[파일 링크]"></script>

주로 js 파일을 모듈로 사용하기 위하여 쓴다. 이 때의 속성값은 module.