HTML 태그 소개

a 태그에 href 속성으로 지정한 URL이 있으면 이 태그의 콘텐츠로 표시되는 하이퍼링크(줄여서 '링크')를 나타냅니다. 이 태그의 콘텐츠(예를 들어, 텍스트나 이미지 등)를 클릭하면 링크된 URL로 이동하게 됩니다.

abbr 태그는 'abbreviation(약어)'의 약어로, 약어나 줄임말을 나타내는 태그입니다. 이 태그를 사용하면 웹 페이지의 접근성과 이해성을 높일 수 있을 뿐만 아니라 HTML 문서를 더 읽기 쉽게 만들고 검색 엔진에 문서를 더 잘 인식시키는데 도움이 됩니다.

address 태그는 가장 가까운 조상이 article 또는 body 태그일 경우 그 태그에 대한 연락처 정보를 나타내는데 사용하며, 그 태그가 body인 경우 연락처 정보는 문서 전체에 적용됩니다.

article 태그는 문서, 페이지, 애플리케이션, 또는 사이트에서 독립적으로 배포 가능하거나 재사용할 수 있는 콘텐츠를 묶는 영역으로 사용됩니다. article 태그의 올바른 사용법에 대해 알아봅니다. 그리고, article 태그와 section 태그의 차이점에 대해 알아봅니다.

aside 태그의 올바른 이해와 사용법에 대해서 알아봅니다. aside 태그는 페이지 내 주요 콘텐츠와 직접적이지는 않지만 간접적으로 연관된 내용으로 구성된 별도의 부분을 나타냅니다. 이러한 부분은 주로 사이드바 혹은 문서의 내용과 관련된 추가 정보를 제공하는 작은 영역으로 표현됩니다.

audio 태그는 오디오 콘텐츠를 웹 페이지에 삽입할 때 사용합니다. 이 태그는 오디오 파일을 재생할 수 있는 미디어 플레이어를 제공하며, 다양한 속성을 활용하여 오디오의 재생 방식과 사용자 경험을 제어할 수 있습니다.

b 태그는 실용적인 목적으로 주의를 끌기 위한 텍스트 범위를 나타냅니다. 하지만, 이 태그는 텍스트에 추가적인 중요성이나 의미, 다른 어조나 분위기를 전달하지 않습니다.

blockquote 태그는 다른 출처에서 인용한 블록 형식으로 표시되는 여러 줄로 된 인용문 부분을 나타냅니다. blockquote 태그를 올바르게 이해하고 활용하는 방법을 살펴보고, blockquote 태그에서 사용되는 cite 속성에 대해서도 알아봅니다.

body 태그는 HTML 문서의 내용(contents)을 나타내는 태그입니다. 이 태그는 루트 요소인 html 요소의 두 번째 자식 요소이어야 하며, html 요소의 첫 번째 자식 요소는 head 요소입니다. HTML 문서에는 body 태그가 하나만 존재해야 합니다.

br 태그는 텍스트에서 줄을 바꾼다는 목적의 줄바꿈(line break)을 나타냅니다. 텍스트 블록에서 줄을 바꾼다는 하나의 명확한 목적만 가지고 있습니다.

button 태그는 내용물에 의해 레이블이 지정된 버튼을 나타냅니다. 이 태그는 웹 페이지에 사용자가 클릭할 수 있는 버튼을 만들고, 버튼 안에 포함된 텍스트나 이미지가 버튼의 기능을 표현합니다.

canvas 태그는 자바스크립트로 그리는 비트맵 그래픽 캔버스를 제공합니다. 이 태그는 단순히 그래픽 공간만을 제공하며, 실제 그래픽이나 애니메이션, 기타 시각적 이미지는 Canvas API나 WebGL API를 사용하여 그릴 수 있습니다.

cite 태그는 저작물의 제목(예를 들어, 책, 뮤지컬, 전시회, 판례보고서, 컴퓨터프로그램 등)을 의미하며, 인용 또는 인용 중인 저작물일 수도 있습니다. cite 태그는 인용된 작품의 제목 또는 출처를 나타내고, q 태그는 짧은 인용문을 나타낸다는 차이점이 있습니다.

