HTML에서 자주 사용되는 태그 정의 및 사용법(div, span, a, p, h, ul, ol, li, img, form, table, input)

웹 페이지를 제작할 때 HTML은 구조의 기본이 되며, 이 중엥서 자주 사용되는 HTML 태그들을 정확히 이해하고 활용하는 것이 중요합니다. 이번 글에서는 HTML에서 많이 쓰이는 태그들에 대해 정의하고, 주의해야 할 점과 간단한 예제를 함께 다루어 보겠습니다.

 

1. <div> 태그

<div> 태그는 HTML 문서에서 구역을 나누는 데 사용됩니다. 주로 블록 레벨의 요소를 그룹화할 때 사용되며, 스타일링이나 스크립트를 적용할 때 많이 사용됩니다.

• 정의 : 문서의 특정 부분을 블록으로 나누어 그룹화하는데 사용됩니다.
• 유의점 : <div> 태그를 너무 많이 사용하면 코드가 복잡해질 수 있으므로, 구조를 명확히 정의하고 의미론적인 태그를 사용하는 것이 좋습니다.
• 예제

<div class="content">
    <h2>하얀 캔버스</h2>
    <p>이곳에 본문 내용이 들어갑니다.</p>
</div>

 

2. <span> 태그

• 정의 : 인라인 요소를 그룹화하는데 사용되며 주로 텍스트의 일부를 스타일링하거나 특정 스트립트를 적용하고자 할 때 유용합니다.
• 예제

<p>이 문장에서 <span style="color: red;">강조된 부분</span>을 확인하세요.</p>

 

3. <a> 태그

<a> 태그는 하이퍼링크를 생성할 때 사용됩니다. 다른 페이지로 이동하거나 같은 페이지 내의 특정 부분으로 이동하는 링크를 만들 수 있습니다.

• 정의 : 하이퍼링크를 정의하는 태그로, href 속성을 사용해 연결할 주소를 지정합니다.
• 유의점 : 링크의 목적을 명확하게 전달하기 위해 title 속성을 사용할 수 있으며, 외부 링크의 경우 target="_blank"를 사용하여 새 창에서 열리도록 설정하는 것이 사용자 경험에 도움이 도움이 됩니다.
• 예제

<a href="https://eumcode.tistory.com/" target="_blank">하얀 캔버스 이동</a>

 

4. <p> 태그

<p>태그는 단락을 정의하는데 사용됩니다. 일반적인 텍스트 내용을 표현할 때 사용되며, 문서의 읽기 쉬운 구조를 만드는데 중요한 역할을 합니다.

• 정의 : 텍스트 단락을 정의하는 태그
• 유의점 : <p> 태그는 줄바꿈을 자동으로 삽입하므로, 너무 짧은 텍스트에 사용하지 않는 것이 좋습니다.
• 예제

<p>HTML은 웹 페이지의 구조를 정의하는 마크업 언어입니다.</p>

 

5. <h1> ~ <h6> 태그

<h1>부터 <h6> 까지의 태그는 문서의 제목을 정의하는데 사용됩니다. 

• 정의 : 문서의 제목이나 세션의 제목을 정의하는 태그입니다.
• 유의점 : 제목의 중요도에 따라 순서대로 사용하는 것이 좋습니다. <h1>은 보통 페이지의 메인 제목에 사용되며, 중복해서 사용하지 않는 것이 SEO에 도움이 됩니다.

<h1>웹 개발의 기초</h1>
<h2>HTML 소개</h2>
<h3>자주 사용하는 태그</h3>

 

6. <ul>, <ol>, <li> 태그

리스트를 생성할 때 위에 태그를 사용합니다.

• 정의 : 목록을 정의하는 태그입니다.
  • <ul> : 순서가 없는 목록
  • <ol> : 순서가 있는 목록
  • <li> : 리스트 항목
• 예제

<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>

<ol>
    <li>첫 번째 단계</li>
    <li>두 번째 단계</li>
    <li>세 번째 단계</li>
</ol>

 

7. <img> 태그

<img> 태그는 웹 페이지에 이미지를 삽입하는데 사용됩니다.

• 정의 : 이미지를 문서에 삽입하는 태그입니다. src 속성을 사용해 이미지 파일의 경로를 지정합니다.
• 유의점 : alt 속성을 사용해 이미지의 대체 텍스트를 제공하는 것이 접근성과 SEO에 매우 중요합니다.
• 예제

<img src="example.jpg" alt="예제 이미지">

 

8. <form> 태그

<form> 태그는 사용자 입력을 받는 양식을 정의할 때 사용됩니다. 일반적으로 회원가입, 로그인, 검색 등을 구현할 때 사용됩니다.

• 유의점 : 보안을 위해 method 속성에서 POST를 사용하는 것이 좋으며, action 속성으로 데이터를 보낼 URL을 지정합니다.
• 예제

<form action="/submit" method="post">
    <label for="username">사용자 이름:</label>
    <input type="text" id="username" name="username">
    <button type="submit">제출</button>
</form>

 

9. <table> 태그

<table> 태그는 표를 생성하는데 사용됩니다. 데이터를 행과 열로 구조화하여 표현할 때 유용합니다.

• 정의 : 표 형식의 데이터를 표현할 때 사용되는 태그입니다.
• 유의점 : 표의 가독성을 높이기 위해 <thead>, <tbody>, <th>, <td> 등의 태그를 적절히 사용하는 것이 좋습니다.
• 예제

<table>
    <thead>
        <tr>
            <th>이름</th>
            <th>나이</th>
            <th>직업</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>이음코드</td>
            <td>50</td>
            <td>개발자</td>
        </tr>
    </tbody>
</table>

 

10. <input> 태그

<input> 태그는 사용자가 데이터를 입력할 수 있도록 하는 필드를 정의합니다. 다양한 타입의 입력을 받을 수 있습니다.

• 정의 : 사용자로부터 데이터를 입력받을 필드를 정의하는 태그입니다.
• 유의점 : type 속성에 따라 텍스트, 비밀번호, 이메일 등 다양한 입력 필드를 제공하며, 사용자 경험을 개선하기 위해placeholder 속성을 활용할 수 있습니다.
• 예제

<input type="text" placeholder="이름을 입력하세요">
<input type="password" placeholder="비밀번호를 입력하세요">

 

이렇게 HTML에서 자주 사용하는 태그들에 대해 살펴보았습니다. 각 태그의 역할을 잘 이해하고, 상황에 맞게 적절히 사용하는 것이 중요할 듯합니다!