html

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

by
htmltag

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 태그들은 각각의 역할에 따라 웹페이지를 구조화하고
디자인하는 데 도움을 줍니다.

Leave a Comment