HTML 태그란?
- HTML(하이퍼텍스트 마크업 언어, HyperText Markup Language)은 웹 페이지를 구성하는 언어이며, HTML 태그(Tag)는 문서의 구조를 정의하는 기본 요소입니다.
- 태그는
<태그이름>형태로 작성되며, 대부분 시작 태그(<태그이름>)와 종료 태그(</태그이름>)가 한 쌍을 이룹니다.
HTML 태그의 종류
기본 구조
HTML 태그는 기능에 따라 여러 유형으로 나뉩니다.
<html>: HTML 문서의 시작과 끝을 나타냄<head>: 문서의 메타 정보(제목, CSS, JS, 인코딩 등)를 포함<title>: 웹 페이지 제목 지정<body>: 실제 웹 페이지의 콘텐츠를 포함
텍스트 관련 태그
텍스트를 표시하는 태그
<h1> ~ <h6>: 제목(Heading) 태그 (<h1>이 가장 크고<h6>이 가장 작음)<p>: 단락(Paragraph) 태그<br>: 줄 바꿈(Break)<hr>: 수평선(Horizontal Rule)<b>: 굵은 글씨(Bold)<i>: 기울임(Italic)<u>: 밑줄(Underline)<strong>: 의미적으로 중요한 강조 (굵게 표시됨)<em>: 의미적으로 강조된 글자 (기울어짐)<mark>: 형광펜 효과(텍스트 강조)<small>: 작은 글씨
링크 & 미디어 태그
<a href="URL">: 하이퍼링크(Anchor) 생성<img src="경로" alt="설명">: 이미지 삽입<video>: 비디오 삽입<audio>: 오디오 삽입<iframe src="URL">: 다른 웹페이지 포함
목록 태그
<ul>: 순서 없는 목록(Unordered List)<ol>: 순서 있는 목록(Ordered List)<li>: 목록 항목(List Item)
표(Table) 관련 태그
<table>: 표 생성<tr>: 행(Row)<th>: 표 헤더(Header)<td>: 표 데이터(Data)
입력 폼(Form) 태그
사용자로부터 입력을 받을 때 사용
<form>: 입력 폼(Form) 정의<input>: 사용자 입력 필드<textarea>: 여러 줄 입력 필드<button>: 버튼 생성<select>: 드롭다운 목록<option>: 드롭다운 항목<label>: 입력 요소와 연결되는 라벨
시맨틱(Semantic) 태그
HTML5에서 추가된 의미 있는 태그들로, 코드의 가독성을 높이고 검색엔진 최적화(SEO)에 도움을 줌
<header>: 머리말(사이트 로고, 내비게이션 포함)<nav>: 내비게이션 영역<section>: 문서의 섹션<article>: 독립적인 콘텐츠 블록<aside>: 사이드바 또는 부가 정보<footer>: 하단(저작권 정보 등)