홈페이지를 작성하기 위해선 툴(프로그램)을 이용하면 편하겠지만... 그래도 기본 구조는 알고 있어야 한다.
구조를 알기위해선 태그정도는 알고 있어야 할것이다.
HTML5 태그를 정리해보자.
- HTML5의 주요 태그(HTML4에서 5로 넘어가면서 추가된 태그)
<header> : 페이지 상단부
<hgroup> : 제목과 관련된 부제목을 묶어준다. header는 페이지 구성을 위한 구분단위 이고 hgroup은 페이지 전체 구조에 대한 개념으로 쉽게 눈에 들어오게 하는 역할
<nav> : 네비게이션. 위치에 영향을 받지 않는다.
<section> : 웹컨텐츠를 그룹화 함. section안에 또 다른 section이나 article태그들을 사용할 수 있다. article과의 차이는 재배포 할 수 없다.
<article> : 뉴스, 블러그 글등 독립적 컨텐츠로 웹페이지 상의 실제 내용. article은 다른 곳에 배포하거나 재사용이 가능
<aside> : 사이드바, 위젯 등
<footer> : 페이지 하단부 (주소, 연락처, 저작권 등)
<figure>, <figcaption> : 캡션 붙일때
<audio>, <video> : 오디오, 비디오 삽입
<embed> : 플러그인 컨텐츠
<mark> : 형광팬같은 효과
<progress> : 진행 바
<meter> : 특정값
<time> : 시간표시
<ruby> : 설명 글(미주, 각주)
<canvas> : 그래픽을 표현
<command> : 사용자가 실행 명령어를 표시(?)
<details> : 추가정보
<datalist> : 사용자가 선택할 수 있는 목록
<keygen> : 서버와 로컬에 키를 저장
<output> : 수학적 계산 결과 표시
- HTML5에서 변경된 태그
<a> : href가 없을 경우 널링크로 사용 가능 (<a href="주소">내용</a> 4에서는 이렇게 사용했었다.)
<address> : 실제 우편물 주소 표시
<b> : 텍스트, 제품명, 키워드 진하게
<hr> : 가로줄 표시 (단락 단위로 주제를 변경할 때 사용)
<i> : 기울임 꼴, 주변 텍스트와 차별
<menu> : 실제 메뉴 정보 제공
<small> : 작은 인쇄 정보 표시
<strong> : 더 중요한 정보 표시
태그에 대해 더 자세한 설명...
| 태그 | 설명 |
|---|---|
| <!--...--> | 주석을 정의합니다. |
| <!DOCTYPE> | document type을 정의합니다. |
| <a> | hyperlink를 정의합니다. |
| <abbr> | abbreviation(생략)을 정의합니다. |
| <acronym> | HTML5에서 지원되지 않습니다. |
| <address> | 문서나 Article의 저작자나 소유자의 연락 정보를 정의합니다. |
| <applet> | HTML5에서 지원되지 않습니다. |
| <area> | 이미지맵안의 영역을 정의합니다. |
| <article> | Article을 정의합니다. |
| <aside> | 메인 컨텐트의 2차적 컨텐트입니다. |
| <audio> | 음향컨텐트를 정의합니다. |
| <b> | 텍스트를 굵게 정의합니다. |
| <base> | 문서내의 모든 상대적 URL에 대해서 기준이 되는 URL이나 타겟을 특정합니다. |
| <basefont> | HTML5에서 지원되지 않습니다. |
| <bdi> | 글자의 진행방향이 다른 부분(아랍어)을 격리시켜 함께 있는 글자들과 어울리게 합니다. |
| <bdo> | 현재 글자 진행방향을 재정의합니다. |
| <big> | HTML5에서 지원되지 않습니다. |
| <blockquote> | 다른 부분에서 인용된 부분을 정의합니다. |
| <body> | 문서의 body를 정의합니다. |
| <br> | 줄바꿈을 정의합니다. |
| <button> | 클릭가능한 버튼을 정의합니다. |
| <canvas> | 주로 자바스크립트를 이용하여 그래픽을 만듭니다. |
| <caption> | 테이블 켑션을 정의합니다. |
| <center> | HTML5에서 지원되지 않습니다. |
| <cite> | 작품의 제목을 정의합니다. |
| <code> | 모노스페이스 폰트로 컴퓨터 코드를 정의합니다. |
| <col> | <colgroup> 요소 안의 각 컬럼 속성을 정의합니다. |
| <colgroup> | 테이블의 하나이상의 컬럼에 대해서 그룹화시킵니다. |
| <command> | 현재 IE9에서만 지원하고 있는 태그로 명령 버튼을 만듭니다. |
| <datalist> | 현재 파이어폭스와 오페라 브라우저에서만 지원되는 태그로 미리 정의된 옵션 리스트를 만듭니다. |
| <dd> | definition list의 항목에 대해서 세부설명에 관해서 정의합니다. |
| <del> | 문서에서 제거된 텍스트에 대해서 정의합니다. |
| <details> | 사용자에게 보이거나 안보이게 할 수 있는 옵션을 제공합니다. |
| <dfn> | definition term을 정의합니다. |
| <dir> | HTML5에서 지원되지 않습니다. |
| <div> | 문서에서 일반적인 컨테이너 역할을 합니다. |
| <dl> | definition list를 정의합니다. |
| <dt> | definition list의 아이템에 대해서 정의합니다. |
| <em> | 강조 텍스트를 정의합니다. |
| <embed> | 외부 애플리케이션이나 인터렉티브 컨텐트(플러그인)의 컨테이너입니다. |
| <fieldset> | form안의 연관있는 요소를 그룹화합니다. |
| <figcaption> | figure 요소의 캡션을 정의합니다. |
| <figure> | 이미지태그와 같은 요소를 정의합니다. |
| <font> | HTML5에서 지원되지 않습니다. |
| <footer> | 문서의 footer를 정의합니다. |
| <form> | 사용자 입력가능한 form에 대해 정의합니다. |
| <frame> | HTML5에서 지원되지 않습니다. |
| <frameset> | HTML5에서 지원되지 않습니다. |
| <h1> to <h6> | 제목글자를 정의합니다. |
| <head> | 문서내의 정보에 대해 정의합니다. |
| <header> | 문서나 섹션의 헤더에 대해 정의합니다. |
| <hgroup> | h1~h6 요소를 그룹화합니다. |
| <hr> | 컨텐트의 전환을 위한 수평선을 만듭니다. |
| <html> | HTML 문서의 루트입니다. |
| <i> | 텍스트의 일부분에 대해서 음성이라거나 어떤 분위기라는 것을 표시합니다. |
| <iframe> | 인라인 프레임에 대해 정의합니다. |
| <img> | 이미지에 대해 정의합니다. |
| <input> | form입력부분에 대해 정의합니다. |
| <ins> | 문서에 삽입된 텍스트에 대해 정의합니다. |
| <keygen> | form의 암호화 키를 생성합니다. |
| <kbd> | 키보드 입력을 정의합니다 |
| <label> | 입력요소의 레이블을 정의합니다. |
| <legend> | fieldset, figure, details 요소의 캡션을 정의합니다. |
| <li> | 목록 아이템을 정의합니다. |
| <link> | 문서와 외부 소스의 관계를 정의합니다. |
| <map> | 사용자측 이미지맵을 정의합니다. |
| <mark> | 마크되거나 하이라이트된 텍스트를 정의합니다. |
| <menu> | command의 목록이나 메뉴를 정의합니다. |
| <meta> | HTML 문서의 메타데이터를 정의합니다. |
| <meter> | 숫자로 표시된 내용을그래픽 게이지로 표시합니다. |
| <nav> | 내비게이션 링크를 정의합니다. |
| <noframes> | HTML5에서 지원되지 않습니다. |
| <noscript> | 사용자측 스크립트를 지원하지 않는 컨텐트에 대해서 대체 텍스트를 정의합니다. |
| <object> | 임베디드 오브젝트를 정의합니다. |
| <ol> | 일정한 순서대로 나열된 목록을 정의합니다. |
| <optgroup> | 드랍다운 목록에서 옵션항목의 그룹을 정의합니다. |
| <option> | 드랍다운 목록의 옵션항목을 정의합니다. |
| <output> | 계산 결과를 정의합니다. |
| <p> | 단락을 정의합니다. |
| <param> | 오브젝트의 파라미터를 정의합니다. |
| <pre> | 이미 포맷된 텍스트를 보존합니다. |
| <progress> | 작업의 진행내역을 애니메이션 그래픽으로 표시합니다. |
| <q> | 짧은 인용을 정의합니다. |
| <rp> | Ruby언어의 주석을 브라우저에서 지원하지 않는 경우 표시할 내용을 정의합니다. |
| <rt> | 동아시아 글자의 설명이나 발음을 정의합니다. |
| <ruby> | 동아시아 글자의 루비 언어 주석을 정의합니다. |
| <s> | 텍스트 내부에 수평줄을 그어(strike) 수정된 택스트를 정의합니다. |
| <samp> | 컴퓨터 프로그램의 결과 샘플을 정의합니다. |
| <script> | 사용자측 스크립트를 정의합니다. |
| <section> | 문서의 섹션을 정의합니다. |
| <select> | 드랍다운 목록을 정의합니다. |
| <small> | 작은 텍스트를 정의합니다. |
| <source> | video, audio 등 멀티미디어요소의 리소스를 정의 합니다. |
| <span> | 문서의 인라인 요소 부분을 정의합니다. |
| <strike> | HTML5에서 지원되지 않습니다. |
| <strong> | 중요한 텍스트를 정의합니다. |
| <style> | 문서의 CSS정보를 정의합니다. |
| <sub> | 보통의 글자보다 작고 아래에 위치한 글자를 정의합니다. |
| <summary> | details 요소의 보이는 제목부분을 정의합니다. |
| <sup> | 보통의 글자보다 작고 줄의 상단에 위치한 글자를 정의합니다. |
| <table> | 테이블을 정의합니다. |
| <tbody> | 테이블 바디의 컨텐트를 정의합니다. |
| <td> | 테이블 셀을 정의합니다. |
| <textarea> | form입력부분의 textarea를 정의합니다. |
| <tfoot> | table의 footer를 정의합니다. |
| <th> | table의 제목셀을 정의합니다. |
| <thead> | table의 제목 컨텐트를 정의합니다. |
| <time> | 날짜와 시간을 정의합니다. |
| <title> | 문서의 타이틀을 정의합니다. |
| <tr> | table의 행을 정의합니다. |
| <track> | media 요소(video, audio)의 텍스트 트랙을 정의합니다. |
| <tt> | HTML5에서 지원되지 않습니다. |
| <u> | HTML5에서 지원되지 않습니다. |
| <ul> | 순서가 없는 목록을 정의합니다. |
| <var> | 변수를 정의합니다. |
| <video> | 동영상이나 영화를 정의합니다. |
| <wbr> | 단어가 긴 경우 줄바뀔때 단어가 끊어질 수 있도록 합니다. |
다음은 태그를 이용해서 어떻게 반응하는지 알아보겠다.
'프로그래밍 > 웹프로그래밍' 카테고리의 다른 글
| 웹프로그래밍 1화. HTML/JAVA/PHP/CSS등을 쪼개보자. (0) | 2015.01.31 |
|---|