code 태그는 컴퓨터 코드의 일부를 나타냅니다. 한 줄로 된 코드나 짧은 코드 조각 등에 적용하며, 대부분의 브라우저에서 기본적으로 고정폭(monospace) 글꼴로 텍스트를 표시합니다.

datalist 태그는 웹 양식 관련 컨트롤에서 사용할 수 있는 미리 정의된 옵션 데이터 목록을 나타냅니다. 이 목록은 사용자가 쉽게 옵션을 선택하거나 데이터를 입력할 수 있도록 권장하는 선택지를 제공하는 용도로됩니다.

dd 태그는 dt 요소의 설명, 정의 또는 값을 나타내는 태그이며, dd는 Description Details의 약자로 사용된 것입니다. 이 태그는 dl 요소의 콘텐츠로 사용해야 합니다.

del 태그는 HTML 문서에 삭제된(deleted) 텍스트 범위를 나타내는 데 사용됩니다. ins 태그를 사용하여 HTML 문서에서 추가된 텍스트 범위를 유사하게 나타낼 수 있습니다.

details 태그는 사용자가 선택하여 열고 닫을 수 있는 콘텐츠를 정의하는 태그입니다. details 태그는 일반적으로 추가 정보 또는 세부 정보를 제공하는 데 사용됩니다. details 태그에서 사용하는 open 속성에 대해서도 다룹니다.

dfn 태그는 현재 맥락이나 문장에서 정의(defining)하고 있는 용어를 나타냅니다. 다시 말해, 어떤 용어가 특정 문서에서 정의되거나 설명되는 부분을 표시하는 역할을 합니다. 이 태그는 주로 용어를 강조하고 해당 용어의 의미를 설명하는 데 사용됩니다.

div 태그는 레이아웃을 만들거나 콘텐츠를 나누는(division) 컨테이너로 사용하는 태그입니다. div는 division의 약어로 사용된 것입니다. div 태그의 올바른 이해와 사용 방법, 활용 예제와 role 속성으로 div 태그에 구조나 의미 부여하는 방법 등에 대해 알아봅니다.

dl 태그는 설명 목록(description list)를 나타내는 태그입니다. 이 태그는 이름(dt 요소를 사용하여 표시)과 이름에 대한 설명(dd 요소를 사용하여 제공)으로 구성된 그룹의 연관 목록입니다.

dt 태그는 설명 목록(dl 요소를 사용하여 나타냄)에 있는 이름과 이름에 대한 설명으로 구성된 그룹의 이름을 나타내는 태그이며, dt는 Description Term의 약자로 사용된 것입니다. 이 태그는 dl 요소의 콘텐츠로 사용해야 합니다.

em 태그는 주위 텍스트에 비해 문맥적으로 중요한 내용을 강조(stress emphasis)하는 데 사용되는 태그입니다. 이 태그는 주변 텍스트에 비해 문맥적으로 특히 중요한 내용을 강조하여, 사용자의 주의를 끄는 역할을 합니다.

fieldset 태그는 웹 양식 관련 컨트롤과 레이블(label 태그로 만든 이름표)을 그룹화해서 묶은 세트를 나타냅니다. 이 태그를 사용하면 양식의 구성을 명확하게 하고, 컨트롤 항목들을 시각적으로 구분하기 쉽게 만듭니다.

figcaption 태그는 오직 부모 요소인 figure 태그의 콘텐츠를 참조할 수 있는 캡션(설명)이나 범례을 나타내기 위해 사용하는 태그입니다. 선택적으로 사용할 수 있지만, 사용할 경우에는 figure 태그의 첫 번째 자식 요소나 마지막 자식 요소로만 사용되어야 합니다.

figure 태그는 주변 콘텐츠의 이해나 흐름과 관련된 이미지, 그림, 도표, 사진, 코드 목록 또는 기타 관련 콘텐츠 등의 독립된 콘텐츠를 나태내는 태그입니다. 선택적으로 figcaption 태그를 사용해서 이 콘텐츠를 참조할 수 있는 캡션(설명)을 추가할 수 있습니다.

footer 태그는 일반적으로 웹 페이지의 맨 하단에 있는 글로벌(혹은 전역) 푸터를 나타내거나, 글이나 콘텐츠 영역에 대한 작성자, 저작권 정보, 관련 문서에 대한 링크 등의 내용을 담습니다.

