개요

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>웹 컴포넌트 내에서 콘텐츠를 삽입할 위치를 정의