• 블록태그 : 항상 새 라인에서 시작, 양 옆에 컨텐츠를 배치하지 않음
  • 인라인태그 : 블록 안에 위치, 현재 위치에 이어서 시작, 양옆에 컨텐츠 배치 가능
태그명 구분 내용
<hn></hn> 블록태그 n : 1~6 , 1이 제일 크고 6이 제일 작다.
<p></p> 블록태그 줄바꿈 없이 한 줄로 표시함. 브라우저에 맞게 자동 줄바꿈 된다. 상하여백 있음
<div></div> 블록태그 자체적인 의미 없이, 내용을 통째로 한 묶음으로 만들어 스타일을 적용할 때 주로 사용. 상하여백 없음.
<hr> 블록태그 수평선
<blockquote></blockquote> 블록태그 인용글. 다른 텍스트보다 안으로 들여써짐.
<pre></pre> 블록태그 소스에 표시한 공백이 그대로 표시 됨.
<strong> 인라인태그 경고나 주의사항 같이 중요한 내용을 강조함. (화면낭독기에서 강조되었다고 알려줌)
<b> 인라인태그 문서의 키워드처럼 단순히 굵게 표현.
<em> 인라인태그 기울인 글씨. 중요한 내용을 강조.
<i> 인라인태그 단순한 기울임체. 생각, 꿈, 기술적 용어, 다른 언어의 관용구 등에서 사용.
<q></q> 인라인태그 인용글. 다른 문장들과 구분이 되도록 따옴표가 자동 삽입된다.
<mark></mark> 인라인태그 형광펜. CSS bg-color를 통해 형광펜 색 변경 가능.
<span></span> 인라인태그 자체적인 의미 없음. 내용의 일부를 한 묶음으로 만들어 스타일을 적용 할 때 주로 사용
<figure></figure> 블록태그 설명이 필요한 대상을 figure 태그로 묶고, 설명 글은 figcaption 태그로 묶음.
(표, 이미지, 오디오, 비디오, 텍스트 등)
<figcaption></figcaption>

 

'HTML & CSS' 카테고리의 다른 글

[CSS] placeholder 글자색 바꾸기  (0) 2021.07.23
[HTML] input, textarea 태그  (0) 2021.07.23
[HTML] a, form, label 태그  (0) 2021.07.23