티스토리 뷰
개요
HTML 태그 요소 정리를 하고, 기록을 위해서 작성을 해본다.
태그를 많이 있어 각 사용 쓰임에 따라 정리를 따로 해봤다.
HTML5 새로 포함된 태그 요약
HTML5에 새로 포함된 태그들이 있다. 이러한 HTML5 태그(요소)는 더 나은 문서 구조를 제공한다.
| 태그 | 설명 |
| <article> | 이 요소는 블로그, 잡시, 신문 기사 등 문서에서 독립적인 콘텐츠를 정의하는데 사용된다. |
| <aside> | 기사가 전체 페이지의 나머지 부분과 약관 관련되어 있음을 지정한다. |
| <audio> | HTML에서 오디오 파일을 재생하는데 사용된다. |
| <bdi> | bdi는 양방향 격리를 의미합니다. 외부 텍스트 문서에서 다른 방향으로 형식이 지정된 텍스트 일부를 격리한다. |
| <canvas> | 캔버스를 그리는 데 사용된다. |
| <data> | 데이터의 기계 판독 가능한 버전을 제공한다. |
| <datalist> | 텍스트 필드에 자동 완성 기능을 제공한다. |
| <details> | 사용자에게 필요한 추가 정보 또는 제어를 지정한다. |
| <dialog> | 창 또는 대화 상자를 정의한다. |
| <figcaption> | <figure> 요소에 대한 캡션을 정의하는 데 사용된다. |
| <figure> | 사진, 다이어그램 등과 같은 독립적인 콘텐츠를 정의한다. |
| <footer> | 섹션의 바닥글을 정의힌다.. |
| <header> | 섹션의 머리글을 정의한다. |
| <main> | 문서의 주요 콘텐츠를 정의한다. |
| <mark> | 표시되거나 강조된 콘텐츠를 지정한다. |
| <menuitem> | 팝업 메뉴에서 사용자가 호출할 수 있는 명령을 정의한다. |
| <meter> | 주어진 범위 내에서 스칼라 값을 측정하는 데 사용된다. |
| <nav> | 문서 내에서 탐색 링크를 정의하는 데 사용된다. |
| <progress> | 문서 내에서 탐색 링크를 정의하는 데 사용된다. |
| <rp> | 루비 주석을 지원하지 않는 브라우저에서 표시할 내용을 정의한다. |
| <rt> | 문자에 대한 설명/발음을 정의한다. |
| <ruby> | <rp> 및 <rt>와 함께 루비 주석을 정의한다. |
| <section> | 문서 내에서 섹션을 정의한다. |
| <summary> | <details> 요소의 보이는 제목을 지정한다. |
| <svg> | 도형을 표시하는 데 사용된다. |
| <time> | 날짜/시간을 정의하는 데 사용된다. |
| <video> | HTML에서 비디오 파일을 재생하는 데 사용된다. |
| <wbr> | 가능한 줄 바꿈을 정의한다. |
태그 구분
관련 요소로 나누어서 정리를 해보았다.
구조(Structure) 관련 태그
이 태그들은 문서의 구조를 정의하는데 사용된다.
| 태그 | 설명 | 풀 네임 |
| <!DOCTYPE html> | 웹 문서의 유형을 html로 지정 | |
| <html lang=”ko”> | 문서를 html로 시작 (루트 요소), 언어를 한국어로 지정 | HyperText Markup Language |
| <head> | 메타데이터를 포함한 브라우저의 정보를 넣는 곳 | |
| <body> | 문서 내용을 입력 | |
| <header> | 문서나 섹션의 머리말 | |
| <footer> | 문서나 섹션의 바닥글 | |
| <section> | 문서 내의 일반적인 섹션 | |
| <article> | 독립적인 콘텐츠 | |
| <nav> | 내비게이션 링크를 그룹화 | |
| <aside> | 메인 콘텐츠와 관련된 보조 콘텐츠 | |
| <main> | 문서의 주요 콘텐츠 | |
| <div> | 스타일링이나 스크립을 위해 컨테이너 역할을 하는 요소 | Division |
텍스트 콘텐츠(Text Content) 관련 태그
이 태그들은 텍스트 콘텐츠를 표시하고 구조하는 데 사용된다.
| 태그 | 설명 | 풀 네임 |
| <h1>, <h2>, <h3>, <h4>, <h5>, <h6> | 제목을 정의 | Heading |
| <p> | 문단을 정의 | Paragraph |
| <span> | 문서 내의 텍스트를 특정 부분으로 묶음 | |
| <a> | 하이퍼링크를 정의 | Anchor |
| <em> | 텍스트를 강조 (이탤릭체) | Emphasis |
| <strong> | 텍스트를 강하게 강조 (볼드체) | |
| <blockquote> | 인용문을 정의 | Block Quote |
| <cite> | 저작물의 출처를 나타낸다. | Citation |
| <code> | 코드 조각을 정의 | Code |
| <pre> | 서식이 지정된 텍스트를 나타냄 | Preformateted Text |
| <br> | 줄 바꿈 | Break |
| <hr> | 주제의 분리 (수평선) | Horizontal Rule |
멀티미디어(Multimedia) 관련 태그
이 태그들은 멀티미디어 콘텐츠를 포함한다.
| 태그 | 설명 | 풀 네임 |
| <img> | 이미지를 삽입 | Image |
| <audio> | 오디오 콘텐츠를 삽입 | |
| <video> | 비디오 콘텐츠를 삽입 | |
| <canvas> | 그래픽을 그릴 수 있는 공간을 제공 | |
| <svg> | XML 기반의 벡터 그래픽을 그릴 수 있다. | Scalable Vector Graphics |
| <figure> | 이미지, 다이어그램, 일러스트 등을 포함하는 독립적인 콘텐츠 | |
| <figcaption> | <figure> 요소의 캡션을 정의 | |
| <embed> | 외부 콘텐츠를 삽입 | |
| <object> | 외부 객체를 함 | |
| <source> | <audio>나 <video> 요소의 미디어 자원을 정의 |
폼(Form) 관련 태그
이 태그들은 사용자 입력을 수집하는 폼을 구성한다.
| 태그 | 설명 | |
| <form> | 사용자 입력을 받을 수 있는 폼을 정의 | |
| <input> | 다양한 유형의 사용자 입력 필드를 정의 | |
| <input type="text"> | 한 줄 텍스트 입력 필드 | |
| <input type="password"> | 비밀번호 입력 필드 | |
| <input type="checkbox"> | 체크박스 (중복체크) | |
| <input type="radio"> | 라디오 버튼 (단일 체크) | |
| <input type="file"> | 파일 선택 필드 | |
| <input type=”email”> | 이메일 주소 입력 필드 | |
| <input type="color"> | 색상 선택 필드 | |
| <input type="range"> | 범위 선택 슬라이더 | |
| <input type="number"> | 숫자 스핀 박스(버튼으로 숫자 조절) | |
| <textarea> | 여러 줄의 텍스트 입력필드 | |
| <button> | 클릭 가능한 버튼 | |
| <select> | 드롭다운 리스트 | |
| <option> | <select> 내에서 선택 가능한 옵션 | |
| <label> | 폼 요소에 레이블을 지정 | |
| <fieldset> | 폼 내의 요소를 그룹화 | |
| <legend> | <fieldset> 요소의 제목을 정의 | |
| <datalist> | <input> 요소를 위한 미리 정의된 옵션 목 | |
| <output> | 계산 결과를 나타내는 요소 | |
HTML5 폼 검증 기능
HTML5는 클라이언트 측 폼 검증 기능을 기본적으로 제공하여, 사용자 입력이 서버에 전송되기 전에 유효성을 검사할 수 있다.
폼 검증 기능을 활용하면 자바스크립트 없이도 기본적인 입력 검증을 수행할 수 있다.
- required: 필수 입력 필드로 지정한다.
- pattern: 정규 표현식을 사용하여 입력 형식을 지정한다.
- min / max: 숫자나 날짜 입력의 최소값과 최대값을 지정한다.
- maxlength: 입력할 수 있는 최대 문자 수를 지정한다.
- type에 따른 검증
예제:
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5 Form Validation 예제</title>
</head>
<body>
<h1>폼 검증 예제</h1>
<form>
<label for="email">이메일:</label>
<input type="email" id="email" name="email" required>
<br><br>
<label for="phone">전화번호 (010-xxxx-xxxx):</label>
<input type="tel" id="phone" name="phone" pattern="010-[0-9]{4}-[0-9]{4}" required>
<br><br>
<button type="submit">제출</button>
</form>
</body>
</html>
테이블(Table) 관련 태그
이 태그들은 테이블 데이터를 표시하는데 사용된다.
| 태그 | 설명 | 풀 네임 |
| <table> | 테이블을 정의 | |
| <caption> | 테이블의 제목을 정의 | |
| <thead> | 테이블의 머리글 섹션 | |
| <tbody> | 테이블의 본문 섹션 | |
| <tfoot> | 테이블의 바닥글 섹션 | |
| <tr> | 테이블을 행을 정의 | Table Row |
| <th> | 테이블 헤더 셀을 정의 | Table Header |
| <td> | 테이블 데이터 셀을 정의 | Table Data |
| <colgroup> | 열 그룹을 정의 | |
| <col> | 개별 열에 대한 속성을 정의 |
목록 관련 태그
| 태그 | 설명 | 풀 네임 |
| <ul> | 순서 없는 목록 | Unordered List |
| <ol> | 순서 있는 목록 | Ordered List |
| <li> | 목록 아이템 | List Item |
메타 데이터(Metadata) 관련 태그
이 태그들은 문서의 메타데이터를 정의하는 데 사용된다.
| 태그 | 설명 | |
| <meta> | 문서의 데이터를 정의 (인코딩, 키워드, 뷰포트 설정 등) | |
| <meta charset="UTF-8"> | 문서 인코딩 | |
| <meta name="description" content="이것은 귀여운 웅담에 관한한 웹페이지입니다."> | 문서(페이지)의 설명 | |
| <meta name="keywords" content="dogs, pets, animals, cute"> | 키워드 설정 | |
| <meta name="author" content="buppagistar"> | 작성자 정보 | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | 뷰포트 설정 | |
| <meta http-equiv="cache-control" content="no-cache"> | 브라우저 캐싱 관련 설정 | |
| <title> | 문서의 제목을 정의(브라우저 탭 표시) | |
| <link> | 외부 리소스와의 관계를 정의 (CSS 파일 등) | |
| <link rel="stylesheet" href="styles.css"> | 외부 CSS 파일 연결 | |
| <link rel="icon" href="favicon.ico" type="image/x-icon"> | 파비콘 설정 | |
| <link rel="alternate" type="application/rss+xml" title="RSS" href="rss.xml"> | RSS 피드 설정 | |
| <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto"> | 웹폰트 연결 | |
| <style> | 문서 내의 스타일 정보를 정의 | |
| <base> | 문서 내의 모든 상대 URL의 기준 URL을 설정 | |
오픈 그래프:
// 오픈 그래프 (Facebook 등):
<meta property="og:title" content="My Awesome Web Page">
<meta property="og:description" content="This is an awesome web page about cats.">
<meta property="og:image" content="https://www.example.com/cat.jpg">
<meta property="og:url" content="https://www.example.com/">
// Twitter Cards 예시:
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="My Awesome Web Page">
<meta name="twitter:description" content="This is an awesome web page about cats.">
<meta name="twitter:image" content="https://www.example.com/cat.jpg">스크립트(Script) 및 기타 기능적 태그
이 태그들은 스크립트와 기타 기능적 태그들을 포함한다.
| 태그 | 설명 |
| <script> | 자바스크립트 코드를 포함 |
| <noscript> | 스크립트를 지원하지 않는 브라우저에서 표시할 콘텐츠 |
| <template> | 재사용 가능한 HTML 코드 조각을 정의 |
| <slot> | 웹 컴포넌트 내에서 콘텐츠를 삽입할 위치를 정의 |
반응형
LIST
'FE Dev. > HTML&CSS' 카테고리의 다른 글
| CSS 방법론(BEM, SMACSS, OOCSS) (0) | 2023.01.05 |
|---|
댓글