본문 바로가기

초보자를 위한 HTML 태그 완벽 가이드와 실전 활용법

발견의끝 2024. 12. 3. 
<!DOCTYPE html>
<html>
<head>
    <title>문서 제목</title>
</head>
<body>
    <h1>메인 제목</h1>
    <p>이곳은 본문 내용입니다.</p>
</body>
</html>

HTML 태그의 기본 구성

HTML은 웹 페이지를 구성하는 데 필요한 기본적인 언어로, 구조와 콘텐츠를 정의합니다. 이 언어는 태그로 구성되어 있으며, 태그를 통해 웹 페이지가 브라우저에서 올바르게 표시될 수 있도록 합니다.

HTML 문서의 기본 구조

HTML 문서는 기본적으로 다음과 같은 구조를 갖습니다:

 
 

주요 구성 요소

  1. <!DOCTYPE html>: HTML5 문서를 선언하여 브라우저에게 HTML5 규격임을 알려줍니다.
  2. <html>: HTML 문서의 루트 요소로, 모든 HTML 태그가 이 요소 안에 들어갑니다.
  3. <head>: 문서의 메타정보를 담는 곳으로, 제목, 스타일, 문자셋 등을 포함합니다.
  4. <body>: 사용자가 실제로 볼 수 있는 콘텐츠가 위치하는 영역입니다.

HTML 태그 요약

HTML 전체 태그 목록

태그 설명
<!DOCTYPE> HTML 문서 유형 선언
<html> HTML 문서의 루트 요소
<head> 문서의 메타데이터 포함
<title> 문서 제목
<meta> 문서의 메타데이터 설정
<link> 외부 리소스 연결 (예: CSS 파일)
<style> CSS 스타일 정의
<body> HTML 문서의 본문
<h1> ~ <h6> 제목 태그
<p> 단락 태그
<br> 줄바꿈
<hr> 수평선
<a> 하이퍼링크
<img> 이미지 삽입
<ul> 순서 없는 리스트
<ol> 순서 있는 리스트
<li> 리스트 항목
<table> 표 생성
<tr> 표의 행
<td> 표의 셀
<th> 표의 헤더 셀
<form> 사용자 입력 폼
<input> 사용자 입력 필드
<textarea> 멀티라인 입력 필드
<button> 버튼 생성
<select> 드롭다운 메뉴
<option> 드롭다운 메뉴 항목
<div> 블록 컨테이너
<span> 인라인 컨테이너
<iframe> 내부 프레임
<script> JavaScript 코드 삽입
<noscript> JavaScript 미지원 시 대체 콘텐츠
<audio> 오디오 삽입
<video> 비디오 삽입
<canvas> 그래픽 및 애니메이션
<svg> 벡터 그래픽
<header> 문서의 헤더
<footer> 문서의 푸터
<nav> 내비게이션 메뉴
<main> 문서의 주요 콘텐츠
<section> 문서의 섹션
<article> 독립적인 콘텐츠
<aside> 보조 콘텐츠
<details> 상세 정보
<summary> 상세 정보 제목
<mark> 강조 표시
<progress> 진행률 표시
<time> 시간 정보

 

주요 HTML 태그

HTML에는 콘텐츠를 구성하고 스타일을 부여하기 위한 다양한 태그가 존재합니다. 여기서 자주 사용되는 태그 몇 가지를 살펴보겠습니다.

제목 태그

HTML 문서에서 제목을 나타낼 때는 <h1>부터 <h6>까지의 태그를 사용합니다. <h1>은 가장 큰 제목을 나타내며, <h6>은 가장 작은 제목입니다.

<h1>제목 1</h1>
<h2>제목 2</h2>
<h3>제목 3</h3>​
 

단락 태그

본문 내용을 단락으로 나눌 때는 <p> 태그를 사용합니다.

<p>이것은 단락을 나타내는 예제입니다.</p>
 

링크 태그