form 태그는 데이터를 제출하기 위한 웹 양식 영역을 나타냅니다. 이 영역에는 웹 양식 관련 컨트롤 요소들이 포함되며, 이 요소들의 데이터를 다루거나 전송할 수 있도록 정의하는 데 사용됩니다.

h에 숫자 1부터 6까지를 붙인 h1, h2, h3, h4, h5, h6 태그는 해당 영역의 제목(heading)을 나타냅니다. 이 태그들은 숫자로 지정된 제목 수준을 가지며, 이는 중첩된 영역의 계층적인 수준을 나타냅니다. h1 태그는 최상위 영역에 사용되는 제목이며, h2는 그 아래 수준, h3는 h2보다 한 단계 아래 수준의 제목 태그입니다.

head 태그는 HTML 문서의 문자 인코딩, 타이틀, 설명, 스타일시트, 스크립트 등 문서 정보(메타데이터)에 관련된 다양한 요소를 모아둔 태그입니다. 이러한 정보들은 화면에 표시되지는 않지만 브라우저, 검색 엔진 및 다른 웹 기술 등 기계적 처리를 위한 정보들입니다.

header 태그의 올바른 이해와 사용법에 대해서 알아봅니다. header 태그는 일반적으로 웹 페이지의 맨 위에 있는 글로벌 헤더나, 글이나 콘텐츠의 서두[서론/서문/도입부]를 나타낼 때 사용합니다.

hr 태그는 문단 수준 요소 사이의 주제 구분(예를 들어 장면 전환, 참고서의 섹션 내 다른 주제로의 이동 등)을 나타내는 태그입니다. hr은 대부분의 브라우저에서 가로로 구분선(horizontal rule)이 표시됩니다. hr은 이 horizontal rule의 약자입니다.

html 태그는 HTML 문서에서 마치 뿌리처럼 줄기와 같은 모든 요소가 시작되는 루트(root) 요소임을 나타내는 HTML의 최상위 태그입니다. 그래서 이 태그의 시작 태그는 HTML 문서의 시작을, 닫는 태그는 HTML 문서의 끝을 나타냅니다.

i 태그는 주위 텍스트에 비해서 다른 목적으로 구분되어야 하는 텍스트를 나타냅니다. 주로 일반적인 문체에서 벗어나 구분되는 다른 품질의 텍스트를 나타내는 경우에 사용됩니다.

iframe 태그는 웹 페이지 내에 독립적인 틀(inline frame)을 만들어 다른 문서를 삽입하여 탐색할 수 있게 하는 태그입니다. 예를 들어, 유튜브 동영상을 웹 페이지에 삽입하거나, 구글 지도를 삽입하는 데 사용할 수 있습니다.

img 태그는 이미지(image)를 의미하는 태그로, 웹 페이지에 이미지를 삽입할 때 사용합니다. 이미지를 삽입하려면 이 태그의 필수 속성인 src 속성의 값으로 삽입하려는 이미지의 경로(URL)를 지정합니다.

input 태그는 사용자로부터 데이터를 입력받기 위한 대화형 컨트롤을 나타냅니다. 이 태그는 type 속성 값에 따라 다양한 컨트롤 유형을 제공하며, type 속성 외에도 여러 가지 속성을 통해 입력 필드의 동작을 세부적으로 조정할 수 있습니다.

ins 태그는 HTML 문서에 추가된(inserted) 텍스트 범위나 삽입된 콘텐츠를 나타내는 데 사용됩니다. del 태그를 사용하여 HTML 문서에서 삭제된 텍스트 범위를 유사하게 나타낼 수 있습니다. ins 태그를 올바르게 이해하고 활용하는 방법을 살펴보고, ins 태그에서 사용되는 cite 속성과 datetime 속성에 대해서도 알아봅니다.

입력 장치(키보드뿐만 아니라 음성 명령, 마우스 클릭 등 다양한 입력 장치)로부터의 사용자의 텍스트 입력을 나타내는 태그입니다. 'keyboard(키보드)'의 약어로 만들어진 kbd 태그는 주로 사용자가 입력하는 키보드에서 어떤 키인가를 나타냅니다.

