p 태그: 문단(Paragraph)
- 언제 사용?
문장이 하나 이상 있는 완성된 문단일 때 사용 - 기본적으로 줄 바꿈이 포함된다.
<p>이 문장은 하나의 완성된 문단입니다. 여러 문장이 들어가도 괜찮습니다.</p>span 태그: 인라인 요소
- 언제 사용?
문장 안에서 일부분만 스타일을 바꾸거나 자바스크립트로 조작하고 싶을 때 사용 - 줄 바꿈이 되지 않음.
<p>
이 문장에서 <span style="color: red;">강조하고 싶은 단어</span>에만 색을 입혔습니다.
</p>div 태그: 블록 컨테이너
- 언제 사용?
문서의 레이아웃이나 구조를 잡을 때 사용
특별한 의미가 없으므로 꼭 필요한 경우에만 사용한다.
<div class="content">
<h2>소개</h2>
<p>이곳은 소개 문단입니다.</p>
</div>주의: p 안에 div, h1~h6, 다른 p는 넣으면 안 됨
p는 블록 요소를 포함할 수 없는 태그이기 때문에, 아래처럼 쓰면 HTML 오류가 발생할 수 있다.
<!-- 잘못된 예시 -->
<p>
이 안에 <div>div를 넣는 건 잘못된 문법입니다.</div>
</p>자주 쓰는 기타 태그
| 태그 | 용도 | 설명 |
|---|---|---|
strong | 중요 강조 | 의미 중심 강조 (검색 엔진도 중요하게 인식) |
em | 말의 억양 강조 | 보통 기울임으로 표시됨 |
mark | 하이라이트 | 검색 결과 강조 등에 사용 |
article, section | 의미 있는 구조 | 콘텐츠 단위 구분 |
main, aside 등 | 레이아웃 구성 | 전체 레이아웃의 의미 있는 분할 |
기록하자