자주 사용되는 HTML 태그 정리

Heading

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>

문서의 제목은 제목을 뜻하는 heading의 약자인 h에 숫자 1~6까지를 붙여 사용한다.

숫자가 작을수록 큰 제목을 나타내며 글자의 크기가 커진다. 또한 강조를 위해 두꺼운 폰트로 표시된다.

 

Paragraph

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

본문을 작성할 때는 주로 단락을 뜻하는 paragraph의 약자인 p 태그를 이용하여 문단을 구분한다.

p 태그를 사용하면 자동으로 뒤에 빈 줄이 하나 추가된다.

 

Line Break

<p>To force<br> line breaks<br> in a text,<br> use the br<br> element.</p>

본문 작성 중 개행할 때는 break의 약자인 br 태그를 사용하며, 닫는 태그 없이 여는 태그로만 사용한다.

p 태그와 달리 한번만 개행하므로 빈 공간 없이 문단을 나누고 싶을 때 사용하면 된다.

 

List

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

목록을 나타낼 때는 순서가 있는 ol(ordered list) 태그와 순서가 없는 ul(unordered list) 태그를 사용한다.

순서에 따라 감싸는 태그는 다르지만 항목은 li 태그 하나로 사용한다.

ordered list는 각 항목 앞에 숫자가 표시되며, unordered list는 검은색 점이 표시된다.

 

Anchor

<a href="https://www.w3schools.com">Visit W3Schools.com!</a>

다른 웹 페이지로의 링크는 닻을 뜻하는 단어 anchor의 약자인 a 태그를 사용한다.

hypertext reference의 약자인 href 속성으로 목적지를 설정하며,

여는 태그와 닫는 태그 사이에 링크에 표시될 글자를 작성한다.

방문하지 않은 링크는 파란색, 방문한 링크는 보라색, 마우스가 올라가면 빨간색으로 글자 색이 변한다.

 

Image

<img src="https://www.w3schools.com/images/lamp.jpg" alt="Lamp" width="32" height="32">

이미지를 삽입할 때는 image의 약자인 img 태그를 사용한다.

src 속성으로 이미지 경로, alt 속성으로 대체 글자, width와 height 속성으로 너비와 높이를 설정한다.

 

 

Reference

W3Schools - HTML Reference

https://www.w3schools.com/tags/