데브코스 웹풀스택 과정/TIL

[8기 9회차] 0904 자주 쓰는 HTML 태그 정리

thinktank911 2025. 9. 4. 10:13
<html> : HTML 문서의 최상위 요소인 루트(root) 요소. 모든 HTML 요소는 <html> 요소 내에 포함되어야 한다.

<head> : HTML 문서의 메타데이터와 헤더 정보를 정의. 브라우저에게 문서에 대한 정보를 전달하거나 
         외부 스타일시트, 자바스크립트 파일 등을 연결할 수 있다.

<body> : HTML 문서의 본문 내용을 정의. 웹 페이지에 실제로 표시되는 내용이 이 부분에 작성되며, 
         텍스트, 이미지, 링크, 표, 양식 등 다양한 요소들이 포함된다.

<title> : HTML 문서의 타이틀(제목이나 이름)을 나타내는 태그

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

<div> : 레이아웃을 만들거나 콘텐츠를 나누는(division) 컨테이너로 사용하는 태그

<a> : 링크 걸기 요소. href 속성으로 지정한 URL이 있으면, 이 태그의 콘텐츠로 표시되는 하이퍼링크

<script> : HTML 문서에서 사용 가능한 클라이언트 스크립트나 데이터 블록을 포함하기 위한 태그.
           자바스크립트 코드를 포함해서 동적인 HTML이나 스타일을 구현하기 위해 가장 많이 사용

<link> : 현재 문서와 외부 리소스(예: 스타일시트, 아이콘, 폰트, 관련 문서, RSS 피드 등 다양한 종류의 리소스) 간의 
         링크 관계를 지정하여 연결하는 태그

<img> : 이미지(image)를 의미하는 태그로, 웹 페이지에 이미지를 삽입할 때 사용
    <img src="earth.jpg" alt="우주에서 둥글고 푸른빛으로 빛나는 지구">

<span> : 단순 텍스트나 인라인 콘텐츠 등에 스타일이나 속성, 스크립트를 위한 범위를 위해 감싸주는 태그

<p> : 문단(paragraph)을 나타내는 태그

<li> : 목록(list)의 항목(items)을 나타내는 태그
       이 태그의 상위 요소가 <ol>, <ul> 또는 <menu> 요소인 경우 해당 요소에 대해 정의된 대로 이 태그는 
       상위 요소 목록의 항목을 나타냄

        <p>우리동네 분식점 메뉴중에서 맛있는 순서입니다.</p>
        <ol>
            <li>라면</li>
            <li>김밥</li>
            <li>돈까스</li>
            <li>김치볶음밥</li>
        </ol>

<ul> : 순서가 지정되지 않는 항목(items)의 목록(list)를 나타내는 태그

<style> : HTML 문서에서 CSS 스타일을 작성할 수 있는 영역을 나타내는 태그

<br> : 텍스트에서 줄바꿈(line break)

<h2> : 해당 영역의 제목(heading)

<input> : 사용자로부터 데이터를 입력받기 위한 대화형 컨트롤

<form> : 데이터를 제출하기 위한 웹 양식(폼) 영역

        <form action="submit_url" method="get" class="form-example">
            <div class="form-example">
                <label for="user-name">이름</label>
                <input type="text" id="user-name" name="user-name" required>
            </div>
            <div class="form-example">
                <label for="user-email">이메일</label>
                <input type="email" id="user-email" name="user-email" required>
            </div>
            <button type="submit">제출하기</button>
        </form>

<nav> : 다른 웹 페이지로 연결하거나, 현재 웹 페이지의 콘텐츠 내부로 연결되는 
        탐색(navigation)을 위한 링크(links)가 있는 영역

<footer> : 일반적으로 웹 페이지의 맨 하단에 있는 글로벌 푸터를 나타내거나,
           글이나 콘텐츠 영역에 대한 작성자, 저작권 정보, 관련 문서에 대한 링크 등의 내용

<header> : 웹 페이지의 맨 위에 있는 글로벌 헤더나, 글이나 콘텐츠의 서두[서론/서문/도입부]를 나타낼 때 사용

<iframe> : 웹 페이지 내에 독립적인 틀(inline frame)을 만들어 다른 문서를 삽입

<button> : 내용물에 의해 레이블이 지정된 버튼

<strong> : 해당 내용의 중요성, 심각성 또는 긴급성을 강하게 강조(strong importance)하는 데 사용하는 태그

<i> : 주위 텍스트에 비해서 다른 목적으로 구분되어야 하는 텍스트. 
      학술이나 기술 용어, 외국어 표현, 특정 생각이나 감정, 관용적 문구 등을 표현할 때 유용