개발노트/HTML5 정리

휴라드버풀 2019. 12. 22. 03:16

오늘은 오랜만에 HTML 태그 정리글을 작성해보려고 합니다.

시간이 늦은 관계로 정리 대상이 된 태그는 바로 <h> 태그 입니다.

<h> 태그는 headings의 약자 입니다.

축구에서 헤딩은 아니고요 ㅎㅎㅎ

사전적 정의를 살펴보면 '표제', '제목' 이라는 뜻이라는 것을 알 수 있습니다.

보통 한 주제에 대한 제목인 것이죠.

자 이제 이 태그가 어떻게 쓰이는지 아래 소스를 보겠습니다.

<body> </body>안에 쓰이는 태그 입니다.

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

자 이 태그를 적용하여 보시면 아래와 같은 것을 알 수 있습니다.

Heading 1

Heading 2

어떤 곳에 써야 할지 감이 오시나요?

물론 h1 to h6 각 각의 글씨 사이즈 역시 조정 할 수 있습니다. CSS를 통해서 말이죠.

HTML5는 웹 접근성에 중요한 의미 및 목적을 두고 있기 때문에, 내가 표현하고자 하는, 혹은 유도하고자 하는 목적에 대해 어울리는 태그를 반드시 써줘야 합니다. 위 <h>태그는 제목 또는 작게 쓰일 간단한 제목, 표제 등에 어울리는 태그라고 할 수 있겠죠?!

https://www.w3schools.com/ 에서는 아래와 같이 사용법을 정의하고 있습니다.

The <h1> to <h6> tags are used to define HTML headings.

<h1> defines the most important heading. <h6>defines the least important heading.

h1은 가장 중요한 제목, h6는 가장 중요도가 낮은 제목을 정의한다고 하네요.

그럼 <h>태그는 이 정도로 정리 하도록 하겠습니다.

<h>태그에 쓰이는 속성들은 HTML5에서는 지원하지 않도록 하고 있어 속성 정리는 없습니다.

겨우 이 글 쓰는데도 후딱 한 시간이 지나버렸습니다..

제 스스로의 정리겸 적는것이기도 하지만, 정말 혹시나 html을 처음 접하시는 분을 위해서도 잘못된 정보가 전달 되지 않도록 위 site를 참고하며 적고 있습니다.

비전공자 여러분들 또는 처음 html을 접하시는 여러분 모두 성부하세요! ㅋ (성공적 공부) ㅎㅎ