label 태그는 사용자 인터페이스를 제공하는 컨트롤 요소들의 레이블(label, 이름표)를 나타냅니다. 이 태그는 컨트롤 요소(레이블 가능 요소)들과 함께 사용하며, 가독성과 웹 접근성을 높이는 역할을 합니다.

legend 태그는 오직 부모 요소인 fieldset 태그로 그룹화해서 세트로 묶은 요소들에 대한 캡션(간단한 제목이나 설명)을 나타내기 위해 사용하는 태그입니다. 선택적으로 사용할 수 있지만, 사용할 경우 fieldset 태그의 첫 번째 자식요소로만 사용되어야 합니다.

li 태그는 목록의 항목을 나타내는 태그입니다. li는 목록의 항목이라는 뜻의 List Item의 약자로 사용된 것입니다. 이 태그의 상위 요소가 ol, ul 또는 menu 요소인 경우 해당 요소에 대해 정의된 대로 이 태그는 상위 요소 목록의 항목을 나타냅니다.

link 태그는현재 문서와 외부 리소스(예: 스타일시트, 아이콘, 폰트, 관련 문서, RSS 피드 등 다양한 종류의 리소스) 간의 링크 관계을 지정하여 연결하는 태그입니다. 이때, rel 속성으로 외부 리소스와의 링크 관계를 지정하며, href 속성으로 연결할 외부 리소스의 위치를 지정합니다.

main 태그는 HTML 문서의 주요 내용(dominant contents)을 나타냅니다. 주요 내용은 문서의 중심 주제 또는 응용 프로그램의 중심 기능과 직접 관련되거나 확장되는 내용으로 구성됩니다. HTML 문서에는 hidden 속성이 지정되지 않은 두 개 이상의 main 태그가 없어야 합니다.

mark 태그는 한 문서 내에서 관련성이 있는 특정 부분을 참조 목적으로 표시하거나 강조하는 텍스트 구간을 나타냅니다. 이 구간은 다른 문맥에서의 관련성 때문에 강조 처리됩니다. mark 태그의 올바른 이해와 사용 방법에 대해 알아봅니다.

menu 태그는 순서가 지정되지 않는 항목의 툴바와 같은 명령 목록를 나타내고, 각 항목인 li 태그는 사용자가 수행하거나 활성화할 수 있는 명령을 나타내기 위해 고안되었지만, 대부분의 브라우저에서는 ul 태그와 동일하게 처리합니다.

meta 태그는 title, base, link, style, script와 같은 HTML의 특정 목적을 위한 메타데이터 태그에서 다룰 수 없는 다양한 메타데이터를 나타내는 태그입니다.

meter 태그는 알려진 범위 내의 정량적인 측정값 또는 분수 값을 나타냅니다. 예를 들어 디스크 사용량, 시험 점수, 용량 등 최솟값과 최댓값이 설정된 범위 내의 상태를 가로막대형의 측정기(gauge)처럼 브라우저에 시각적으로 표시합니다.

nav 태그는 다른 웹 페이지로 연결하거나, 현재 웹 페이지의 콘텐츠 내부로 연결되는 탐색(Navigation)을 위한 링크(links)가 있는 영역을 나타냅니다. 일반적인 예로는 메뉴, 목차, 색인 등이 있습니다.

noscript 태그는 브라우저에서 현재 HTML 문서에서 실행되는 스크립트를 지원하지 않거나, 브라우저에서 스크립트를 사용할 수 없도록 비활성으로 설정한 사용자를 고려하여 스크립트를 대체할 수 있는 콘텐츠를 나타내는 태그입니다.

ol 태그는 순서가 지정되어 있는 항목의 목록를 나타내는 태그입니다. ol은 순서를 변경하면 그 의미가 실질적으로 변경된다는 의미인 Ordered List(순서가 지정된 목록)의 약자로 사용된 것입니다. ol 태그는 순서가 중요한 항목들을 그룹화하기 위해 사용됩니다.

optgroup 태그는 select 태그의 공통 레이블(이름)이 있는 option 태그의 그룹을 나타냅니다. 이 태그로 관련된 option 태그들을 묶어 그룹화하면, 사용자에게 더욱 체계적인 옵션 목록을 제공할 수 있습니다.

