[HTML] Heading 태그

2023. 3. 7. 01:11기술 창고/HTML

728x90
SMALL
<!DOCTYPE html>
<html lang="ko">
    <head> 
        <meta charset="utf-8"> 
        <title>Heading Tag</title> 
    </head>
    <body> 
        <!-- O -->
        <h1>Heading 1</h1>
        <h2>Heading 2</h2>
        <h3>Heading 3</h3>
        <h4>Heading 4</h4>
        <h5>Heading 5</h5>
        <h6>Heading 6</h6> 
        
        <!-- X -->
        <h1>Heading 1</h1>
        <h3>Heading 3</h3>

        <!-- 틀린건 아니지만 애매한 경우 -->
        <h1>Heading 1</h1>
        <h3>Heading 3</h3>
        <h2>Heading 2</h2>
    </body>
</html>

<!--
    # ctrl + / = 지정한 부분 주석 처리

    # <h1>, <h2>, <h3>... = 주로 제목에 대한 내용을 지정하는 태그이다.
                            h1이 가장 크며, 숫자가 커질 수록 작아진다.
                            h1이 가장 크면서 그만큼 중요도가 높기 때문에 보통 사이트 페이지의 헤더 타이틀 부분에 자주 사용된다.


    # <h> 와 관련된 태그들을 크기에 따라 중요도 표준이 있다.
        각 h 태그의 가장 근접한 하위의 태그들을 스킵하고 다른 하위의 태그를 먼저 사용하면 올바르지 않다.
        예 : h1 태그 다음 h2 태그를 스킵하고 h3 태그를 사용한 경우

        또한 h 태그와 다른 하위 h 태그 사이에 더 작은 하위 h 태그를 사용하는 것은 틀린 것은 아니지만 애매하다고 볼 수 있다.
        예 : h1 태그와 h2 태그 사이에 h3 태그를 사용한 경우

    !! 사용 표준이 있긴 하지만 스타일 상 매번 다양하게 운용되기 때문에 반드시 지켜야될 필요는 없다.
-->
  • <h1> ~ <h6> : 제목을 지정하는 태그. h1이 가장 크며 h6이 가장 작다.
  • ctrl + / 로 지정한 범위의 코드들을 주석처리할 수 있다.

heading 태그는 사용 표준이 있다.

각 h 태그의 가장 근접한 하위의 태그들을 스킵하고 다른 하위의 태그를 먼저 사용하면 올바르지 않다.
예 : h1 태그 다음 h2 태그를 스킵하고 h3 태그를 사용한 경우

또한 h 태그와 다른 하위 h 태그 사이에 더 작은 하위 h 태그를 사용하는 것은 틀린 것은 아니지만 애매하다고 볼 수 있다.
예 : h1 태그와 h2 태그 사이에 h3 태그를 사용한 경우

 

다만 표준일 뿐 매번 다양하게 운용되기 때문에 반드시 지켜야될 필요는 없다.

 

# 실행한 결과

 

728x90
반응형
LIST

'기술 창고 > HTML' 카테고리의 다른 글

[HTML] 시멘틱 (semantic) 구분  (0) 2023.03.07
[HTML] paragraph 텍스트  (0) 2023.03.07
[HTML] 시멘틱 (semantic) 태그  (0) 2023.03.07
[HTML] div 태그로 그룹화  (0) 2023.03.07
[HTML] 텍스트 정의 요소들  (0) 2023.03.07