3. 제목, 문단, 인용구, 인용문, 강조 요소

Joo·2022년 5월 15일
0

HTML

목록 보기
3/3
post-thumbnail

💛제목 요소

<h1></h1>
~ 
<h6></h6>

제목에 관한 요소로 h1 ~ h6 까지있습니다.
중요도는 1이 가장 높고 6이 가장낮습니다.
해당 제목요소를 사용할때는 순서대로 사용을 해야하는데 이 뜻은 h1을 쓴다음 바로다음에 h4가 오거나 할 수 없다는 뜻입니다. h1을 썼으면 그다음에는 h2를 입력해야합니다.

왜 이렇게 순서대로 써야할까?

-> 그 이유는 바로 웹 접근성 과 구조적으로 이상적이기 때문입니다.

그리고 페이지당 h1을 하나만 쓰는게 좋습니다.
왜냐하면 h1은 가장 중요한제목이기 때문에 그 페이지의 목적을 입력하기에 알맞습니다. 제목이 여러개인 책이 없는것과 같다고 생각하면 됩니다.

💛문단 요소

<p>문단 p태그</p>

문단을 입력할때 사용하는게 p태그입니다.
그리고 이런 문단안에서 줄바꿈을 하고 싶을때 사용하는것은

<br />

br 입니다. 해당요소는 빈요소입니다.
문단을 작성하다 띄어쓰기를 한번더 하고싶다고하면

&nbsp; 

를 입력합니다. 띄어쓰기의미를 가지고있습니다. 기본적으로 p요소에서 한번의 띄어쓰기는 인식이되어 자동으로 표시되지만 두번띄어쓰기를 하고싶을때는 따로 위의 공백을 나타나내는 특수문자를 사용해야합니다.

💛인용구, 인용문 요소

<q>인용구 요소</q>

q태그는 인용구를 입력할때 사용합니다.
q를 사용하면 압뒤로 "" 가 붙어서 나와 인용구임을 표시해줍니다.
짧은 인용구를 입력할때는 q를 사용하지만 긴 인용문을 입력해야할때는

<blockquote>인용문</blockquote>

blockquote태그를 사용합니다.
보통 blockquote태그를 사용한곳은 들여쓰기가 되어 표시됩니다.

💛강조 요소

강조요소에는 두가지가있습니다.
의미상 강한강조를, 의미상 약한강조
먼저 강한강조부터 확인해 보겠습니다.

<strong>강한강조</strong>

strong은 의미상 강한강조를 나타낼때 사용합니다.
사용하면 bold체 처럼 글씨가 진하게 나타납니다.
그리고 strong을 사용하면 스크린리더로 읽었을때 크게 혹은 강조해서 들립니다.

다음으로 의미상 약한강조를 확인해보겠습니다.

<em>약한강조</em>

의미상 약한강조를 나타낼때 사용하는 em 입니다.
사용하면 italic체 처럼 글씨가 기울어져서 보입니다.



이렇게 제목요소, 문단, 인용, 강조 와 관련된 요소들을 살펴보았습니다.
혹시나 잘못된 내용이 존재하거나 추가하면 좋을거같은 내용이 있으면 댓글부탁드립니다!
감사합니다.
profile
Frontend 개발자를 목표로 하고있습니다!

0개의 댓글