기본 구조
HTML 전체를 크게 나누는 태그이다.
<!DOCTYPE html> |
HTML 문서를 표준 모드로 렌더링하도록 브라우저에 선언하는 태그로, HTML5에서는 단순 선언용으로 사용된다. |
<html> |
HTML 문서의 루트 요소로, 전체 HTML 콘텐츠를 감싸는 최상위 태그이다. |
<head> |
문서의 메타데이터를 포함하는 영역으로, 제목, 스타일시트, 스크립트 등을 정의한다. |
<body> |
브라우저에 표시될 실제 콘텐츠, 즉 텍스트, 이미지, 링크 등을 포함하는 영역이다. |
메타데이터 태그 (Metadata Tag)
HTML 문서에 대한 정보를 제공하는 태그로, 브라우저나 검색 엔진이 문서를 해석하는 데 사용되며, 주로 <head> 내부에 포함된다.
<meta> |
문서의 메타데이터를 정의하는 요소로, 문자 인코딩, 뷰포트 설정, SEO 관련 정보 등을 포함할 수 있다. |
<base> |
문서 내 모든 상대 URL의 기준이 되는 기본 URL을 지정한다. 하나의 문서에 하나만 사용할 수 있다. |
<link> |
현재 문서와 외부 리소스를 연결하는 요소로, 주로 CSS 파일을 참조하거나 파비콘(favicon)을 설정하는 데 사용된다. |
<style> |
내부 스타일시트를 정의하는 요소로, 문서 내에서 CSS 스타일을 직접 작성할 수 있다. 일반적으로는 CSS 파일을 따로 설정하여 <link> 태그를 사용한다. |
<title> |
브라우저의 제목 표시줄이나 탭에 표시될 문서의 제목을 정의하는 요소로, 텍스트만 포함할 수 있다. |
스크립트 태그 (Script Tag)
<script> |
JavaScript 코드를 문서에 포함하거나 외부 JavaScript 파일을 불러올 때 사용되는 태그이다. |
시맨틱 태그 (Semantic Tag)
HTML 문서의 구조와 의미를 명확하게 정의하는 태그들로, 페이지의 내용을 더 쉽게 이해할 수 있게 돕는다. 이러한 태그들은 검색 엔진 최적화 및 웹 접근성 향상에 도움을 주며, 코드의 가독성도 높여준다. 주로 <body> 내부에 포함된다.
아래 태그들은 시맨틱 태그 중 레이아웃 관련된 부분만 모아놓은 것이다.
<main> |
문서의 주요 콘텐츠를 정의하는 태그로, 페이지의 핵심 내용을 담고 있으며 문서 내에서 한 번만 사용할 수 있다. |
<header> |
문서나 섹션의 상단을 나타내며, 제목, 내비게이션 링크, 작성자 정보 등을 포함한다. |
<nav> |
내비게이션 링크를 정의하는 태그로, 메뉴, 목차, 색인 등을 포함하며, 페이지 내의 탐색을 돕는다. |
<aside> |
주 콘텐츠와 간접적으로 관련된 콘텐츠를 담는 태그로, 사이드바, 인용, 참고 자료 등을 포함한다. |
<article> |
독립적인 콘텐츠를 나타내는 태그로, 뉴스 기사, 블로그 글, 포럼 글 등 독립적으로 배포하거나 재사용 가능한 정보를 포함한다. |
<section> |
문서 내에서 독립적인 주제나 섹션을 나타내며, 관련 콘텐츠를 논리적으로 그룹화하는 데 사용된다. |
<footer> |
문서나 섹션의 하단을 나타내며, 저작권 정보, 작성자, 관련 문서 링크 등을 포함한다. |
레이아웃 태그 (Layout Tag)
시맨틱 태그가 아닌 레이아웃 태그이다.
<div> |
문서 내에서 구획을 나누는 블록 레벨 요소로, 주로 레이아웃을 구성할 때 사용된다. 특정 스타일이나 스크립트 적용을 위한 컨테이너 역할을 한다. |
<span> |
문서 내에서 구획을 나누는 인라인 요소, 즉 <div> 의 인라인 버전이다. 블록 레벨 요소와 달리, 한 줄 내에서만 영향을 미친다. |
텍스트 태그 (Text Tag)
<hgroup> |
제목(<h1>~<h6>)과 다른 관련된 콘텐츠를 그룹으로 묶는 태그이다. |
<h1>, <h2>, <h3>, <h4>, <h5>, <h6> |
제목을 정의하는 태그들로, <h1>이 가장 큰 제목, <h6>가 가장 작은 제목이다. 문서에서 제목 계층을 설정할 때 사용된다. |
<p> |
문단을 정의하는 태그로, 텍스트 블록을 구분한다. |
<b> |
텍스트를 굵게 표시한다. 단순히 비주얼적으로 굵은 텍스트를 제공한다. |
<i> |
텍스트를 이탤릭체로 표시한다. 보통 외국어, 기술 용어 등을 강조할 때 사용된다. |
<strong> |
텍스트를 강하게 강조하는 태그로, 일반적으로 중요한 내용을 나타낼 때 사용된다. |
<em> |
텍스트를 강조하는 태그로, 보통 <strong>보다 약한 강조를 나타낸다. |
<ins> |
문서에 새로 추가된 내용을 나타내며, 일반적으로 밑줄이 그어진 형태로 표시된다. |
<del> |
문서에서 삭제된 내용을 나타내며, 취소선이 그어진 형태로 표시된다. |
<s> |
더 이상 유효하지 않거나, 잘못된 내용을 표시하며 취소선이 그어진다. |
<u> |
텍스트에 밑줄을 표시한다. 주로 철자 오류를 지적하거나 강조할 때 사용된다. |
<sup> |
텍스트를 위첨자(superscript) 형태로 표시한다. |
<sub> |
텍스트를 아래첨자(subscript) 형태로 표시한다. |
<small> |
텍스트를 작게 표시한다. 주로 저작권 정보나 주석 등을 표시할 때 사용된다. |
<br> |
강제 줄 바꿈을 생성하는 태그이다. 문단 내에서 개행을 추가할 때 사용된다. |
<hr> |
수평선(가로줄)을 그리는 태그로, 주로 콘텐츠의 구분을 나타낼 때 사용된다. |
<abbr> |
약어를 나타내는 태그로, 마우스를 대면 약어의 풀네임이 표시된다. |
<wbr> |
긴 단어나 텍스트에서 자동으로 줄 바꿈을 할 수 있는 위치를 정의하는 태그이다. |
<blockquote> |
긴 인용구를 나타내며, 기본적으로 들여쓰기가 적용된다. |
<pre> |
서식이 있는 텍스트를 나타내며, 공백과 줄바꿈을 그대로 유지한다. 보통 코드나 출력물을 표시할 때 사용된다. |
<var> |
변수를 나타낼 때 사용되는 태그이다. |
<samp> |
샘플 출력, 프로그램의 출력을 나타낼 때 사용되는 태그이다. |
<kbd> |
키보드 입력을 나타낼 때 사용되는 태그이다. |
<code> |
코드를 나타낼 때 사용되는 태그이다. |
<ruby> |
한자와 그에 대한 발음을 나타내기 위한 태그로, 일본어의 후리가나 표기에 사용된다. |
<mark> |
텍스트에 하이라이트 효과를 주어 강조하는 태그이다. |
목록 태그 (List Tag)
<ul> |
순서가 없는 목록을 나타낼 때 사용되는 태그이다. 각 항목은 <li> 태그로 정의된다. |
<ol> |
순서가 있는 목록을 나타낼 때 사용되는 태그이다. 각 항목은 <li> 태그로 정의되며, 목록 항목은 숫자나 다른 형식으로 순서가 매겨진다. |
<dl> |
용어 목록을 정의하는 태그이다. <dt>로 용어를 정의하고, <dd>로 정의를 설명한다. |
표 태그 (Table Tag)
<table> |
표를 생성하는 태그로, 행(<tr>)과 열(<td>, <th>)로 구성된다. |
하이퍼링크 및 멀티미디어 태그 (Hyperlink and Multimedia Tag)
<a> |
링크를 정의하는 태그로, 다른 웹 페이지나 리소스로 이동할 수 있도록 한다. href 속성을 사용하여 링크 주소를 지정한다. |
<img> |
웹 페이지에 이미지를 삽입하는 태그이다. src 속성을 사용하여 이미지의 경로를 지정한다. |
<svg> |
스케일러블 벡터 그래픽(SVG)을 정의하는 태그이다. XML 형식으로 벡터 이미지를 표시할 수 있다. |
<picture> |
다양한 이미지 파일 포맷을 제공하며, 화면 크기에 따라 다른 이미지를 로드하는 등의 조건을 지정할 수 있는 태그이다. |
<audio> |
음악이나 음성 파일을 웹 페이지에 삽입하여 재생할 수 있는 태그이다. <source> 태그를 사용하여 다양한 오디오 파일 포맷을 지원할 수 있다. |
<video> |
영상 파일을 웹 페이지에 삽입하여 재생할 수 있는 태그이다. <source> 태그를 사용하여 다양한 비디오 파일 포맷을 지원할 수 있다. |
<canvas> |
스크립트를 사용하여 그래픽을 그리는 태그이다. 주로 JavaScript를 사용하여 동적 이미지를 생성하는 데 사용된다. |
<progress> |
작업의 진행 상황을 표시하는 태그이다. value와 max 속성을 사용하여 진행률을 설정한다. |
외부 페이지 삽입 태그 (Embedded Tags)
<iframe> |
웹 페이지나 다른 콘텐츠를 현재 페이지에 삽입할 때 사용된다. |
<embed> |
외부 애플리케이션이나 플러그인을 웹 페이지에 삽입하는 태그이다. 일반적으로 PDF, Flash 등 다양한 외부 리소스를 삽입할 때 사용된다. |
<object> |
외부 문서나 애플리케이션을 웹 페이지에 삽입하는 태그이다. 주로 플러그인이나 미디어 파일을 삽입할 때 사용된다. data와 type 속성으로 삽입할 파일과 타입을 지정할 수 있다. |
폼 태그 (Form Tag)
<form> |
사용자로부터 데이터를 입력받기 위해 폼을 정의하는 태그이다. 폼 데이터는 서버로 전송되며, action 속성에 서버의 URL을, method 속성에 전송 방식을 설정할 수 있다. |
<input> |
사용자가 데이터를 입력할 수 있는 입력 필드를 생성하는 태그이다. type 속성으로 다양한 입력 텍스트, 라디오 버튼, 체크박스 등을 지정할 수 있다. |
<output> |
사용자가 입력한 데이터를 기반으로 계산된 결과를 표시하는 태그이다. 주로 자바스크립트와 함께 사용된다. |
<textarea> |
여러 줄의 텍스트를 입력할 수 있는 다중 행 텍스트 입력 필드를 만든다. |
<button> |
사용자가 클릭할 수 있는 버튼을 생성하는 태그이다. 버튼은 폼 제출을 위한 기능을 포함하거나, 자바스크립트 기능을 실행할 때 사용된다. |
<datalist> |
자동 완성 기능을 제공하는 입력 필드를 정의하는 태그이다. <input>와 함께 사용된다. |
<select> |
드롭다운 목록을 생성하는 태그이다. <option> 태그와 함께 사용된다. |
<option> |
<select> 태그 내부에서 선택할 수 있는 항목을 정의하는 태그이다. |
<fieldset> |
폼의 여러 요소들을 그룹화하는 태그이다. 보통은 관련된 항목들을 묶을 때 사용된다. |
<legend> |
<fieldset> 내부에서 해당 그룹의 제목을 나타내는 태그이다. |
<label> |
폼 요소에 대한 설명을 제공하는 태그이다. for 속성을 사용해 특정 입력 요소와 연관시킬 수 있다. |
'Language > HTML & CSS' 카테고리의 다른 글
| [CSS] CSS 적용 방법 및 적용 우선순위 (0) | 2025.03.04 |
|---|---|
| [HTML] 클래스(class) 및 아이디(id) (0) | 2025.02.28 |
| [HTML] HTML 간단 소개 (0) | 2025.02.28 |
