html5 p 태그 h 태그 관계 컨텐츠 분리하기 using html5 p tag and h tag

p태그와 h태그의 관계는 html에서 컨텐츠로써 관계가 있다. p태그가 어떤 것을 설명한다면 그 어떤 것의 주제는 h태그로써 제목을 설명할 수 있다. 즉, h태그로 제목을 정하고 p태그로 제목에 대한 설명을 작성하면 된다. 보통 이것은 책의 목차를 생각하면 된다. 목차에서 설명이 추가된 것이 있다고 생각하면 이해하기 쉽다.

html5 p 태그 h 태그 관계 컨텐츠 분리하기
using html5 p tag and h tag

html을 이용하여 태그를 만들 때 고려할 사항이 있다.

깊게 생각할 필요는 없는 것이지만 태그의 의미에 연관이 있다.

예상되는 것이 하나가 있지만 검색엔진의 SEO이다.

물론, 이마저도 심각하게 생각할 필요는 없다.

단지, 태그의 의미 때문에 그렇다는 것이지 실제로 검색엔진의 SEO에 얼마나 영향이 가는지는 잘 모르겠다.

h 태그 목적

이전에 h 태그에 다룬 적이 있다.

h 태그는 제목태그로 사용되며 컨텐츠의 구분과 사용자의 관심을 유도하는 역할을 하기도 한다.

컨텐츠를 보고 있는 사용자는 모든 내용을 보지 않는다.

다만, 특정의 표기된 단어 또는 제목태그를 보고 상세한 글을 보게 된다.

• html5 h 제목 태그 사용하기 SEO에 중요할 수도 있다.

h 태그의 목적은 컨텐츠의 분리목적에 있다.

무슨 말일까.

쉽게 말해 목차를 생각하면 된다.

책제목이 h1 이 된다면 그 밑의 소제목들은 h2 로써 컨텐츠를 분리하게 된다.

소제목에 대한 부수적인 제목들을 나눌 필요가 있다면 h3 태그로 분리하면 된다.

p 태그 목적

p 태그의 목적은 당연히 컨텐츠 자체를 말한다.

글이 될수도 있고, 그림이 될수도 있고, 음악파일같은 미디어 파일이 될 수 있다.

이런 형태가 모여 p태그로 묶으면 하나의 부분적인 컨텐츠가 나오게 된다.

h 태그와 p 태그의 관계

목적을 알았으니 관계를 보자.

h 태그는 주제목과 부제목, 소제목으로 나누어 컨텐츠를 분리할 수 있다.

p 태그는 컨텐츠 자체로써 글이나 그림 등이 될 수 있다.

그렇다면 웹페이지에서 h태그와 p태그를 이용해 부분적인 컨텐츠를 나타낼 수 있다.

코드를 보자.

<div>
	<h1>주제목</h1>
    <p class="cont">주제목에 대한 설명</p>
</div>
<div>
	<h2>부제목1.1</h2>
    <p class="cont">부제목1.1에 대한 설명</p>
</div>
<div>
	<h2>부제목1.2</h2>
    <p class="cont">부제목1.2에 대한 설명</p>
</div>
<div>
	<div>
        <h2>부제목3</h2>
        <p class="cont">부제목3에 대한 설명</p>
    </div>
    <div>
        <h3>부제목3.1</h3>
        <p class="cont">부제목3.1에 대한 설명</p>
    </div>
    <div>
        <h2>부제목3.2</h2>
        <p class="cont">부제목3.2에 대한 설명</p>
    </div>    
</div>

이것을 잘 표현한 곳들이 있다.

SEO에 충실하게 만들어진 웹사이트가 될 수도 있다.
어떤 블로그는 여기에 맞게 글을 작성한 곳들이 될 수도 있다.

의외로 찾아보면 많은 곳들이 있다.