🖥️ 비전공 야매파/🛹 HTML

[HTML 5] TAG.2 TAG의 종류와 기능들

Cosmic-Whale 2023. 11. 9.

태그의 기능과 종류
내가 이곳에 이런 글을 쓰는 것은

누구를 가르쳐 주기 위한 것은 아니다.

그냥 제법 나이가 든 비전공자 아저씨의 코딩을 배우는 연습장이라고 생각해줬으면 좋겠다.
그러니까 반말로 지껄이고 있는 부분을 이해해 주셨으면 한다.

틀린 내용이 엄청 많을 수 있어서 지적을 해주신다면 감사히 받을 예정이다.

일단 지난번에

2023.10.13 - [담아내기/HTML5] - [HTML5.1 - 태그</>1] HTML5 태그의 기본요소

[HTML5.1 - 태그</>1] HTML5 태그의 기본요소

HTML은 태그로 시작해서 태그로 끝난다. 이젠 처음으로 코딩을 배우는데 무엇부터 할까 엄청난 고민을 하고 시행착오를 거쳐 일단 티스토리를 입맛에 맞게 바꾸는 방법을 찾아보기로 했다. 아래

cosmin-whale.tistory.com

이런걸 만들써봤다. 뭐... 사실 그럼 태그가 어떤게 있는지 알아야 하겠지...

그럼 알아봐야겠다.

HTML5 태그 리스트

HTML5 에서 더이상 사용하지 않는 태그는 제외 했다. 대부분 CSS를 대신 사용하는데
HTML5 에서만 새로 추가된 코드는 별도 표기를 해두었다.

이제 처음 태그가 뭔지 공부하는 놈이 뭘 알겠나.

좋은 곳에서 퍼왔다. 더보기를 참고하자

궁금하고 자세한 설명이 필요하다면
해당 글 작성자가 참고한 정리가 끝내주는 곳이 있다.
아래 링크를 참고하자
http://tcpschool.com/html-tags/comment

참고로 각 태그를 클릭하면 해당 설명이 되어있는 TCP 스쿨 페이지로 이동한다.

각각의 태그를 클릭하면 참조한 곳의 더욱 자세한 설명이 나온다.

