HTML Tag 요약
반응형
HTML 공부 시작하면서 tag 별 요약을 하였습니다.
참조 사이트 : 생활 코딩 및 아래 사이트
https://opentutorials.org/module/552/4890
https://www.w3schools.com/tags/tag_var.asp
http://tcpschool.com/html-tags/wbr
입문자의 경우 생활 코딩에 강좌를 강력 추천 합니다.
| Tag | 요약 |
| h1~h6 | 문자를 강조하는데 사용하고
번호에 따라 강조 크기가 달라진다. 1 > 2 > … |
| article | 본문이라는 의미를 부여한다. |
| a | 링크
속성을 넣는다. Href |
| style | CSS 스타일 선언을 위한 태그 |
| addr | 텍스트를 생략어로 지정. 마우스를 올리면 툴팁으로 내용을 표시. |
| acronym | 텍스트를 initial letter로 지정. Abbr과 유사한데 html 5 에서는 지원하지 않음. |
| address | 주소 정보를 넣을 때 사용한다. |
| area | 이미지
맵의 속성을 지정하기 위한 요소 좌표 및 링크, 형태등.. |
| applet | 자바
애플릿을 삽입하는데 사용 Html5 에서는 object 를 사용해야 된다. |
| aside | 페이지 내용과 크게 관련이 없는 참고용 내용 표시 구분 |
| audio | 음악 혹은 스트림 사운드 삽입을 하는데 사용. |
| b | 사용된 태그에 표함되는 글을 굵게 표시하는데 사용. |
| base | 문서의 기준이 되는 url을 명시 |
| bdi | 텍스트
출략 방향을 정의할 때 사용한다. 보통 죄->우, Top->bottom으로 가는데 이 것을 전환 변경. |
| bdo | 텍스트 방향 변경. "rtl", "ltl" |
| big | 텍스트 크기를 크게 표시한다. |
| blockquote | 인용문을 표시할 때 사용 |
| body | 문서의
메인 컨텐트를 표시 HTML문서는 머리 부분(<head> ... </head>)과 본문 부분(<body> ... </body>)으로 나눌 수 있는데 본문 부분에 해당합니다. 올바른 문서에서는 하나의 body요소만이 존재해야 합니다. |
| br | 텍스트 줄바꿈을 하게 한다. |
| button | 버튼을 생성 시키기 위한 속성을 정의할 때 사용. |
| canvas | 스크립트와 해상도에 의존하는 비트맵 캔버스를 사용 |
| caption | table/사진 삽화등에 제목을 지정. |
| center | 가운데 정렬로 지정 |
| cite | 모든 창작물의 제목을 표시 할 때 사용. 이름이나 그외 것은 사용하지 말것. |
| code | 코드라는 것을 표시 할 때 사용하는 태그 |
| col | 하나
이상의 열의 속성을 표시 할 때 col 내부의 span은 숫자와 사용되면 몇 개의 col을 그룹화 시킨다. |
| colgroup | 하나
이상의 열의 그룹으로 묶을 때 사용 속성들이 묶여 있는 그룹 모두에 적용된다. |
| data | 정의된
컨텐츠에 value 를 추가하는데 사용된다. 시간관련 데이터라면 <time>을 사용 |
| datalist | input 에서 사용될 옵션 리스트를 미리 정의하는데 사용 |
| dl | 용어와 그에 대한 설명을 정의 할 때 사용한다. |
| dt | dl 태그 내부에서 용어 이름을 표시 할 때 사용 |
| dd | dl 태그 내부에서 용어 설명을 표시 할 때 사용 |
| del | 텍스트 취소선 표시 할 때 사용 |
| ins | 내용 업데이트를 표시할 때 사용. Underline 표시 된다. |
| details | summary 를 클릭하여 상세 내용을 확장시켜 볼 수 있도록 하는 기능 |
| summary | details 태그 내부에서 요약 정보를 표시하는데 사용 |
| dfn | 용어 정의를 나타낼 때 사용 |
| dialog | dialog box 에 내용을 표시 할 때 사용 |
| div | 구역 설정을 할때 사용 |
| em | 강조를 표시 할 때 사용. 중첩 사용 시 더 중요하게 표시된다. |
| embed | 외부 애플리케이션이나 대화형 콘텐츠를 포함시킬 수 있는 컨테이너(container)를 정의 |
| fieldset | 여러 개의 요소를 그룹화 시킨다. |
| figure | 사진, 다이어그램 등 내용 정의를 할 때 사용 |
| figcaption | <figure> 태그 내부에서 캡션을 정의할 때 사용 |
| footer | 저작권 정보나 서비스 제공자 정보를 표시할 때 사용 |
| form | html input form을 만들 때 사용한다. |
| head | 문서 전체의 head 구역을 표시 할 때 사용한다. |
| header | 문서 내부 특정 섹션의 header를 표시할 때 사용 |
| hr | 수평 가로선을 표시할 때 사용 |
| html | html 문서 루트에 해당, 문서기본 요소, html 문서임을 브라우져에 알려주는 역할을 한다. |
| i | 이탤릭체로 표시할 때 사용 |
| iframe | 다른 html 페이지를 포함 시킬 때 사용. |
| img | 이미지를 표시할 때 사용한다. Src와 alt 속성은 필 포함 해야 됨. |
| input | 사용자로 부터 입력을 받는 필드 정의 |
| kbd | 키보드 입력을 표시하는 태그로 표시만 하지 그외 동작은 없다. |
| lable | 라벨 정의를 하는 태그 이고, 내부 for 속성의 id로 연결 시켜 사용가능 |
| legend | fieldset 태그 내부에서 캡션을 정의할 때 사용. |
| ol | Order list, 순서 그룹을 적용하는 것 |
| ul | Unorder list, 순서가 없는 그룹을 적용하는 것 |
| li | ol, ul 태그 내부에서 아이템을 정의하는데 사용. |
| link | html 문서와 외부 문서 사이의 관계 정의 <head>에서만 사용가능 |
| main | 문서의 주요 내용을 표시하는데 사용. Article,aside,footer등 하위에서 사용불가 |
| map | 표시된 이미지의 클릭가능한 영영의 리스트를 정의할 때 사용 |
| mark | 형광팬으로 표시한 것 같이 나타낼 때 사용. |
| meta | head
내부에서 사용. 메타 정보를 추가 할 때 사용. 검색 엔진, 문서 설명, 저자, 뷰포트 등 설정가능 |
| meter | 백분률등의 값이 어느정도 인지 이미지로 표시하는 용도로 사용 |
| nav | 태크 : 구역을 알려주는 태그 태그가 어떤 기능을 하는 것이 아니고 그냥 여기서 부터는 윗부분에 있는 것이다. 여기서부터는 아래에 있는 것이다라는 것을 알려줘서 나중에 다른 사람이 이 코딩을 보고 유지 보수할 때 편리하게 하려는 목적도 있다고 합니다. |
| noscript | 스크립트 지원하지 않는 브라우저를 위한 정의 |
| object | 이미지, 오디오, 비디오, 자바 애플릿, 플래시등과 같은 object들을 포함하기 위해 사용 |
| param | object 태그 내부에서 사용되는 메개변수 정의 시 사용 |
| option | drop down list 의 한 항공을 정의하기 위하여 사용 |
| optgroup | drop down list 들을 하나의 그룹으로 등록 표시하기 위하여 사용 |
| select | drop down list 옵션 메뉴 구성을 할 때 사용. |
| output | 스크립트등의 수행 결과를 표시할 때 사용. |
| p | 문단을 정의할 때 사용 |
| picture | 다중
이미지 리소스 정의를 할 때 사용 디바이스 표시 가능 영역에 따라 이미지를 다른 것으로 정의 시킬때 사용 |
| pre | 메모장에 text 를 적은 것 처럼 그대로 표시를 해주는 태그 |
| progress | 작업 진행률을 표시하기 위하여 사용. 범위를 나타낼때는 meter |
| q | 짧은 인용구 표시 시 사용. 다른 출처는 <blockquote> 사용 |
| rt | 발음, 윗첨자 표시하는 루비주석 사용을 위하여 사용 |
| rp | 발음, 윗첨자 표시하는 루비주석 미지원 시 브라우저에서 rt 내용을 표시할 수 있도록 사용 |
| ruby | 루비 주석 사용을 위하여 rt, rp 등을 포함하는 태그 |
| s | 더
이상 사용하지 않거나 관련이 없어진 경우 표시를 위하여 사용. 삭제 혹은 대체 된 경우 del을 사용해야된다. |
| samp | 컴퓨터 프로그램 샘플 혹은 결과 인용 한 것을 표시하기 위하여 사용 |
| script | 자바 script 를 사용한다는 의미를 부여할 때 사용 |
| section | HTML 문서에 독립적인 섹션 표시를 하기 위하여 사용 |
| small | 작은 글자 크기 정의 시 사용 |
| source | <audio><video><picture>
요소에서 다중 자원 정의 시 사용 브라우져가 지원할 수 있는 여러가지 타입으로 정의하는 것이 일반 |
| span | class나 id 속성을 정의된 부분에 적용하는 데 사용. |
| strong | 문장의
일부의 중요성 및 심각성 표시. <b> 요소는 콘텐츠의 중요성보다는 텍스트 자체에 주의를 끌기 위해 사용 <em> 요소는 구어체 강조와 같이 문장의 의미를 변경하는데 사용되지만, <strong> 요소는 문장의 일부분에 중요성을 추가하는데 사용됩니다 |
| sub | 화학식과 같은 밑첨자 표시를 위하여 사용 |
| sup | 수학식과 같은 윗 첨자를 표시하는데 사용 |
| table | 테이블
시작과 끝을 표시하는데 사용 내부에 tr / th / td 와 같이 사용 |
| td | 테이블
셀 하나의 데이터를 표시하는데 사용. th 는 테이블 맨위 하나의 정의를 표시하는데 사용. |
| th | 테이블 맨위 항목의 데이터로 표시하는데 사용. |
| tr | 테이블의 하나의 row 를 정의하는데 사용. th/td 요소가 포함된다. |
| thead | 테이블의 콘텐츠들을 하나의 head 그룹으로 묶는데 사용 |
| tbody | 테이블의 콘텐츠들을 하나의 body 그룹으로 묶는데 사용 |
| tfoot | 테이블의 콘텐츠들을 하나의 마지막 그룹으로 묶는데 사용 |
| textarea | 사용자의 여러줄 문자 입력을 받을 수 있도록 하는데 사용 |
| time | 사람이 읽을 수 있는 시간 데이터 표시를 할 때 사용 |
| track | 자막파일이나 캡션파일 등 미디어가 재생되는 동안 화면에 보일 텍스트 명시하는데 사용 |
| var | 변수 정의할 때 사용 |
| video | movi 클립과 같은 비디오 정의 시 사용 |
| wbr | 긴 text의 경우 브라우져 화면에 따라 자동 행바꿈이 되는데, wbr 태그 사용 시 명시적으로 줄바꿈을 해줄 수 있는 부분을 지정할 수 있다. |
반응형
'IT > PHP Web JS CSS HTML..' 카테고리의 다른 글
| Online code editors : html tag online 테스트 (0) | 2019.12.09 |
|---|---|
| [생활코딩] HTML 기본 강좌 요약 (0) | 2019.12.09 |
| [PHP] 정규 표현식 (0) | 2016.01.22 |
| [PHP] PHP DB basic 문법 [INSERT SELECT UPDATE DELETE] (0) | 2016.01.22 |
| [PHP] MySQL 기본 - create database , show , desc, use, create table (0) | 2016.01.21 |