다른 페이지나 리소스에 연결할 때는 <a> 태그를 사용합니다. href 속성을 통해 이동할 URL을 지정할 수 있습니다.

<a href="https://example.com" target="_blank">예제 사이트</a>

이미지 태그

이미지를 삽입할 때는 <img> 태그를 사용합니다. src 속성에 이미지 경로를, alt 속성에 대체 텍스트를 지정합니다.

<img src="image.jpg" alt="이미지 설명">

HTML 태그의 유형

HTML 태그는 두 가지 유형으로 나뉩니다: 블록 요소와 인라인 요소.

블록 요소

블록 요소는 항상 새로운 줄에서 시작하며 화면의 전체 너비를 차지합니다. 대표적인 블록 요소로는 <div>, <p>, <h1>~<h6> 등이 있습니다.

<div>이것은 블록 요소입니다.</div>
<p>단락도 블록 요소입니다.</p>

인라인 요소

인라인 요소는 한 줄에 배치되며 텍스트나 다른 요소의 일부로 사용됩니다. 대표적인 예로 <span>, <a>, <img> 등이 있습니다.

<span>이것은 인라인 요소입니다.</span>
<a href="#">링크</a>

자주 사용하는 HTML 태그

표 만들기

데이터를 표로 표현할 때는 <table> 태그를 사용합니다. 행은 <tr>로, 열은 <td> 또는 <th>로 정의합니다.

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

폼 생성

사용자로부터 입력을 받을 때는 <form> 태그를 사용합니다. <input> 태그를 통해 다양한 입력 필드를 만들 수 있습니다.

<form action="submit.php" method="post">
    <label for="name">이름:</label>
    <input type="text" id="name" name="name">
    <input type="submit" value="전송">
</form>

HTML 활용 팁

접근성 높이기

  • alt 속성을 통해 이미지 대체 텍스트를 제공해 시각 장애가 있는 사용자를 배려합니다.
  • <label> 태그를 사용해 폼 요소와 레이블을 연결해 접근성을 향상시킵니다.

SEO 최적화

  • <title> 태그에 적절한 제목을 설정해 검색 엔진 최적화를 도모합니다.
  • <meta description> 태그를 통해 페이지의 요약 정보를 추가합니다.

반응형 웹 지원

  • 다양한 디바이스에서 최적화된 화면을 제공하려면 <meta name="viewport"> 태그를 추가합니다.
<meta name="viewport" content="width=device-width, initial-scale=1.0">

 

 

고급 HTML 태그 활용

비디오 삽입

<video controls>
    <source src="video.mp4" type="video/mp4">
    브라우저에서 비디오를 지원하지 않습니다.
</video>

오디오 삽입

<audio controls>
    <source src="audio.mp3" type="audio/mpeg">
    브라우저에서 오디오를 지원하지 않습니다.
</audio>

SVG 그래픽 삽입

벡터 그래픽을 삽입할 때는 <svg> 태그를 사용합니다.

<svg width="100" height="100">
    <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>

FAQ

Q: HTML 태그는 무엇인가요?
A: HTML 태그는 웹 페이지의 구조와 콘텐츠를 정의하는 기본 요소입니다.

Q: HTML 태그는 대소문자를 구분하나요?
A: HTML5에서는 태그가 대소문자를 구분하지 않지만, 소문자를 사용하는 것이 권장됩니다.

Q: HTML과 CSS의 차이점은 무엇인가요?
A: HTML은 구조를 정의하고, CSS는 디자인과 스타일을 추가합니다.

Q: 주석은 어떻게 작성하나요?
A: 주석은 <!-- 주석 내용 --> 형태로 작성합니다.

Q: HTML 문서를 작성할 때 어떤 도구를 사용하나요?
A: 메모장, VS Code, Sublime Text 등 다양한 텍스트 편집기로 작성할 수 있습니다.

 

 

댓글

티스토리툴바