강의에서 보지 못했거나 내가 별로 사용하지 않은 태그들 혹은 쓰임새를 제대로 알지 못하고 사용하고 있는 태그들을 위주로 정리해보려고 한다. 차근차근 추가할 예정
a*
<abbr> - 축약형이나 머리글자로만 된 단어를 정의할 때 사용
<abbr> 위에 마우스를 올리면 title 속성값이 나타난다.
<abbr title="United Nations">UN</abbr><address> - 문서나 글의 저자 또는 회사와 연락할 수 있는 정보를 명시할 때 사용
- <body> 요소 안의 <address> : 문서의 연락 정보를 나타냄
- <article> 요소 안의 <address> : 글에 대한 연락 정보를 나타냄
주로 이탤릭체로 표현되며, 대부분의 브라우저들은 <address> 요소의 위쪽과 아래쪽에 약간의 공백을 자동으로 삽입해 다른 텍스트와 구분한다.
<address>
인천광역시 미추홀구 주안동<br>
tel: 010-8282-2222
</address><area> - 이미지 맵에서 하이퍼링크가 연결된 영역을 정의할 때 사용
이미지에서 원하는 부분을 클릭했을 때 해당 링크로 이동할 수 있게 해준다.
- <map> 요소 안에서만 사용할 수 있다.
모델의 사진에서 가방을 클릭하면 가방 브랜드로 이동하는 등.. 유용하게 사용할 수 있을 것 같다.
<img src="https://fashionseoul.com/wp-content/uploads/2022/08/20220816_Codegraphy-1-683x1024.jpg" alt="코드그라피" usemap="#vending">
<!-- Image Map Generated by http://www.image-map.net/ -->
<map name="vending">
<area target="_blank" alt="hoshi CGP" title="hoshi CGP" href="https://www.musinsa.com/app/goods/2680400" coords="275,299,333,333,376,299,400,236,440,236,472,255,530,297,565,382,590,509,598,593,634,761,608,813,603,828,572,832,575,855,589,899,565,1023,350,1016,318,965,227,1022,4,1020,189,781,84,462,111,338,135,323,195,290,205,252,216,235,247,231,272,235,265,257,263,272" shape="poly">
</map><article> - 해당 문서나 페이지 또는 사이트와는 완전히 독립적으로 구성할 수 있는 요소를 정의할 때 사용한다.
- 포럼(forum) 포스트
- 블로그 포스트
- 보도 기사
- 논평 등
<article>
<h1>대회</h1>
<p>주최날짜</p>
<p>장소</p>
</article><audio> - 사운드를 정의할 때 사용
사용자의 브라우저가 오디오 요소를 지원하지 않을 경우 화면에 표시된다.
(Chrom의 경우 mp3, wav, Ogg를 모두 지원한다.)
<audio controls src="URL">이 문장은 오디오 태그를 지원하지 않을 때 표시된다.</audio>
220903
b*
<base> - 문서의 모든 상대 주소에 대한 기본 URL과 target 속성값을 정의할 때 사용
하나의 문서에는 하나의 <base>요소만 존재하며 반드시 <head> 안에 위치해야 한다.
<head>
<base href="/examples/src/">
</head><bdi> - Bi-Directional Isolation, 주위의 텍스트와 다른 방향으로 텍스트를 쓸 수 있도록 해줌
ex)> 아랍어의 경우 일부 언어에서 오른쪽부터 시작하여 왼쪽 방향으로 텍스트를 나열함.
관련 : 유니코드 양방향 알고리즘
#해당 태그 활용은 좀더 알아봐야할 것 같다.
<bdo> - Bi-Directional Override, 자식 요소의 텍스트 방향성을 정의할 때 사용
<bdo>의 dir 속성 기본값: auto - 부모 요소로부터 상속받지 않는다는 의미를 가짐
<p>왼쪽부터 오른쪽으로 쓰여집니다.</p>
<p><bdo dir="rtl">오른쪽부터 왼쪽으로 쓰여집니다.</bdo></p>#bdo태그와 속성값을 이용해 텍스트 방향이 바뀌는 것을 확인할 수 있음.
옛날에 주니버에서 동물농장 게임할 때 동물 진화시키는 게임 중에 이런식으로 말 반대로 쓰는게 있었음..
<blockquote> - 인용된 블록을 정의할 때 사용
해당 태그를 사용하면 대부분의 브라우저는 들여쓰기를 사용하여 표현한다.
+)짧은 길이의 인용구의 경우 <q> 요소를 사용하는 것이 좋다.
<q>를 사용할 경우 "인용구" 로 표현된다.
<blockquote>
I have a dream that my four little children will one day live in a nation
where they will not be judged by the color of their skin
but by the content of their character.
</blockquote>
<q>Elementary, my dear Watson.</q><button> 버튼 태그의 경우 자주 사용하였지만 태그 공부를 하면서 input 요소를 사용한 버튼과의 차이에 대해 알게 되었다.
- <button> 요소 안에는 텍스트나 이미지와 같은 콘텐츠 삽입 가능
- <input> 요소를 사용한 버튼에는 콘텐츠 삽입 불가능
220905 추가
c*
<canvas> - js와 같은 스크립트를 이용하여 그래픽 콘텐츠를 그릴 때 사용
- 그래픽 콘텐츠를 위한 컨테이너
- 그림 그리는 동작은 스크립트를 사용하여 구현
<canvas style="border: 1px solid gray;">
이 문장은 브라우저가 canvas를 지원하지 않을 때 나타난다.
</canvas><caption> - 테이블의 캡션(사진, 테이블, 삽화에 붙는 설명)을 정의할 때 사용
- 테이블 바로 위쪽에 가운데 정렬되어 표시됨 (css를 통해 변경 가능)
<table border="1">
<caption>
k-pop boy group
</caption>
<tr>
<td>BTS</td>
<td>Seventeen</td>
</tr>
</table><cite> - 책이나 음악, 영화 등 창작물, 저작물 등의 제목을 정의할 때 사용
- italic채로 나타남
<p><cite>
달러구트 꿈 백화점
</cite></p><code> - 컴퓨터 코드의 일부분을 나타낼 때 사용
<code>print("Hello World")</code><col> - <colgroup> 요소에 속하는 각 열의 속성을 정의할 때 사용
- 행이나 셀의 스타일을 반복하지 않고 열마다 다른 스타일을 적용하고 싶을 때 유용함
<table border="1">
<colgroup>
<col style="background-color: hwb(357 79% 3%);">
<col style="background-color: rgb(141,164,208);">
</colgroup>
<caption>k-pop boy group</caption>
<tr>
<td>Seven</td>
<td>teen</td>
</tr>
</table><colgroup> - 테이블에서 서식 지정을 위해 하나 이상의 열을 그룹으로 묶을 때 사용
- <table> 요소의 자식 요소
- caption> 요소보다 뒤에 위치
- <thead>, <tbody>, <tfoot>, <tr> 요소보다 앞에 위치
+) span 속성을 제외한 colgroup 태그의 대부분 속성을 HTML5에서 지원하지 않음.
220906 추가
d*
<data> - 기계가 읽을 수 있는(machine-readable) 형태의 값(value)을 덧붙여 나타날 때 사용
데이터 처리를 위해 기계가 읽을 수 있는 형태의 값과 사람이 읽을 수 있는 형태의 값 모두 제공
시간, 날짜 관련 데이터라면 <time> 요소를 사용해야함.
- value : 기계가 읽을 수 있는 형태의 값
- content : 사람이 읽을 수 있는 형태의 값
<data value="1">영희</data>
<data value="2">철수</data><datalist> - <input>요소에서 사용하기 위한 옵션들의 리스트를 미리 정의할 때 사용
- 사용자가 <input> 요소에 데이터를 입력할 때 미리 정의된 옵션을 드롭다운 리스트로 보여줌 (자동완성 기능 제공)
<input> 요소의 list속성값을 <datalist> 요소의 id 값으로 명시하면, <datalist>의 요소들을 <input>에서 사용할 수 있다.
<form action="#" method="get">
직업 : <input type="text" name="job" list="joblist"><br>
<datalist id="joblist">
<option value="designer"></option>
<option value="front-end"></option>
<option value="back-end"></option>
</datalist>
</form><dl> - 용어와 그에 대한 설명을 리스트 형식으로 정의할 때 사용
<dd> - <dl> 요소에서 설명 부분을 정의할 때 사용
<dt> - 용어나 이름을 나타낼 때 사용
<dl>
<dt>고양이</dt>
<dd>
- 귀여움
</dd>
</dl><del> - 텍스트 한가운데 라인을 추가하여 문서에서 삭제된 텍스트를 표현할 때 사용
- 문서에 대한 업데이트나 수정을 표현할 때 사용
<del>고양이</del><details> - 사용자가 직접 조작하여 보거나 숨길 수 있는 부가적인 세부사항을 명시할 때 사용
- 대화형 위젯을 정의할 때 사용된다.
- 다양한 콘테츠가 포함될 수 있다.
- open 속성이 설정되기 전까지는 화면에 보이지 않는다.
<details>
<summary>고양이의 특징</summary>
<p>귀엽다.</p>
</details>관련 태그 : <summary>
<dfn> - HTML에서 용어의 정의를 나타날 때 사용
HTML문서에서 용어를 처음 사용할 때 <dfn> 요소를 사용하여 용어를 정의한다.
이때 <dfn>의 부모 요소에는 해당 용어에 대한 정의나 설명이 반드시 포함되어야 한다.
<p><dfn>yolo</dfn>You Only Look Once - Real-Time Object Detection</p><dialog> - 대화 상자(dialog box)나 대화 윈도우(dialog window)를 정의할 때 사용
웹 페이지에서 팝업 대화 상자를 만들 수 있도록 해준다.
<dialog open>
<h2>고양이</h2>
<label for="cat">고양이를 키우고 있나요?</label>
<div><input type="checkbox">네</div>
<div><input type="checkbox">아니오</div>
</dialog><div> - 특정 영역이나 구획을 정의할 때 사용
여러 HTML 요소들을 하나로 묶어 특정 작업, 스타일 변경을 위한 일종의 컨테이너로 자주 사용된다.
CSS와 함께 레이아웃을 설정하는 데도 종종 사용된다.
220907 추가
e*
<em> - 강조된 텍스트를 표현할 때 사용 (emphasized text)
- <strong>과 중첩해 사용해 중요성이나 강조를 증가시킬 수 있다.
<p>고양이는<em>귀엽다!</em></p><embed> - 외부 어플리케이션이나 대화형 콘텐츠를 포함시킬 수 있는 컨테이너를 정의할 때 사용
<embed src="/고양이는 야옹.pdf">f*
<fieldset> - <form> 에서 연관된 요소들을 하나의 그룹으로 묶을 때 사용
- 그룹으로 묶은 요소들 주변으로 박스 모양의 선을 그려줌
- <legent>태그를 사용하면 <fieldset>의 캡션을 정의할 수 있다.
<form action="#" method="get">
<legend>인적사항</legend>
<fieldset>
이름 : <input type="text" name="myname"><br>
직업 : <input type="text" name="job">
<input type="submit" value="제출하기">
</fieldset>
</form><figure> - 삽화, 이미지와 같이 문서 흐름과 독립적인 콘텐츠를 정의할 때 사용
<figure>
<img src="image.png" alt="">
</figure><figcaption> - <figure>의 캡션을 정의할 때 사용
- <figure>의 첫번째, 마지막 자식 요소로만 올 수 있다.
<footer>
- 저자 정보
- 저작권 정보
- 연락처
- 사이트맵
- 페이지 맨 위로 되돌아갈 수 있는 TOP 버튼
- 연관 페이지 등
위 정보를 주로 포함.
여러 개의 <footer>가 포함될 수 있음.
220908 추가
h*
<header> - 문서나 섹션의 헤더를 정의할 때 사용
도입부에 해당하는 콘텐츠나 네비게이션 링크의 집합과 같은 정보를 포함하게 됨
여러 개의 <header>를 포함할 수 있음
- 제목 요소 (h1~h6)
- logo나 icon
- author
i*
<i> - 기본 텍스트와 다른 분위기나 음성을 위한 텍스트 영역을 정의할 때 사용
보통 이탤릭체로 표현됨.
- 전문용어
- 다른 언어의 관용구
- 문어체
<p><i>랜섬웨어</i>는 컴퓨터 시스템을 사용자가 정상적으로 사용하지 못하게 만들고 이를 볼모로 금전을 요구하고자 퍼뜨리는 악성파일이다.</p><ins> - 텍스트 아래쪽에 line을 추가하여 문서에 추가된 텍스트를 표현할 때 사용
<p>고양이는 <del>귀엽다</del></div> <ins>사랑스럽다.</ins></p>k*
kbd - 키보드 입력을 나타낼 때 사용
<p><kbd>ESC</kbd>는 escape key의 앞 3글자를 딴 것으로 '탈출하다'라는 뜻의 영어 낱말을 사용했다.</p>
220909 추가
l*
<label> - 사용자 인터페이스 항목의 설명을 나타낼 때 사용
<input>과 함께 사용하면 사용자가 입력해야하는 텍스트가 무엇인지 더 쉽게 이해할 수 있다.
관련된 label을 클릭해서 input 자체에 초점을 맞추거나 활성화를 시킬 수 있다.
- input의 id 속성값을 label의 for 속성값으로 넣으면 연관 시킬 수 있음
<label for="myname">이름</label>
<input type="text" id="myname"><br>
<label for="job">직업</label>
<input type="text" id="job"><legend> - 부모 <fieldset> 콘텐츠의 설명을 나타냄
이때 <legend>가 첫 번째 자식이어야 한다.
<fieldset>
<legend>Choose your favorite animal</legend>
<input type="radio" id="cat">
<label for="cat">고양이</label>
<input type="radio" id="dog">
<label for="dog">강아지</label>
<input type="radio" id="hamster">
<label for="hamster">햄스터</label>
</fieldset>m*
<main> - <body>의 주요 콘텐츠를 나타냄. 핵심 주제나 핵심 기능에 직접적으로 연결되어있는 콘텐츠
<map> - <area> 요소와 함께 이미지 맵을 정의할 때 사용
mark - 현재 맥락에 관련이 깊거나 중요해 표시하거나 하이라이트한 부분을 나타낼 때 사용
<p><mark>고양이</mark>는 세상에서 가장 귀엽다</p>meter - 특정 범위 내에서의 스칼라 값, 백분율 값을 나타냄
<label for="progress"></label>
<meter
id="progress"
min="0"
max="100"
low="30" heigh="70" optimum="80"
value="70"
>70/100</meter>n*
<nav> - 다른 페이지 또는 현재 페이지의 다른 부분과 연결되는 네비게이션 링크들의 집합을 정의할 때 사용
- 메뉴, 목차, 인덱스
문서의 모든 링크가 <nav> 안에 있을 필요는 없다. 이러한 요소들은 대개 <footer>에 들어가 있음
<nav>
<a href="html/#">html</a>
<a href="css/#">css</a>
<a href="js/#">js</a>
</nav><noscript> - client-side scripts(js, vbscript...)를 사용하지 않도록 설정했거나, 스크립트를 지원하지 않는 브라우저를 위한 별도의 콘텐츠를 정의할 때 사용
220911 추가
참고
https://www.image-map.net/
http://www.tcpschool.com/html-tags/intro
https://developer.mozilla.org/ko/docs/Web/HTML/Element/label
https://developer.mozilla.org/ko/docs/Web/Guide/HTML/Content_categories#%ed%94%8c%eb%a1%9c%ec%9a%b0_%ec%bd%98%ed%85%90%ec%b8%a0
