HTML 태그 모음 1탄

HTML 태그는 HTML(HyperText Markup Language) 문서의 구성 요소로서 웹 페이지의 콘텐츠를 정의하고 구조화하는 데 사용된다. 태그는 꺾쇠괄호(<와 >)로 둘러싸인 키워드로 구성되며 대부분의 경우 시작 태그와 종료 태그로 이루어져 있다. 종료 태그는 시작 태그와 동일한 키워드를 사용하되 키워드 앞에 슬래시(/)가 붙는다.

자주 사용되는 태그

html: HTML 문서를 정의하는 루트 요소이다.
head: 문서의 메타데이터를 포함하는 요소이다.
meta: 페이지의 메타데이터를 설정하는 요소이다.
title: 웹 페이지의 제목을 정의하는 요소이다.
link: 외부 파일(예: CSS)과 연결하는 요소이다.
body: 웹 페이지의 내용을 담는 요소이다.
h1, h2, h3, h4, h5, h6: 제목 태그로, 중요도에 따라 h1부터 h6까지 사용한다.
p: 단락을 정의하는 요소이다.
br:줄을 바꾸는 요소이다.
div: 영역 또는 섹션을 정의하는 요소이다.

1. html요소는 HTML 문서의 루트 요소로 페이지의 시작과 끝을 정의한다. lang 속성을 사용하여 페이지의 기본 언어를 지정할 수 있다.

<!DOCTYPE html>
<html lang="ko">
...
</html>

2. head는 문서의 메타데이터를 포함하는 영역이다. 메타데이터는 웹 브라우저에서 사용되거나 검색 엔진 최적화를 위해 사용된다.

<head>
  <meta charset="UTF-8">
  <title>페이지 제목</title>
  ...
</head>

3.meta는 페이지의 메타데이터를 설정한다. charset 속성은 문자 인코딩을 지정하고 viewport는 반응형 웹 디자인을 위한 설정을 지정한다.

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

4.title는 웹 페이지의 제목을 정의하며 웹 브라우저의 탭이나 북마크에서 표시된다.

<title>페이지 제목</title>

5.link는 외부 파일과 연결한다. 대표적으로 CSS 파일과 연결하여 스타일을 적용할 수 있다.

<link rel="stylesheet" href="styles.css">

6.body는 웹 페이지의 내용을 담는다. 모든 시각적 요소는 이 영역 내에 위치해야 한다.

<body>
  ...
</body>

7. 제목 태그는 중요도에 따라 h1부터 h6까지 사용하며 구조화된 컨텐츠를 표시한다.

<h1>제목 1</h1>
<h2>제목 2</h2>
<h3>제목 2</h3>
<h4>제목 2</h4>
<h5>제목 2</h5>
<h6>제목 6</h6>

8. p는 단락을 정의하며 텍스트를 구조화하는 데 사용된다.

<p>이것은 단락입니다.</p>

9.br는 텍스트에서 줄을 바꾸는 태그로 닫는 태그 없이 사용된다.

<p>첫 번째 줄입니다.<br>두 번째 줄입니다.</p>

첫 번째 줄입니다.

두 번째 줄입니다.

<h3>주소:</h3>
<p>1234 거리<br>서울특별시<br>대한민국</p>

주소:

1234 거리

서울특별시

대한민국

10.div는 영역이나 섹션을 정의하며 다른 요소들을 그룹화하는 데 사용된다.

<div>
  <p>이것은 div 요소 내부의 단락입니다.</p>
</div>

위 10개의 태그를 활용한 예시는 아래와 같다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>예시 웹 페이지</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>메인 제목</h1>
    <h2>부제목</h2>
    <p>첫 번째 줄입니다.<br>두 번째 줄입니다.</p>
    <div>
        <h3>영역 제목</h3>
        <p>이 영역은 div 태그로 구성되어 있습니다.</p>
    </div>
    <address>
        <h4>주소:</h4>
        <p>1234 거리<br>서울특별시<br>대한민국</p>
    </address>
</body>
</html>

마치며

HTML 태그 모음은 총 5편으로 예정되어 있으며 총 50개의 태그를 다룰 예정입니다.

저작자표시 비영리 변경금지