HTML5 기본 태그 모음

HTML5의 기본 태그

<h1> 1번 크기의 제목 태그

<h2> 2번 크기의 제목 태그

<h3> 3번 크기의 제목 태그

<h4> 4번 크기의 제목 태그

<h5> 5번 크기의 제목 태그

<h6> 6번 크기의 제목 태그

*1번이 가장 큰 크기

 

<b> 글자를 굵게 하는 태그

<i> 글자를 기울게 하는 태그

<del> 글자에 줄이 그어지는 태그(취소선)

<ins> 글자에 밑줄이 그어지는 태그

 

<p> 글들의 문단을 구분해주는 태그

<br> 글의 줄을 바꿔주는 태그 (엔터 같은)

<hr> 선을 그어주는 태그

 

<a> 어떠한 위치로 이동하는 태그(앵커 태그)

* 반드시 href라는 속성과 함께 사용해야 함

 

<ol> 리스트를 순서대로 나열해주는 태그

<ul> 리스트를 나열해주는 태그

<li> 리스트 안에 요소를 나타내 주는 태그

 

<table> 표를 의미하는 태그

*이 태그 안에서 표를 만들어 줄 수 있음

<tr> 가로 행 한 개를 의미하는 태그

* 태그가 세 번 나오면 표의 행이 3개라는 뜻

<td> 행다음에 열을 의미하는 태그

* <tr> 태그 안에 <td>가 두 개 나오면, 1행 2열을 의미함

 

<img> 이미지를 나타낼 때 사용하는 태그

* src 속성과 함께 사용한다

<img src=" ... "> 이미지의 경로를 알려주는 태그

<img alt=" ... "> 이미지가 나타나지 않을 때 대신할 텍스트를 지정해주는 태그

<img width=" ... "> 이미지의 가로 크기를 정하는 태그

<img height=" ... "> 이미지의 세로 크기를 정하는 태그

 

<form> 설문지 형식의 폼을 의미하는 태그

*이 태그 안에서 설문지 같은 입력 양식을 만들 수 있음

<input> 사용자에게 어떠한 양식을 받는 태그

*반드시 type이라는 속성을 함께 써야 함. 속성 값에 따라 양식이 달라짐.

<input type="radio"> 동그라미 버튼을 만드는 태그

<input type="checkbox"> 체크박스 버튼을 만드는 태그

<input type="file"> 파일 선택란을 만드는 태그

<input type="submit"> 제출 버튼을 만드는 태그

 

 

<위 내용은 한빛미디어 '모던 웹을 위한 HTML5+CSS3 바이블 3탄' 책 내용을 참고하고, 위키피디아와 지인에게 배운 지식을 바탕으로 재구성하였습니다>

---

CSS를 공부하면서 다시 HTML5 공부를 복습할 계획으로, HTML5 기본적인 태그 부분을 빠르게 훑어보듯이 공부했습니다. 그리고 제가 이해한, 저만의 언어로 다시 재해석해서 올려보았습니다. 입문자 입장에서 받아들일 수 있는 서술어로 표현하다 보니 분명 전문가가 보기에 비약된 부분이 있을 수 있습니다. 특히, <div> <a>와 같은 태그와 <id> <class> 같은 속성들은 완전하게 이해하기 어려웠습니다. 이는 CSS공부를 시작해야 이해할 수 있는 부분이라고 하더군요. 결국 HTML5의 태그를 어떻게 CSS로 꾸며주느냐가 핵심인 것 같습니다. 이제 CSS에 관련된 내용을 공부하면서 HTML5 이야기를 함께 정리하도록 하겠습니다.