option 태그는 옵션 목록을 제공하는 select, datalist 태그의 옵션 항목을 나타냅니다. select 태그 내에서는 option 태그들을 optgroup 태그로 그룹화할 수 있습니다. 이 태그는 주로 사용자에게 옵션의 선택지를 제공하는 데 사용합니다.

output 태그는 웹 애플리케이션이 수행한 계산 결과나 사용자의 웹 양식 관련 컨트롤을 통한 다양한 상호작용의 결과에 대한 출력을 나타냅니다.

p 태그는 문단(paragraph)을 나타내는 태그입니다. 더불어 HTML은 문단에 다양한 의미를 부여하기 위해 여러 태그를 제공합니다. 예를 들면, ins나 address와 같은 태그들이 그러한 역할을 합니다.

picture와 source 태그는 이미지를 더욱 효과적으로 제어하고 다양한 미디어 장치 및 화면 크기에 따라 최적화된 이미지를 제공하기 위해 사용되는 태그입니다. 이 태그들은 반응형 웹 디자인과 이미지 최적화에 유용하게 사용됩니다.

pre 태그는 작성한 서식을 유지한 텍스트 블록을 나타낼때 사용합니다. 즉, 이 태그를 사용하면 들여쓰기, 줄바꿈, 공백 등 작성한 그대로의 원본 서식이 브라우저에 표시됩니다.

progress 태그는 작업 완료의 진행 상황을 나타내며, 브라우저에서 가로 막대 형태로 표시합니다. 예를 들어, 파일 업로드나 다운로드, 설치 등의 진행률을 보여줄 때 사용됩니다.

q 태그는 둘러싼 텍스트가 다른 출처에서 인용된 일부 구문 내용을 나타내며, 짧은 인라인 인용문에 사용합니다. 대부분의 브라우저에서는 이 텍스트의 앞과 뒤에 따옴표를 붙여서 인용문임을 표시합니다.

samp 태그는 다른 프로그램 또는 컴퓨팅 시스템의 샘플 출력이나 인용된 출력을 나타냅니다. 주로 컴퓨터가 생성하는 출력 내용에 대한 샘플를 나타내거나, 시스템 메시지나 이전에 실행된 프로그램의 결과를 인용하는 데 적합합니다.

script 태그는 HTML 문서에서 사용 가능한 클라이언트 스크립트나 데이터 블록을 포함하기 위한 태그입니다. 자바스크립트 코드를 포함해서 동적인 HTML이나 스타일을 구현하기 위해 가장 많이 사용됩니다. 이 태그는 화면에 표시되지 않습니다.

section 태그는 문서, 애플리케이션의 일반적인 섹션을 나타냅니다. 더 적합한 의미를 가진 태그가 없을 때 논리적인 측면에서 주제별 콘텐츠 그룹을 나타내는데 사용합니다.

select 태그는 옵션 메뉴를 제공하는 컨트롤을 나타냅니다. 흔히 '드롭다운 목록' 또는 '셀렉트 박스'라고 부르는 이 컨트롤은 사용자가 원하는 옵션을 선택할 수 있는 방법입니다. 사용자는 이 컨트롤로 원하는 옵션을 선택할 수 있습니다.

small 태그는 타이포그래피적 규칙이나 관례상 작은 텍스트로 표현되었던 법적 고지, 주의 사항 등의 사이드 코멘트(the side comment, 덧붙임 글)를 나타냅니다. 대부분의 브라우저에서 작은 크기의 글자로 표현됩니다.

span 태그는 자체적으로 특별한 의미가 전혀 없는 인라인 컨테이너로 단순 텍스트나 인라인 콘텐츠 등에 스타일이나 속성, 스크립트를 위한 범위를 위해 감싸주는 태그입니다.

strong 태그는 해당 내용의 중요성, 심각성 또는 긴급성을 강하게 강조(strong importance)하는 데 사용하는 태그입니다. 이 태그는 제목, 캡션, 문단 등에서 중요한 부분을 명쾌하게 강조하여 일반적인 텍스트와 구별될 수 있게 해줍니다.

