Html&CSS
HTML 태그 종류_HTML4
.Epona.
2020. 3. 4. 05:11
| 태그명 | 태그 | 입력 방식 | 비고 |
| 제목 태그(heading) | h1~h6 | <h1></h> | |
| 문단 태그(paragraph) | p | <p></p> | |
| 강제 줄 바꿈 태그 | br | <br/> | |
| 이미지 태그 | img | <img src="" width="" height="" alt="" /> | ☞width, height 생략 가능 ☞의미 없는 블릭 기호 alt="-" |
| 순서가 없는 목록(Unorder list) | ul | <ul> <li> </li> </ul> |
|
| 용어 정의 목록 (Definition list) |
dl | <dl> <dt> </dt> <dd> </dd> </dl> |
|
| 강한 강조 태그 (Stronger emphasis) |
strong | <strong> </strong> | 스크린리더기가 크게 읽음 |
| 강조 태그 (emphasis) |
em | <em> </em> | |
| 구분선 태그 | hr | <hr/> | |
| 링크 태그 | a | <a href="" title="새창으로 이동" targe""></a> | _blank, _self , _parent, _top |
| iframe | iframe | <iframe src="frameborder="0" scrolling="no" width="" height="" titme="" name="" marginwidth="0" marginheight="0"> </ifram> | - 각 프레임을 구분할 수 있는 타이틀을 입력해줌 - 홈페이지 사용자들이 이해할 수 있는 유의미한 제목을 반드시 제공해 주어야함 - name은 나중에 문서를 불러올 위치(target)를 지정하는 것으로 frame_left 등과 같이(띄어쓰기 없는) 영어 및 숫자 문자열로 지정함 - title은 사용자가 프레임들을 구분하기 쉽도록 안내해주는 것으로 "좌측 메뉴 프레임"과 같이 이해하기 쉬운 말로 작성함 |
| 주소 | address | <address></address> | 기울일체로 표현 |
| 블록 영역 지정 | div | <div> </div> | - div로 콘텐츠를 묶는 이유 중 하나는 Css스타일을 효율적으로 적용하기 위해서 임 - html5는 div를 분리해 놓은 것임(header, footer 등) |
| 인라인 영역 지정 | span | <span> </span> |
테이블
| 태그명 | 태그 | 입력 방식 | 비고 |
| 테이블 기본 | table | <table summary="" border="" cellspacing="" csllpadding=""> <caption> </caption> <colgroup> <col width=""/> </colgroup> <thead> <tr> <th> </th> </tr> </thead> <tfoot> <tr> <td> </td> </tr> </tfoot> <tbody> <tr> <td> </td> </tr> </tbody> </table> |
- table summary="" : alt=""와 같은 역할로 코드리더기가 읽어줌. |
| 셀 병합 | Colspan, rowspan | <td colspan=""> </td> | - 가로(열)병합: colspan - 세로(행)병합: rowspan |
| 테이블 제목 | caption | <caption> </caption> | |
| 테이블 요약 | summary | <table summary=""> </table> | - 코드리더기가 읽어줌. |
| 테이블 행그룹화 | thead | <thead> </thead> | - 머릿글 정보 - 내부에 <th> </th>만 쓸 수 있음 |
| 테이블 내용 정보 | tbody | <tbody></tbody> | |
| 테이블 꼬릿말 | tfoot | <tfoot></tfoot> | - tfoot는 결과값이 있을 때 사용 |
| 테이블 열 그룹화 | colgroup span | <colgroup span=" "> </colgroup> | |
| 열 표현 | col span | <colgroup> <col span=" "> </colgroup> |
span=" " :에 열의 수 지정 |
| 제목과 셀의 내용 연관성 | scope | <th scrop=" "> </th> | row, col : 병합되지 않은 단순한 형태의 테이블 |
| 셀의 여백 | cellpadding, cellspacing |
cellpadding="0" cellspacing="0" |
|
| 테두리 | border | border="0" | |
| id, headers | <thead> <tr> <th id="flow"> </th> </tr> </tead> <tbody> <tr> <th id="red"> </th> <td headers="flow red"> </td> </tr> </tbody> |
병합된 테이블에서 제목과 셀의 연광성 있는 관계를 지정 | |
| 표 | table | ||
| 줄 | tr | ||
| 칸(셀) | td |
입력 양식
| 태그 명 | 태그 | 입력 방식 | 비고 |
| 입력 양식 | form | <form method="" action="" name=""> <fildset> <legend></legend> <input type="" name="" title=""> </fildset> </fildset> </form> |
methd="전송방식(get , post)" action="실행프로그램" name="form이름" |
| fildset | <fildset> </fildset> | 복수의 폼컨트롤을 그룹화하기 위해서 사용 | |
| legend | <legend> </legnd> | fildset 제목 | |
| 텍스트 입력 영식 | text | <input type="text" name="titme" maxlength=""/> | |
| 비밀번호 입력 | password | <input type="password" name="" title="" /> | |
| 긴글 입력 | textarea | <textarea col="" rows="" title=""> </textarea> |
|
| 선택 메뉴 (셀렉트 박스) |
select | <select name=""> <option value=""> </option> <option value=""> </option> </select> |
|
| Group 선택 | optgroup | <optgroup label=""> </optgroup> | option 그룹이 길 때 관련 정보를 묶어주는 작업 |
| 버튼 | button | <input type="button" name="" action="" title"" /> | reset, submit |
| 이미지 버튼 | image | <input type="image" src="" name="" title="" alt="" /> | |
| 파일 찾기 | file | <input type="file" name="" title="" /> | |
| 입력 후보 | datalist | <datalist id=""> <option value=""> </option> <option value=""> </option> </datalist> |
|
| 다중 선택 | checkbox | <input type="checkbox" name="" title="" /> | |
| 선택 | radio | <input type="radio" name="" title="" /> | |
| hidden | <input type="hidden" name="" value="" title="" /> | 사용자에게 보여줄 필요가 없는 값을 처리 페이지에 넘겨 줘야할 때 사용 | |
| form 요소의 접근성 향상 | label | <lable for=""> </lable> <input type="" name="" title="" id=""/> |
id값과 for 값이 동일 해야함 |
-
| 태그 명 | 태그 | 입력 방식 | 비고 |
| 정의 태그 | dfn | <dfn> </dfn> | 이탤릭체로 표현 |
| 코드 출력 | code | ||
| 결과 출력 | samp | ||
| 값의 표시 | Kbd var |
Kbd : 유저키보드 입력 var : 프로그램에서의 변수를 |
|
| 인용출처 | cite | ||
| 축약 | abbr | <abbr title=""> </abbr> | |
| 인용문 | Blockquoto, q | blockquote: 긴 문장을 인용 <blockquote cite=""> </blockquote> q: 짧은 문장 인용 |
|
| 형식을 가지는 컨텐츠 | Pre | ||
| 추가 | ins | 문서에 추가된 내용 밑줄로 표현 | |
| 삭제 | del | 문서에 삭제된 내용 취소선 표현 | |
| 작은 글자 | small | ||
| 취소선 | s | ||
| 기울임 글꼴 | i | ||
| 굵은 글꼴 | b | ||
| 밑줄 | u |