HTML

HTML 태그 종류 자주 사용하는 태그 설명

HTML(하이퍼텍스트 마크업 언어)는 웹 개발에서 핵심적으로 사용 됩니다.
다양한 태그를 통해 웹페이지의 내용과 구조를 정의합니다.
웹 페이지의 기본이며 필수적인 요소 입니다.

다음은 HTML에서 자주 쓰이는 몇 가지 태그에 대한 설명입니다.

<html> 태그

<html> 태그는 HTML 문서의 시작과 끝을 정의합니다.
모든 HTML 코드는 이 태그 안에 포함되어야 합니다

<!DOCTYPE html> // HTML5 문서임을 나타냅니다.
<html lang="en"> // html 태그 시작
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
</body>
</html> // html 태그 끝
HTML

<head> 태그

<head> 태그는 문서의 헤더를 정의하며,
주로 문서 제목, 스타일 시트, 메타데이터 등을 포함합니다.

<!DOCTYPE html>
<html lang="en">
<head> // head 태그 시작
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title> // 문서 제목
</head>// head 태그 끝
<body>
  
</body>
</html>
HTML

<body> 태그

<body> 태그는 웹페이지의 본문을 정의합니다.
여기에는 텍스트, 이미지, 링크 등이 들어갑니다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body> // body 태그 시작
  // 이곳에 본문을 작성 합니다.
</body> // body 태그 끝
</html>
HTML

<h1> ~ <h6> 태그

<h1>부터 <h6>까지의 태그는 제목을 정의합니다.
숫자가 작을수록 제목의 중요도가 높아지며,
숫자가 작을 수록 제목의 크기가 커집니다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <h1>제목 입니다.</h1>
  <h2>제목 입니다.</h2>
  <h3>제목 입니다.</h3>
  <h4>제목 입니다.</h4>
  <h5>제목 입니다.</h5>
  <h6>제목 입니다.</h6>
</body>
</html>
HTML

<p> 태그

<p> 태그는 문단(paragraph)을 나타냅니다.
텍스트 단락을 나타내거나 문단을 구분할 때 사용됩니다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
<p>문단</p> // p태그
<p>문단</p>
<p>문단</p>
</body>
</html>
HTML

<a> 태그

<a> 태그는 하이퍼링크를 생성합니다.
href 속성에 링크 주소를 지정하여 다른 페이지로 이동하거나
파일을 다운로드할 수 있습니다. 링크를 생성할 때 주로 사용 됩니다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
<a href="https://suover.com">SUOVER Blog</a> // a태그 사용
</body>
</html>
HTML

<img> 태그

<img> 태그는 이미지를 삽입합니다. src 속성에 이미지 파일 경로를 지정합니다.
alt 속성에 이미지에 대한 대체 텍스트를 삽입 할 수 있습니다.
이미지가 로드 되지 못했을 때, 대체 텍스트가 출력 됩니다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
<img src="/이미지경로" alt="대체 텍스트"> // img 태그 사용
</body>
</html>
HTML

<ul>,<ol>과 <li> 태그

<ul>과 <li> 태그는 순서가 없는 목록을 정의합니다.
<ul> 안에 여러 <li> 태그를 넣어 사용합니다.

<ol>과 <li> 태그는 순서가 있는 목록을 정의합니다.
<ol> 안에 여러 <li> 태그를 넣어 사용합니다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
<ul> // ul 태그 시작
  <li>리스트 아이템</li> // ul 태그 안에 li 를 여러개 생성합니다.
  <li>LIST ITEM</li>
</ul> // ul 태그 끝

<ol> // ol 태그 시작
  <li>리스트 아이템</li> // ol 태그 안에 li 를 여러개 생성합니다.
  <li>LIST ITEM</li>
</ol> // ol 태그 끝
</body>
</html>
HTML

<div> 태그

<div> 태그는 문서를 그룹화하거나 스타일링하기 위해 사용됩니다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
<div> // div 태그 시작
  <p>div 구역 입니다.</p>
</div> // div 태그 끝
</body>
</html>
HTML

결론

이러한 HTML 태그들은 각각의 역할에 따라 웹페이지를 구조화하고
디자인하는 데 도움을 줍니다.

suover

Recent Posts

그림으로 쉽게 배우는 자료구조와 알고리즘: 미션1 | 메모리 검색

들어가며 소프트웨어를 개발할 때 메모리 관리 방식은 프로그램의 안정성과 성능을 좌우하는 핵심 요소입니다. 특히 자바스크립트,…

2일 ago

만들면서 쉽게 배우는 컴퓨터 구조: 미션1 | 진리표부터 회로 구현까지

들어가며 소프트웨어 개발자는 코드가 어떻게 실행되는지 정확히 이해해야 할 필요가 있습니다. 우리가 작성한 프로그램은 결국…

3일 ago

웹 서버(Web Server)와 WAS(Web Application Server) 알아보기

서론 현대 웹 애플리케이션 아키텍처에서 웹 서버(Web Server) 와 웹 애플리케이션 서버(WAS, Web Application Server)…

1개월 ago

HTTP 헤더(Header)란 무엇인가?

HTTP 헤더(Header)란? HTTP(Header)는 클라이언트와 서버 간에 교환되는 메타데이터로, 요청(Request)과 응답(Response)에 부가적인 정보를 실어 나르는 역할을…

2개월 ago

인프런 워밍업 클럽 스터디 3기 – 백엔드 클린 코드, 테스트 코드 후기

Readable Code: 읽기 좋은 코드를 작성하는 사고법Practical Testing: 실용적인 테스트 가이드 강의와 함께한 인프런 워밍업 클럽…

2개월 ago

인프런 워밍업 클럽 스터디 3기 – 백엔드 클린 코드, 테스트 코드 4주차 회고

Readable Code: 읽기 좋은 코드를 작성하는 사고법Practical Testing: 실용적인 테스트 가이드 강의와 함께한 인프런 워밍업 클럽…

2개월 ago