style 태그는 HTML 문서에서 스타일시트를 작성할 수 있는 영역을 나타내는 태그입니다. 이 영역에는 스타일시트 언어로 작성된 스타일 코드와 주석만을 포함할 수 있습니다. style 태그는 HTML에서 스타일을 지정하는 여러 방법 중 하나입니다.

sub 태그는 아래 첨자(subscript)를 나타내는 태그입니다. 이 아래 첨자는 작은 텍스트로 표시되며 기준선을 낮춰 렌더링됩니다. 그러나 sub 태그는 단순한 시각적 표현을 위한 것이 아니라, 타이포그래피적 규칙이나 관례상 아래 첨자로 나타내는 각주 번호, 변수 첨자, 화학식 등의 의미를 맞추기 위해 사용해야 합니다.

summary 태그는 details 태그로 생성된 대화형 웨젯의 세부 정보를 요약하거나 제목을 정의하는 역할을 합니다. 이 태그는 사용자가 세부 정보를 접을 때나 펼칠 때 보이는 제목 또는 요약 내용을 정의하는 데 사용됩니다.

sup 태그는 위 첨자(superscript)를 나타내는 태그입니다. 이 위 첨자는 작은 텍스트로 표시되며 기준선을 높여 렌더링됩니다. 그러나 sup 태그는 단순한 시각적 표현을 위한 것이 아니라, 타이포그래피적 규칙이나 관례상 위 첨자로 나타내는 지수나 서수 등의 의미를 맞추기 위해 사용해야 합니다.

template 태그는 자바스크립트를 사용하여 동적으로 HTML 문서에 복제하고 추가할 수 있는 콘텐츠(탬플릿 콘텐츠)를 보관하는 영역을 나타냅니다. 렌더링 시에는 화면에 표시되지 않지만 자바스크립트로 동적 조작이 가능합니다.

textarea 태그는 여러 줄로 된 텍스트 입력 필드를 나타냅니다. 사용자가 댓글 작성, 리뷰 작성, 간단한 메모 작성, 소스 코드 입력 등 여러 줄의 일반 텍스트를 쉽게 입력할 수 있도록 하는 데 유용합니다.

time 태그는 특정 시간 또는 날짜를 나타내는 데 사용됩니다. time 태그의 datetime 속성을 사용하면 브라우저나 검색 엔진은 날짜와 시간 데이터를 이해하고, 더 유용한 기능을 제공할 수 있습니다.

title 태그는 HTML 문서의 타이틀(title, 제목이나 이름)을 나타내는 태그입니다. 이 타이틀은 화면에서 표시되지는 않지만 브라우저의 제목 표시줄이나 페이지 탭에 보이는 제목으로 사용되며, 시각장애인을 위한 스크린 리더에서도 읽을 수 있어 HTML 문서에서 필수적으로 제공해야 하는 정보입니다.

u 태그는 명시적이지만 텍스트로 설명되지 않는 비언어적 주석이 있는 텍스트를 나타냅니다. 이는 문맥상 가진 의미나 특성이 별도의 설명 없이도 주석처럼 시각적으로 구분되거나 표현될 수 있는 텍스트의 범위를 가리킵니다.

ul 태그는 순서가 지정되지 않는 항목의 목록를 나타내는 태그입니다. ul은 순서를 변경해도 그 의미가 실질적으로 변경되지 않는다는 의미인 Unordered List(정렬되지 않은 목록)의 약자로 사용된 것입니다. ul 태그는 순서가 중요하지 않는 항목들을 그룹화하기 위해 사용됩니다.

var 태그는 변수를 나타냅니다. 이는 수학식이나 프로그래밍 맥락에서 실제 변수이거나 상수를 나타내는 식별자이거나 물리량을 나타내는 기호, 함수 매개변수이거나 산문에서 자리 표시자로 사용되는 용어일 수 있습니다.

video 태그는 비디오 콘텐츠를 웹 페이지에 삽입할 때 사용합니다. 이 태그는 비디오 파일을 재생할 수 있는 미디어 플레이어를 제공하며, 다양한 속성을 활용하여 비디오의 재생 방식과 사용자 경험을 제어할 수 있습니다.