HTML 주요 태그들 50여개 - 태그연습장 바로가기

HTML 주요 태그들을 활용하여 블로그도 꾸미는 등 다양하게 활용하자.

태그 연습장 바로가기 링크: 로그인 없는 무료 사이트

HTML 태그 연습장: 웹 페이지 실습과 결과 미리보기 (MARQUEE)

<태그>	<설명>	<예시>
<b>	굵게 텍스트를 표시하는 태그	<b>굵은 텍스트</b> → 굵은 텍스트
<i>	이탤릭체로 텍스트를 표시하는 태그	<i>이탤릭 텍스트</i> → 이탤릭 텍스트
<p>	단락을 정의하는 태그	<p>단락 텍스트</p> → 단락 텍스트
<br>	줄바꿈을 할 때 사용하는 태그	<br> → 줄바꿈 후 줄바꿈
<hr>	수평선을 그을 때 사용하는 태그	<hr> → ──────────────────────────────────────
<strong>	강조된 텍스트를 굵게 표시하는 태그	<strong>강조된 텍스트</strong> → 강조된 텍스트
<em>	강조된 텍스트를 이탤릭체로 표시하는 태그	<em>강조된 텍스트</em> → 강조된 텍스트
<h1> ~ <h6>	제목을 정의하는 태그 (h1이 가장 큰 제목)	<h1>큰 제목</h1>, <h2>두 번째 제목</h2>, ...
<a>	링크를 정의하는 태그	링크 → 링크
<img>	이미지를 삽입하는 태그	<img src="image.jpg" alt="이미지"> →
<ul>	순서 없는 목록을 정의하는 태그	<ul><li>항목 1</li><li>항목 2</li></ul> → <ul><li>항목 1</li><li>항목 2</li></ul>
<ol>	순서 있는 목록을 정의하는 태그	<ol><li>첫 번째</li><li>두 번째</li></ol> → <ol><li>첫 번째</li><li>두 번째</li></ol>
<li>	목록 항목을 정의하는 태그	<ul><li>항목 1</li></ul> → <ul><li>항목 1</li></ul>
<table>	표를 정의하는 태그	<table><tr><td>셀</td></tr></table> → <table><tr><td>셀</td></tr></table>
<tr>	테이블 행을 정의하는 태그	<tr><td>셀</td></tr> → <tr><td>셀</td></tr>
<td>	테이블 데이터를 정의하는 태그	<tr><td>셀</td></tr> → <tr><td>셀</td></tr>
<th>	테이블 헤더 셀을 정의하는 태그	<tr><th>헤더</th></tr> → <tr><th>헤더</th></tr>
<form>	폼을 정의하는 태그	<form action="/submit"><input type="text"></form>
<input>	입력 필드를 정의하는 태그	<input type="text" name="name">
<button>	버튼을 정의하는 태그	<button>클릭</button> → 클릭
<select>	드롭다운 선택 목록을 정의하는 태그	<select><option>선택지</option></select> → 드롭다운
<option>	<select> 내에서 옵션 항목을 정의하는 태그	<option>옵션</option> → 옵션
<textarea>	텍스트 영역을 정의하는 태그	<textarea>내용</textarea> → 내용
<div>	블록 수준의 구획을 정의하는 태그	<div>내용</div> → 내용
<span>	인라인 구획을 정의하는 태그	<span>내용</span> → 내용
<link>	외부 리소스를 연결하는 태그	<link rel="stylesheet" href="style.css">
<meta>	문서의 메타데이터를 정의하는 태그	<meta charset="UTF-8">
<style>	문서 내 스타일을 정의하는 태그	<style>body { background-color: lightgray; }</style>
<script>	JavaScript 코드를 삽입하는 태그	<script>console.log('Hello')</script>
<audio>	오디오 파일을 삽입하는 태그	<audio controls><source src="audio.mp3" type="audio/mp3"></audio>
<video>	비디오 파일을 삽입하는 태그	<video controls><source src="video.mp4" type="video/mp4"></video>
<header>	문서나 섹션의 머리말을 정의하는 태그	<header>헤더 콘텐츠</header>
<footer>	문서나 섹션의 바닥글을 정의하는 태그	<footer>푸터 콘텐츠</footer>
<section>	문서의 독립적인 섹션을 정의하는 태그	<section>섹션 콘텐츠</section>
<article>	독립적으로 구분되는 콘텐츠를 정의하는 태그	<article>기사 콘텐츠</article>
<nav>	내비게이션 링크들을 그룹화하는 태그	<nav><a href="#home">홈</a></nav>
<aside>	보조적인 콘텐츠를 정의하는 태그	<aside>보조 콘텐츠</aside>
<details>	사용자가 클릭하여 내용을 펼칠 수 있는 태그	<details><summary>더보기</summary>내용</details>
<summary>	<details>의 제목을 정의하는 태그	<summary>더보기</summary> → 더보기
<figcaption>	<figure> 요소에 설명을 추가하는 태그	<figcaption>설명</figcaption> → 설명
<figure>	이미지, 비디오, 도표 등을 묶는 태그	<figure><img src="image.jpg" alt="이미지"></figure>
<dialog>	대화 상자를 정의하는 태그	<dialog>대화 상자</dialog>
<progress>	진행 상태를 표시하는 태그	<progress value="50" max="100"></progress>
<meter>	범위 내의 값을 나타내는 태그	<meter value="0.6" min="0" max="1"></meter>
<iframe>	다른 HTML 문서를 삽입하는 태그
<canvas>	그래픽을 그릴 수 있는 공간을 정의하는 태그	<canvas id="myCanvas"></canvas>
<time>	날짜와 시간을 정의하는 태그	<time datetime="2025-01-01">2025년 1월 1일</time>
<mark>	하이라이트 텍스트를 표시하는 태그	<mark>하이라이트된 텍스트</mark> → 하이라이트된 텍스트
<ruby>	루비 텍스트 (주석 텍스트) 정의하는 태그	<ruby>漢字<rt>한자</rt></ruby> → 漢字<rt>한자</rt>

주요 태그 사이트 썸네일 이미지

HTML5 이미지

무단 재배포 금지.

펌시 댓글로 작성후 사용처에 블로그 링크 필수 등록 요청