HTML 태그: 웹페이지를 만드는 핵심 요소

이번 글에서는 HTML의 태그와 주요 요소들을 살펴보겠다.

HTML 태그는 웹페이지에서 사용되는 구성 요소로, 태그를 사용하여 각 요소의 역할을 정의한다. HTML 태그는 다양한 종류가 있으며, 모든 태그는 '<'와 '>' 기호로 감싸져 있다. 예를 들어, <h1> 태그는 웹페이지에서 제목을 정의하는 역할을 한다.

HTML 태그는 크게 블록 태그와 인라인 태그로 나눌 수 있다. 블록 태그는 웹페이지에서 블록을 형성하는 요소들을 정의하며, 인라인 태그는 텍스트 내에서 사용되는 요소들을 정의한다.

1. 블록 태그
<div>: 문서에서 논리적인 영역을 지정
<h1>~<h6>: 제목을 표시
<p>: 문장을 표시
<ul>, <ol>: 리스트를 표시
<table>: 표를 표시
2. 인라인 태그
<a>: 하이퍼링크를 지정
<img>: 이미지를 표시
<span>: 문장에서 작은 논리적인 영역을 지정

HTML 태그는 여러 개의 속성을 가지며, 각각의 속성은 태그의 기능을 확장한다. 대표적인 속성들은 다음과 같다.
class: 태그의 스타일을 지정하는 CSS 클래스 이름
id: 태그의 고유 식별자
style: 태그에 직접 스타일을 지정

HTML에는 여러 가지 요소가 있지만, 이번 글에서는 특히 주요한 요소를 살펴보겠다.

1. 텍스트 요소
HTML에서는 텍스트를 표시하는 요소가 다양하게 제공된다. 대표적인 것들은 다음과 같다.
<h1>~<h6>: 제목을 표시
<p>: 문장을 표시
<em>, <strong>: 텍스트를 강조

 

2. 링크 요소
하이퍼링크는 웹페이지에서 가장 기본이 되는 요소 중 하나다. HTML에서는 <a> 태그를 사용하여 링크를 생성할 수 있다.

<a href="http://www.example.com">링크 텍스트</a>

링크 텍스트

href 속성은 링크의 목적지 주소를 지정하며, 링크 텍스트는 사용자가 클릭해서 이동할 링크 주소를 나타낸다.

 

3. 이미지 요소

이미지는 웹페이지에서 시각적인 정보를 전달하는 데 중요한 역할을 한다. HTML에서는 <img> 태그를 사용하여 이미지를 표시할 수 있습니다.

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

src 속성은 이미지 파일의 경로를 지정하며, alt 속성은 이미지를 대체하는 텍스트를 지정한다. 이 속성은 시각 장애인을 비롯한 일부 사용자가 이미지를 볼 수 없을 때 대신 나타난다.

4. 테이블 요소
테이블은 데이터를 효율적으로 표시하는 데 매우 유용하다. HTML에서는 <table> 태그를 사용하여 테이블을 생성할 수 있다.

<table>
  <thead>
    <tr>
      <th>항목1</th>
      <th>항목2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>데이터1</td>
      <td>데이터2</td>
    </tr>
    <tr>
      <td>데이터3</td>
      <td>데이터4</td>
    </tr>
  </tbody>
</table>

항목1	항목2
데이터1	데이터2
데이터3	데이터4

<thead>와 <tbody> 태그는 각각 테이블의 헤더와 본문을 지정하며, <tr> 태그는 각 행을 지정한다. <th> 태그는 각 열의 제목을 나타내며, <td> 태그는 각 데이터를 나타낸다.

5. 폼 요소
HTML에서는 폼 요소를 사용하여 사용자 입력을 받을 수 있다. <form> 태그를 사용하여 폼을 생성하고, <input> 태그 등을 사용하여 입력 필드를 생성할 수 있다.

<form>
  <label for="이름">이름:</label>
  <input type="text" id="이름" name="이름"><br><br>
  <label for="이메일">이메일:</label>
  <input type="email" id="이메일" name="이메일"><br><br>
  <input type="submit" value="제출">
</form>

이름:

이메일:

<label> 태그는 입력 필드의 설명을 나타내며, for 속성을 사용하여 입력 필드와 연결한다. <input> 태그는 다양한 타입을 가지며, 각각의 타입에 맞는 입력 필드를 생성한다. 이번 예시에서는 <input type="text">와 <input type="email">를 사용하여 각각 텍스트와 이메일 입력을 받도록 했다. 마지막으로, <input type="submit">은 제출 버튼을 생성한다.

 

HTML은 웹페이지를 만드는 가장 기본이 되는 언어이다. HTML의 태그와 주요 요소들에 대해 알아보았다. 이러한 요소들을 적절하게 사용하여 다양한 웹페이지를 만들 수 있다.