H1~H6, P 태그 - 제목과 본문을 작성하는 태그

H1~H6 태그는 문서에서 구조를 구성하는데 중요한 역할을 합니다. 제목과 소제목을 정의하며 주제의 중요도를 표현하는데 사용됩니다. 이는 SEO에도 긍정적인 영향을 미칩니다. P 태그는 문단을 작성하는데 활용되며, 단락 간 여백을 통해 가독성을 향상시킵니다.

H1~H6, P 태그 - 제목과 본문을 작성하는 태그
Photo by Towfiqu barbhuiya / Unsplash

H1~H6 태그가 하는 일

heading 태그라고 불리기도 합니다.

H1부터 H6까지 6개의 태그는 문서 안에서 중요도에 따라 사용됩니다.
제목, 소제목 등 주제에 중요도에 따라서 사용될 수 있습니다.

<h1>가장 큰 heading 태그.문서의 주요 제목을 표현할때 사용됩니다.</h1>
<h2>두번째로 큰 제목, 보통 섹션내에서 사용됩니다</h2>
<h3>세번째로 큰 제목, 섹션 내부에서 하위 주제를 다룰때 사용됩니다.</h3>
<h4>h3 보다 더 작은 주제를 설명할때 사용됩니다.</h4>
<h5>h4 보다 더 작은 주제를 설명할때 사용됩니다.</h5>
<h6>h6 보다 더 작은 주제를 설명할때 사용됩니다. 가장 작은 단위의 소제목입니다.</h6>

Heading 태그들은 단순하게 제목만 표현해주는 것이 아닙니다.
문서의 구조를 설명하는데 중요한 역할을 합니다.  

적절한 Heading 태그 사용을 고려하면 SEO에도 유리합니다.

Heading 태그는 기본적으로 Block level 태그들입니다.
요점만 이야기하면 - 화면에서 가로 폭을 100% 차지한다는 의미입니다.

나중에 CSS 레이아웃을 다룰때 더 자세하게 이야기해보겠습니다.

P 태그가 하는 일

P태그는 문단Paragraph을 작성할 때 사용되는 태그입니다.

<p>P 태그에 들어간 내용은 아무리 길어도 하나의 문단을 이룹니다. 문장이 줄바꿈이 이뤄지지 않고 계속 이어져 - 하나의 문단을 이룹니다. </p>
<p>줄바꿈을 하려면 특정 태그를 사용하는 방법도 있지만, 이렇게 새로운 p 태그를 이용해 새로운 문단을 작성해주면 됩니다.</p>
<p>P 태그가 3번 쓰였으니, 3개의 문단으로 구성된 상태입니다</p>

P태그를 이용해 단락으로 나뉜 문서를 구성할 수 있습니다.

일반적으로 단락과 단락 사이에 기본 여백이 추가됨으로 문서를 읽기 쉽게 만들어줍니다. 꽤 자주 쓰이는 태그 중 하나입니다.

결론

Heading 태그와 P 태그만으로도 아주 간단한 웹 문서를 만들 수 있습니다. CSS를 익히면 레이아웃 구성과 디자인 적인 부분도 만들어낼 수 있습니다.

HTML의 기본 구조에 대한 내용은 이전에 작성한 포스팅을 참고해주시기 바랍니다.

HTML이란 무엇인가 - doctype, html, head, body 태그 소개
HTML은 마크업 언어라고 불립니다. 정보를 효율적으로 전달하기 위해 탄생했습니다. 많은 태그가 있지만, HTML 구조를 설명하는 태그들을 알아보겠습니다. HTML은 CSS와 JavaScript와 함께 사용하면 화려하고 기능적인 웹페이지를 만들 수 있습니다