HTML Elements
HTML 요소(HTML Elements)는 웹 페이지를 구성하는 기본 단위입니다. HTML 요소는 시작 태그와 종료 태그로 구성되며, 그 사이에 내용이 포함될 수 있습니다. 태그는 브라우저가 콘텐츠를 해석하는 데 사용됩니다.
HTML 요소의 기본 구조
HTML 요소는 아래와 같은 기본 구조를 따릅니다:
<태그이름 속성="값">내용</태그이름>
예시:
<p class="example">이것은 단락입니다.</p>
HTML 요소 종류
| 요소 유형 | 설명 | 자주 사용되는 요소 |
|---|---|---|
| 블록 요소 | 새로운 줄에서 시작되며, 전체 너비를 차지하는 요소 | <div>, <p>, <h1>, <ul>, <ol>, <li>, <section>, <article>, <header>, <footer> |
| 인라인 요소 | 다른 요소들과 같은 줄에 표시되며, 콘텐츠의 너비만큼만 차지하는 요소 | <span>, <a>, <img>, <strong>, <em>, <br>, <input> |
| 자체 종료 요소 | 시작 태그만 있고 종료 태그가 필요 없는 요소(단일 태그) | <img>, <br>, <hr>, <input>, <meta>, <link> |
블록 요소와 인라인 요소 예제
블록 요소는 화면 전체를 차지하며, 항상 새로운 줄에서 시작됩니다:
<div><h1>제목</h1><p>이것은 단락입니다.</p></div>
인라인 요소는 텍스트와 함께 같은 줄에 표시됩니다:
<p>이 텍스트는 <a href="#">링크</a>가 포함되어 있습니다.</p>
HTML 요소의 실제 사용 사례
- 레이아웃 구성:
<div>,<header>,<footer>,<section>,<article> - 텍스트 작성 및 서식:
<p>,<h1> ~ <h6>,<strong>,<em>,<blockquote> - 이미지 및 멀티미디어:
<img>,<audio>,<video> - 링크 및 네비게이션:
<a>,<nav> - 목록:
<ul>,<ol>,<li> - 테이블 작성:
<table>,<thead>,<tbody>,<tr>,<th>,<td> - 폼 입력 및 버튼:
<form>,<input>,<button>,<select>,<textarea>