- PROGRAMMING

[HTML] HTML 태그란?





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>: 하단(저작권 정보 등)



seuheu

최근 게시물

[Linux] Rocky Linux란 무엇인가?

1. 개요 Rocky Linux는 엔터프라이즈 환경에서 사용되는 RHEL(Red Hat Enterprise Linux)과 완전히 호환되는 오픈소스 Linux…

%일 전

[Hardware] Supermicro IPMIView 설치 및 사용법

https://youtu.be/XwG4jBWakzQ 1. 개요 Supermicro IPMIView는 Supermicro에서 제공하는 IPMI (Intelligent Platform Management Interface) 기반의 통합 관리…

%일 전

[Rocky 8.10] KVM NIC Bonding + Bridge 구성하기

1. 개요 이 문서는 두 개의 NIC (enp5s0f0, enp5s0f1)를 bonding(active-backup) 방식으로 구성하고, 해당 bond 장치를 브리지(br0) 와 연결하여 KVM 가상머신에서…

%일 전

[Rocky] KVM에서 NVIDIA GPU Passthrough 시 RmInitAdapter failed 오류 해결하기

1. 개요 KVM에서 NVIDIA GPU를 Passthrough 설정하여 VM에 할당할 때 RmInitAdapter failed 오류를 자주 접하게…

%일 전

[Proxmox] pGPU와 vGPU 동시 사용 설정

1. 개요 Proxmox에서 pGPU(Physical GPU)와 vGPU(Virtual GPU)를 동일한 서버에서 동시에 사용하는 방법을 정리합니다. 2. 버전…

%일 전

[Proxmox] vGPU 설정

1. 개요 Proxmox에서 vGPU를 설정하는 방법을 정리합니다. 2. 버전 Proxmox 8.2 3. vGPU란? vGPU(Virtual GPU)는…

%일 전