<doctype>
웹문서의 가장 위에 doctype 선언이 온다. doctype은 웹문서의 형식을 알려주기 위해 사용된다.
html5에선 doctype을 간단히 <!DOCTYPE html> 한가지로 정의한다.
<html>
doctype 다음에 html 태그가 오는데, 다른 모든 태그는 이 태그의 자손이 된다.
<head>
링크, 스크립트, 스타일시트의 정의 및 메타 태그가 들어간다.
<body>
실제 콘텐츠가 배치되는 곳, html 문서에서 본문에 해당한다.
<div>
<div> 자체론 아무 의미가 없지만 웹 페이지의 블럭을 지정하는 용도로 자주 쓰인다.
<script>
웹 문서에서 실행 가능한 스크립트를 넣거나 외부 스크립트를 참조할 때 쓴다. type 속성은 생략 가능하며 생략된 경우 JavaScript로 처리된다.
• 문서의 내용을 구성하는데 쓰이는 태그.
<article>
재배포, 재사용이 가능한 컨텐츠를 포함할 때 쓴다.
기사, 포럼 게시물, 사용자 코멘트 등이 대표적.
<br>, <hr>
<br>은 문서에서 줄바꿈이 필요할 때 사용된다.
<hr>은 문서 단락들 사이에 의미적인 분리를 위해 쓴다. 수평선으로 표시된다.
<canvas>
html5에 추가된 태그로 스크립트 언어를 이용해 그래픽을 표현할 수 있다.
<code>
프로그래밍 코드 조각을 표현할 때 사용된다.
<dl>, <dt>, <dd>
용어와 설명을 표시하는데 사용한다.
<embed>
플러그인 컨텐츠를 표시하는데 사용된다.
<figure>, <figcaption>
그림이나 도표의 제목 또는 범례를 표시하는데 사용된다.
<h1>, <h2>, <h3>, <h4>, <h5>, <h6>
문서의 제목에 사용된다.
<img>
사진을 표시할 때 사용된다. alt 속성으로 이미지가 표시되지 않을 때 대체 정보를 사용자에게 전달해줄 수 있다.
<li>, <ul>, <ol>
목록을 표시하는데 사용한다. 정렬 순서가 있는 경우 <li>를 <ol>로 감싸고, 정렬 순서가 없는 경우 <ul>로 감싸준다.
<p>
문서의 단락 정의에 사용된다.
<pre>
html 파일에 입력된 문자 그대로 보여줄 때 사용한다.
<section>
일반 문서 및 애플리케이션 영역을 표시한다. <article> 태그와 다르게 웹상에서 재배포를 할 수 없다는 의미를 담고 있다.
• <head>와 관련된 태그들.
<meta>
메타 정보를 정의한다.
<link>
CSS와 같은 외부 자원에 대한 링크를 정의한다.
<style>
CSS를 정의하는데 사용된다.
• 폼과 관련된 태그들
<form>
클라이언트와 서버 간 정보를 교환하기 위해 사용된다. method 속성으로 http 전송 방식을 지정해줄 수 있다.
<fieldset>
폼 양식에서 레이블과 컨트롤을 그룹으로 묶어 주기 위해 사용된다.
<input>
폼 양식에서 사용자 입력을 받을 때 사용한다. type으로 text, password, checkbox, radio, file, submit 등의 형식을 부여할 수 있다. (기본 값은 텍스트 박스.)
<label>
폼 양식에서 input 등 항목에 대한 설명을 붙일 때 사용한다.
<select>
폼 양식에서 <option> 태그와 함께 옵션을 선택하는 드롭다운 목록을 제공할 때 사용된다.
<textarea>
폼 양식에서 여러 줄로 구성된 텍스트를 입력받는 용도로 쓰인다. cols, rows 속성으로 표시되는 크기를 지정할 수 있다.
• 표와 관련된 태그들
<table>
데이터를 2차원 표로 표시할 때 사용된다.
<thead>
표에서 머리글 행을 표시할 때 사용된다.
<tbody>
표에서 내용에 대한 행을 표시할 때 사용된다.
<tr>
표에서 표의 행을 표시할 때 사용한다. <th> 또는 <td> 태그를 포함한다.
<td>
표의 셀. colspan, rowspan 등으로 셀 병합을 할 수 있다.
<th>
표에서 헤더, 제목이 되는 셀은 <th>로 표현된다.
<title>
문서의 제목을 정의한다. <head> 요소 내에 위치한다.
<caption>
표에서 제목을 정의할 때 사용된다.
<col>
표에서 열을 정의한다.
<colgroup>
표에서 열의 그룹을 정의할 떄 쓴다. <col> 태그를 포함한다.
• 블록 레벨 태그와 인라인 레벨 태그의 구분
# 블록 레벨 태그
<address>, <article>, <aside>, <blockquote>, <canvas>,
<dd>, <div>, <dl>, <dt>, <fieldset>, <figcaption>, <figure>,
<footer>, <form>, <h1>-<h6>, <header>, <hr>, <li>, <main>,
<nav>, <noscript>, <ol>, <p>, <pre>, <section>, <table>,
<tfoot>, <ul>, <video>
# 인라인 레벨 태그
<a>, <abbr>, <acronym>, <b>, <bdo>, <big>, <br>, <button>,
<cite>, <code>, <dfn>, <em>, <i>, <img>, <input>, <kbd>, <label>,
<map>, <object>, <output>, <q>, <samp>, <script>, <select>,
<small>, <span>, <strong>, <sub>, <sup>, <textarea>, <time>,
<tt>, <var>
댓글 없음:
댓글 쓰기