코딩 초보자를 위한 HTML 기본 태그 정리

HTML 기본 태그 개요

HTML(HyperText Markup Language)은 웹 페이지를 구성하는 가장 기본적인 언어로, 콘텐츠를 어떻게 배치할지를 정의합니다. 이를 위해 다양한 태그를 사용하여 웹 브라우저에 정보를 전달합니다. 이 글에서는 HTML의 주요 태그들을 소개하고, 각각의 사용 목적과 특징을 설명하겠습니다.

HTML 태그의 기본 구조

HTML 태그는 일반적으로 여는 태그와 닫는 태그로 이루어져 있습니다. 여는 태그는 콘텐츠의 시작을 나타내고, 닫는 태그는 그 끝을 표시합니다. 태그의 형태는 다음과 같습니다:

<태그이름>콘텐츠</태그이름>

여기서 태그 이름은 해당 태그가 어떤 역할을 하는지를 나타내며, 태그 사이에는 실제 표시할 콘텐츠가 들어갑니다. 이러한 태그들은 웹 페이지 출력을 위해 웹 브라우저에 의해 해석됩니다.

여는 태그와 닫는 태그

여는 태그는 태그 이름을 포함하고 있으며, 닫는 태그는 같은 이름 앞에 슬래시(/)를 추가하여 나타냅니다. 예를 들어, 문단을 표시할 때는 다음과 같은 형태를 사용합니다:

<p>여기가 문단입니다.</p>

단일 태그

어떤 태그들은 콘텐츠를 필요로 하지 않으며, 단독으로 사용될 수 있습니다. 이러한 태그는 ‘단일 태그’라고 불리며, 다음과 같은 형태로 사용됩니다:

• <br> – 줄 바꿈 태그
• <img> – 이미지 태그
• <hr> – 수평선 태그

텍스트 관련 태그

제목 태그

HTML에서는 제목을 표시하기 위해 헤딩 태그가 사용됩니다. 헤딩 태그는 <h1>에서 <h6>까지 있으며, 숫자가 작을수록 더 중요한 제목을 나타냅니다. 예를 들어:

<h1>가장 중요한 제목</h1>

문단 태그

문단을 생성하는 태그는 <p>로, 새로운 줄에서 시작되며 블록 형태로 표현됩니다:

<p>여기는 첫 번째 문단입니다.</p>

줄 바꿈과 수평선 태그

줄을 나누고 싶을 때는 <br> 태그를 사용하며, 이는 줄 바꿈을 의미합니다. 수평선을 추가할 때는 <hr> 태그를 사용하여 콘텐츠를 시각적으로 구분할 수 있습니다.

리스트와 표

리스트 만들기

HTML에서는 순서 있는 리스트와 순서 없는 리스트를 작성할 수 있습니다. 순서가 있는 리스트는 <ol> 태그로 시작하며, 각 항목은 <li> 태그로 정의됩니다:

<ol>
  <li>첫 번째 항목</li>
  <li>두 번째 항목</li>
</ol>

순서가 없는 리스트는 <ul> 태그를 사용하여 작성하는데, 이 역시 <li> 태그로 항목들을 나열합니다.

표 태그

데이터를 표 형식으로 표시하고 싶다면 <table> 태그를 사용합니다. 이 태그 안에 <tr>으로 행을, <th>로 표 머리글을, <td>로 표의 데이터를 정의합니다:

<table>
  <tr>
    <th>열1</th>
    <th>열2</th>
  </tr>
  <tr>
    <td>데이터1</td>
    <td>데이터2</td>
  </tr>
</table>

링크와 이미지

링크 만들기

웹 페이지 간의 연결을 생성하려면 <a> 태그를 사용하여 하이퍼링크를 만들 수 있습니다. 다음은 링크를 만드는 기본 구조입니다:

<a href="URL">링크 텍스트</a>

이미지 삽입하기

웹 페이지에 이미지를 추가하고 싶다면 <img> 태그를 사용합니다. 이를 통해 이미지의 경로와 대체 텍스트를 설정할 수 있습니다:

<img src="이미지경로" alt="대체 텍스트">

폼과 사용자 입력

입력 폼 생성하기

사용자로부터 데이터를 입력 받기 위해 폼을 생성할 수 있는 <form> 태그를 사용할 수 있습니다. 다음은 간단한 입력 필드의 예시입니다:

<form>
  <input type="text" placeholder="이름을 입력하세요">
  <input type="submit" value="제출">
</form>

결론

이번 포스팅을 통해 HTML의 기본 태그 구성 및 활용 방법을 살펴보았습니다. HTML 태그들은 웹 페이지에서 내용을 어떻게 표현하고 구조화할지를 결정짓는 중요한 요소이기 때문에, 이를 잘 이해하고 활용하는 것이 웹 개발의 첫걸음이 될 것입니다. 앞으로 다양한 태그를 실습하며 지식을 넓혀가시기 바랍니다.

자주 찾는 질문 Q&A