안녕하세요 PNcoding입니다 :)
이번 포스팅에선 HTML 태그의 종류에 대해 알아볼게요!
1. 제목태그 h 태그
h 태그는 문서의 제목을 표시할 때 사용하는 태그로서 "heading"의 뜻을 가지고 있습니다.
h 태그는 h1부터 h2, h3 ~ h6까지의 총 6개가 있으며,
h1 태그의 크기가 가장 크게 h6 태그의 크기가 가장 작게 표현됩니다.
즉, h 태그 옆의 숫자가 작아질수록 글자의 크기가 작아진다고 보시면 됩니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>h 태그</title>
</head>
<body>
<h1>h1 태그 입니다.</h1>
<h2>h2 태그 입니다.</h2>
<h3>h3 태그 입니다.</h3>
<h4>h4 태그 입니다.</h4>
<h5>h5 태그 입니다.</h5>
<h6>h6 태그 입니다.</h6>
</body>
</html>
보시다시피 h1 으로 적어준 내용이 가장 큰 것을 확인할 수 있습니다.
하지만 h 태그를 사용할 시 주의하셔야 할 점이 있습니다.
h1 태그를 사용할 시, 반드시 하나의 웹페이지에는 단 하나의 h1 태그만 사용해야 합니다.
또한 그 내용은 웹페이지의 내용과 반드시 연관이 있어야 하며, 그 목적을 정확하게 전달하여야만 합니다.
왜냐하면 여러 가지 검색엔진(구글, 네이버, 다음 등)이 바로 이 h1 태그로 적은 내용을 이용하여 이 웹페이지의 내용을 파악하게 되기 때문입니다.
쉽게 말해 h1 태그의 내용을 제대로 적어야지만 구글에서 관련 검색어를 검색했을 시 나의 웹페이지가 제대로 검색될 확률이 올라간다고 보시면 됩니다.
여러 개의 h1 태그를 사용할 시 오히려 검색엔진이 웹페이지의 내용을 이해하지 못해 구글에 검색되지 않게 될 겁니다.
따라서 검색엔진에 제대로 된 노출을 원한다면 주제에 맞게 h 태그를 정확하게 사용하는 것이 중요합니다.
2. 문단태그 p 태그
p 태그는 paragraph의 앞글자를 딴 것으로 하나의 문단을 표현할 때 사용하는 태그입니다.
기본적으로 내용을 작성 시 동일한 내용을 묶어줄 때 사용이 되며,
다른 내용을 묶기 위해 p 태그를 다시 사용하면 태그와 태그 사이에 약간의 간격이 생성됩니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>p 태그</title>
</head>
<body>
<p>첫번째 문단입니다.</p>
<p>두번째 문단입니다.</p>
</body>
</html>
3. 줄 바꿈 태그 br 태그
앞에서 보았듯이 h 태그와 p 태그를 사용했을 시 줄 바꿈이 된 것을 확인할 수 있습니다.
하지만 html에서는 기본적으로 줄 바꿈이 되지 않습니다.
body 영역 안에서 엔터키를 쳐서 내용을 한번 작성해 보도록 하겠습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>br 태그</title>
</head>
<body>
안녕하세요. PNcoding 입니다.
오늘은 태그의 종류에 대하여 알아보도록 하겠습니다.
</body>
</html>
결과화면을 보시면 "입니다." 뒤에 엔터키(줄 바꿈)를 넣었음에도 불구하고
실제 브라우저에서는 줄 바꿈이 표현되지 않는 것(한 줄로 표현)을 확인할 수 있습니다.
따라서 줄 바꿈을 하기 위해 우리는 태그를 사용하여 줄 바꿈을 해 줄 수밖에 없습니다.
줄 바꿈을 하기 위한 태그에는 br 이라는 태그가 존재합니다.
이 태그는 break의 앞 두 글자를 딴 태그라 보시면 됩니다.
사용 방법은 줄 바꿈을 하고 싶은 내용 뒤에 태그를 삽입해 주면 됩니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>br 태그</title>
</head>
<body>
안녕하세요. PNcoding 입니다.<br>
오늘은 태그의 종류에 대하여 알아보도록 하겠습니다.
</body>
</html>
잘 나오는 것을 확인할 수 있습니다.
그런데 여기서 하나의 의문이 생기실 거예요.
앞에서 사용했던 h 태그나 p 태그는 시작과 종료태그 즉 한쌍으로 구성이 되어있는데
br 이라는 태그는 한쌍으로 구성되어 있지 않은 것을 확인할 수 있습니다.
이러한 태그처럼 종료태그 없이 시작되는 태그 단독으로 사용되는 태그를 단독태그라 불러줍니다.
html 에는 br 태그처럼 몇 개의 단독태그가 존재합니다.
실제 다른 분들의 코드를 보다 보면 단독태그를 사용할 시 태그의 끝자락에 / 를 붙여준 태그와 붙여주지 않은 태그를 보실 수 있을 겁니다.
<br>
<br/>
두 개는 결과화면의 차이가 없습니다.
실제 HTML4 버전에서는 <br> 만 사용했지만
지금 버전인 HTML5 에서는 <br>, <br/>, <br /> 어떤 것을 사용해도 상관없기 때문에 손에 익으신 것으로 사용하시면 됩니다.
br 태그 외 추가적인 단독 태그는 뒤에서 더 다뤄 보도록 하겠습니다.
이렇게 HTML 의 몇가지 태그의 종류에 대하여 알아 보았습니다.
다음 포스팅에선 추가적인 태그의 종류와 사용 방법에 대해 알아보도록 하겠습니다 :)
'HTML & CSS' 카테고리의 다른 글
| [HTML 기초] HTML 태그 종류 (2) - img 태그, a 태그 (33) | 2023.11.01 |
|---|---|
| [CSS 기초] css 선택자 (1) 태그, 클래스, 아이디 선택자 (22) | 2023.11.01 |
| [HTML 기초] HTML 구조 (0) | 2023.10.31 |
| [CSS animation] css 애니메이션 (0) | 2023.02.26 |
| [Visual Studio code] 비주얼 스튜디오 코드 추천 익스텐션 (1) | 2023.02.26 |
