HTML 태그

January 15, 2024

Intro

이 글은 HTML의 태그에 대해서 다룹니다.

hn(h1~h6)태그

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML 필수 태그</title>
</head>
<body>
    <h1>h1 tag</h1>
    <h2>h2 tag</h2>
    <h3>h3 tag</h3>
    <h4>h4 tag</h4>
    <h5>h5 tag</h5>
    <h6>h6 tag</h6>
</body>

hn태그: 제목이나 주제와 같은 성격의 텍스트를 나타날 때 사용하는 태그. 검색엔진의 결과를 결정하는 요소이기도 하다. h1태그는 정말 중요한 부분만 사용하기에 한 번만 사용하기를 권장

p태그

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit</p>

p태그: 단락 (문장, 문단)을 나타낼 때 사용하는 태그. p태그는 줄 바꿈이 되지 않는다.

br태그

<p>
    Lorem ipsum dolor sit<br/>
    amet consectetur adipisicing elit.
</p>

br 태그: 줄 바꿈을 하기 위해서 사용하는 태그.

blockquote태그

<blockquote cite="https://developer.mozilla.org/ko/docs/Learn/HTML/Introduction_to_HTML/Getting_started">인용된 내용을 작성</blockquote>

blockquote 태그: 인용문을 나타낼 때 사용하는 태그. 인용한 부분의 출처를 사이트 주소를 통해 나타낼 수 있다.

q태그

<q cite="https://developer.mozilla.org/ko/docs/Learn/HTML/Introduction_to_HTML/Getting_started"></q>

q태그: q태그는 간단한 한 문장을 인용할 때 사용.

ins태그, del태그

<ins>새롭게 삽입(추가)되는 내용</ins>
<del>기존에 있었지만 삭제되는 내용</del>

ins태그: ins는 어떠한 내용을 새롭게 삽입할 때 사용하는 태그.
del태그: del은 어떠한 내용을 삭제할 때 사용하는 태그.

sub태그, sup태그

<p>공기의 원소 기호는 H<sub>2</sub>0 입니다.</p>
<p>4<sup>2</sup>은 16 입니다.</p>

sub는 아래 첨자, sup는 윗 첨자

div태그, span태그

<div class="movie">
    <h2>영화 소개</h2>
    <p>영화 <span>소개하는</span> 페이지</p>
</div>

div태그: 블록, 인라인 요소 등 여러 가지 태그를 그룹화.
span태그: 인라인 요소를 그룹화.

ul태그, li태그, ol태그

<ul>
    <li>아이템 1</li>
    <li>아이템 2</li>
    <li>아이템 3</li>
</ul>

<ol>
    <li>아침 먹기</li>
    <li>점심 먹기</li>
    <li>저녁 먹기</li>
</ol>

ul: unordered list
li: list item
ol: ordered list

dl태그, dt태그

<dl>
    <dt>HTML</dt>
    <dd>HTML은 HyperText Markup Language의 약자이다.</dd>
    <dt>CSS</dt>
    <dd>CSS는 Cacading Style Sheets의 약자이다.</dd>
</dl>

dl: definition list, descrition list
dt: description term, dd: descripton details

a태그

<a href="https://www.naver.com" target="_blank">네이버</a>

a(anchor)태그: 다른 문서 또는 내부의 다른 영역과 연결할 때 사용하는 태그.

img태그

<img src="https://image.utoimage.com/preview/cp872722/2022/12/202212008462_500.jpg" alt="개 사진"/>

img태그: 이미지를 보여주는 태그.

a태그 안에 img태그를 삽입하면 이미지 클릭으로 해당 주소에 갈 수 있게 만들 수 있다.

strong태그, em태그

<strong>위험, 여기는 절대 들어가지 마시오</strong>
<strong>경고: <em>관계자</em> 외 출입 금지 </strong>

strong태그: 문장을 강조하는 태그.
em태그: 단어를 강조하는 태그.

b태그와 i태그 모두 강조 기능이 있지만, 이제는 사용하지 않는다.

Twitter Facebook LinkedIn

sk-choi