TAG	ACTION
<!-- -->	주석(comment)을 정의함.
<!DOCTYPE>	해당 문서(document)의 타입을 정의함.
<a>	다른 콘텐츠와 연결되는 하이퍼링크(hyperlink)를 정의함.
<abbr>	축약형(abbreviation)이나 머리글자로만 된 단어(acronym)를 정의함.
<address>	문서나 글의 저자 또는 회사와 연락할 수 있는 정보를 명시함.
<area>	이미지 맵(image-map)에서 하이퍼링크가 연결될 영역을 정의함.
<article>	해당 문서나 페이지 또는 사이트와는 완전히 독립적으로 구성할 수 있는 요소를 정의함.
<aside>	페이지의 다른 콘텐츠들과 약간의 연관성을 가지고 있지만 해당 콘텐츠들로부터 분리시킬 수 있는 콘텐츠로 구성된 페이지 영역을 정의함.
<audio>	음악이나 오디오 스트림과 같은 사운드를 정의함.
<base>	해당 문서의 모든 상대 주소(relative URL)에 대한 기본 URL과 target 속성값을 정의함.
<bdi>	주위의 텍스트들과는 다른 방향으로 써지는 텍스트 영역을 정의함.
<bdo>	자식 요소의 텍스트 방향성(text directionality)을 정의함.
<blockquote>	다른 출처로부터 인용된 영역을 정의함.
<body>	해당 문서의 콘텐츠 영역을 정의함.
<br>	행 바꿈(line-break)을 정의함.
<button>	클릭할 수 있는 버튼을 정의함.
<canvas>	자바스크립트와 같은 스크립트를 이용하여 그래픽 콘텐츠를 그릴 때 사용함.
<caption>	테이블의 캡션(caption)을 정의함.
<cite>	예술 작품과 같은 창작물의 제목을 정의함.
<code>	컴퓨터 코드(code)의 일부분을 나타냄.
<col>	<colgroup> 요소에 속하는 각 열(column)의 속성을 정의함.
<colgroup>	테이블에서 서식 지정을 위해 하나 이상의 열을 그룹으로 묶을 때 사용함.
<data>	특정 콘텐츠에 기계가 읽을 수 있는(machine-readable) 형태의 값(value)을 덧붙여 나타낼 때 사용함.
<datalist>	<input> 요소에서 사용하기 위한 옵션들의 리스트를 미리 정의함.
<dd>	용어와 그에 대한 설명을 리스트 형식으로 보여주는 <dl> 요소에서 설명(description) 부분을 정의함.
<del>	텍스트 한가운데 라인을 추가하여 문서에서 삭제된 텍스트를 표현함.
<details>	사용자가 직접 조작하여 보거나 숨길 수 있는 부가적인 세부사항(additional details)을 명시함.
<dfn>	HTML에서 용어(term)의 정의를 나타냄.
<dialog>	대화 상자(dialog box)나 대화 윈도우(dialog window)를 정의함.
<div>	HTML 문서에서 특정 영역이나 구획을 정의함.
<dl>	용어와 그에 대한 설명을 리스트 형식으로 정의함.
<dt>	용어와 그에 대한 설명을 리스트 형식으로 보여주는 <dl> 요소에서 용어(term) 부분을 정의함.
<em>	강조된 텍스트를 표현함.
<embed>	외부 애플리케이션이나 대화형 콘텐츠를 포함시킬 수 있는 컨테이너를 정의함.
<fieldset>	<form> 요소에서 연관된 요소들을 하나의 그룹으로 묶을 때 사용함.
<figcaption>	<figure> 요소의 캡션(caption)을 정의함.
<figure>	삽화나 다이어그램, 사진 등과 같이 문서의 주요 흐름과는 독립적인 콘텐츠를 정의함.
<footer>	문서나 특정 섹션의 푸터(footer)를 정의함.
<form>	사용자로부터 입력을 받을 수 있는 HTLM 입력 폼(form)을 정의함.
<h1> ~ <h6>	HTML 문서에서 제목(headings)을 정의함.
<head>	해당 문서에 대한 정보인 메타데이터(metadata)의 집합을 정의함.
<header>	문서나 특정 섹션의 헤더(header)를 정의함.
<hr>	콘텐츠 내용에서 주제가 바뀔 때 사용할 수 있는 수평 가로선을 정의함.
<html>	HTML 문서의 루트 요소(root element)를 정의함.
<i>	기본 텍스트와는 다른 분위기나 음성을 위한 텍스트 영역을 정의함.
<iframe>	인라인 프레임(inline frame)을 정의함.
<img>	이미지(image)를 정의함.
<input>	사용자로부터 입력을 받을 수 있는 입력 필드(input filed)를 정의함.
<ins>	텍스트 아래쪽에 라인을 추가하여 문서에 추가된 텍스트를 표현함.
<kbd>	키보드 입력을 나타냄.
<label>	사용자 인터페이스(UI) 요소의 라벨(label)을 정의함.
<legend>	<fieldset> 요소의 캡션(caption)을 정의함.
<li>	HTML 리스트(list)에 포함되는 아이템(item)을 정의함.
<link>	해당 문서와 외부 소스(external resource) 사이의 관계를 정의함.
<main>	해당 문서의 <body> 요소의 주 콘텐츠(main content)를 정의함.
<map>	클라이언트 사이드 이미지맵(client-side image-map)을 정의함.
<mark>	형광펜으로 칠한 것처럼 하이라이트된(highlighted) 텍스트를 정의함.
<meta>	해당 문서에 대한 정보인 메타데이터(metadata)를 정의함.
<meter>	분수 값이나 범위(gauge) 내에서 특정 스칼라 값이 어느 정도인지를 표현함.
<nav>	다른 페이지 또는 현재 페이지의 다른 부분과 연결되는 네비게이션 링크(navigation links)들의 집합을 정의함.
<noscript>	클라이언트 사이드 스크립트(client-side scripts)를 사용하지 않도록 설정했거나, 스크립트를 지원하지 않는 브라우저를 위한 별도의 콘텐츠를 정의함.
<object>	외부 리소스의 종류에 따라 문서 내에서 처리하는 방식을 변경할 수 있는 임베디드 객체(embedded object)를 정의함.
<ol>	순서가 있는 HTML 리스트(list)를 정의함.
<optgroup>	옵션 메뉴를 제공하는 드롭다운 리스트(drop-down list)에서 사용되는 옵션들의 그룹을 정의함.
<option>	옵션 메뉴를 제공하는 드롭다운 리스트(drop-down list)에서 사용되는 하나의 옵션을 정의함.
<output>	스크립트 등에 의해 수행된 계산의 결과나 사용자의 액션에 의한 결과를 나타냄.
<p>	문단(paragraph)을 정의함.
<param>	<object> 요소에 의해 호출되는 플러그인의 매개변수(parameter)를 정의함.
<picture>	<img> 요소의 다중 이미지 리소스(multiple image resources)를 위한 컨테이너를 정의함.
<pre>	미리 정의된 형식(preformatted)의 텍스트를 정의함.
<progress>	작업의 진행률을 나타냄.
<q>	짧은 인용구를 정의함.
<rp>	루비 주석을 지원하지 않는 브라우저를 위한 대체 내용을 정의함.
<rt>	루비 주석에서 발음이나 설명을 나타내는 윗첨자를 정의함.
<ruby>	해당 문자의 발음이나 설명을 작은 크기의 윗첨자로 알려주는 루비 주석(ruby annotation)을 정의함.
<s>	텍스트 한가운데 라인을 추가하여 더 이상 정확하지 않거나 관련이 없는 텍스트를 표현함.
<samp>	컴퓨터 프로그램의 샘플 또는 인용 출력(output)을 나타냄.
<script>	자바스크립트와 같은 클라이언트 사이드 스크립트(client-side scripts)를 정의함.
<section>	HTML 문서에 포함된 독립적인 섹션(section)을 정의함.
<select>	옵션 메뉴를 제공하는 드롭다운 리스트(drop-down list)를 정의함.
<small>	글자 크기가 작은 텍스트를 정의함.
<source>	<audio> 요소나 <video> 요소에서 사용할 수 있는 다중 미디어 자원(multiple media resources)을 정의함.
<span>	HTML 문서에서 인라인 요소(inline-element)들을 하나로 묶을 때 사용함.
<strong>	해당 콘텐츠의 중요성이나 심각함, 긴급함 등을 강조함.
<style>	해당 HTML 문서의 스타일 정보를 정의함.
<sub>	아랫첨자(subscript) 텍스트를 표현함.
<summary>	<details> 요소에 의해 생성되는 대화형 위젯에서 기본적으로 보이는 제목을 정의함.
<sup>	윗첨자(superscript) 텍스트를 표현함.
<svg>	SVG 그래픽을 위한 컨테이너를 정의함.
<table>	데이터를 포함하는 셀(cell)들의 행과 열로 구성된 2차원 테이블을 정의함.
<tbody>	테이블에서 내용 콘텐츠(body content)들을 하나의 그룹으로 묶을 때 사용함.
<td>	테이블에서 하나의 셀(cell)을 정의함.
<template>	추가되거나 복사될 수 있는 HTML 요소들을 정의함.
<textarea>	사용자가 여러 줄의 텍스트를 입력할 수 있는 텍스트 입력 영역을 정의함.
<tfoot>	테이블에서 푸터 콘텐츠(footer content)들을 하나의 그룹으로 묶을 때 사용함.
<th>	테이블에서 제목이 되는 헤더 셀(header cell)들을 정의함.
<thead>	테이블에서 헤더 콘텐츠(header content)들을 하나의 그룹으로 묶을 때 사용함.
<time>	사람이 읽을 수 있는(human-readable) 형태의 날짜와 시간 데이터를 정의함.
<title>	해당 문서의 제목(title)을 정의함.
<tr>	테이블에서 셀들로 이루어진 하나의 행(row)을 정의함.
<track>	<audio>나 <video> 요소와 같은 미디어 요소를 위한 텍스트 트랙(track)을 정의함.
<u>	철자가 틀린 단어나 중국어의 고유 명사처럼 문체상 일반적인 텍스트와는 달라야만 하는 텍스트를 표현함.
<ul>	순서가 없는 HTML 리스트(list)를 정의함.
<var>	변수(variable)를 정의함.
<video>	무비 클립(movie clip)이나 비디오 스트림(video stream)과 같은 비디오를 정의함.
<wbr>	단어 중간에서 행바꿈될 수 있는(line-break) 위치를 정의함.

'🖥️ 비전공 야매파 > 🛹 HTML' 카테고리의 다른 글

[HTML 5] 시맨틱(Semantic) 태그 (1)	2023.11.28
[HTML 5] 특수문자를 사용하자 (1)	2023.11.14
[HTML 5] TAG.1 태그의 기본요소 (0)	2023.11.09

[HTML 5] TAG.2 TAG의 종류와 기능들

HTML5 태그 리스트

'🖥️ 비전공 야매파 > 🛹 HTML' 카테고리의 다른 글

댓글

티스토리툴바