티스토리 뷰

[Dev]/HTML

[HTML] HTML Headings

ossians 2018. 4. 12. 10:35

[HTML] HTML Headings(표제)


HTML Headings(표제)

HTML의 <h1> ~ <h6> 태그로 정의됩니다.

<h> 태그는 <h1> ~ <h6>까지 있으며 <h1> 태그는 가장 중요한 표제를 <h6>가장 중요하지 않은 표제로 순차적인 우선순위를 가집니다.

브라우저는 <h> 태그에 자동으로 공백을 추가합니다.


<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <h1>Header1</h1>
    <p>Hello My World</p>
    <p>Ossian Tistory<p/>
  </body>
</html>





<h> 태그의 중요성

검색엔진은 <h> 태그를 사용하여 웹페이지의 구조와 내용을 색인합니다.

따라서 문서를 구조화 하려면 <h> 태그를 사용하여 구조를 만드는것이 중요합니다.


<h> 태그에는 간략히 제목으로 사용할 문구만 작성하며  많은 내용을 담지 않는 것이 좋습니다.



<h> 태그의 크기 변경

<h> 태그는 각각 기본적인 폰트 크기를 가지고 있습니다. 그러나 Font-Size 속성 또는 CSS Style을 적용하여 <h>태그의 크기를 변경할 수 있습니다.


<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <h1 style="font-size:10px;">Header1</h1>
    <h2>Header2</h2>
  </body>
</html>





<hr> 태그

<hr> 태그는 HTML 문서의 수평선을 만들어 문단을 분리하는데 사용합니다.

<hr> 태그를 사용하지 않을 경우 <h1> ~ <h2>는 하나의 문단이 되지만 <hr> 태그를 사용하여 <h1>, <h2> 두개의 문단이 형성됩니다.


<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <h1>Header-1</h1>
    <p>This is some text.</p>
    <hr>
    <h2>Header-2</h2>
    <p>This is some other text.</p>
  </body>
</html>





<head> 태그의 요소

<head> 태그는 HTML 문서의 메타 데이터를 정의하는 공간입니다.

메타 데이터는 HTML 문서에 대한 데이터를 의미하며 웹 페이지에 표시되지 않습니다.


<!DOCTYPE html>
<html>
  <head>
    <title>My Ossian Tistory</title>
    <meta charset="UTF-8">
  </head>
  <body>
  </body>
</html>



"charset="UTF-8"은 웹페이지의 문자에 대한 인코딩 방식을 의미합니다.

자세한 내용은 charset에 대하여 따로 포스팅 하겠습니다.



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

'[Dev] > HTML' 카테고리의 다른 글

[HTML] HTML Attributes  (0) 2018.04.10
[HTML] HTML Basic  (0) 2018.04.09
공유하기 링크
Comments
Related Articles more
최근에 올라온 글