✏️<article> <selection> <div> 차이
<article>은 독립적인(재사용 가능한) 영역을 설정. 제목 태그(<h1>..)를 포함하여 식별한다. ex)기사, 블로그
<selection>은 제목 태그(<h1>..)를 포함하여 식별.
<div>는 가장 무의미. 스타일을 적용시키기 위한 용도.
<article>과 <selection>은 부모 자식 관계가 정해져 있지 않기 때문에 이미지와 반대로 <article> 안에 <selection>이 들어갈 수 있다.
예제
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>콘텐츠 구분 예제</title>
<link rel="stylesheet" href="./main.css">
</head>
<body>
<header>
<nav>
<ul>
<li>메뉴1</li>
<li>메뉴2</li>
<li>메뉴3</li>
</ul>
</nav>
</header>
<main>
<section>
<h1>Section</h1>
<article>
<h2>Article</h2>
<p>Contents...</p>
</article>
<article>
<h2>Article2</h2>
<p>Contents...</p>
</article>
<article>
<h2>Article3</h2>
<p>Contents...</p>
</article>
</section>
<aside>
Aside
</aside>
</main>
<footer>
<address>
<a href="mailto:rachu970605@gmail.com">rachu970605@gmail.com</a>
<a href="tel:+821012345678">010-1234-5678</a>
</address>
</footer>
</body>
</html>728x90
'웹 퍼블리싱 > HTML5' 카테고리의 다른 글
| <hr> 태그도 사각형 요소다. (1) | 2023.12.20 |
|---|---|
| <dl>, <dt>, <dd>를 <ol>, <ul>, <li>로 대체 (0) | 2023.12.20 |
| 제목 태그 <h1>~<h6> (0) | 2023.12.20 |
| 블록 레벨(Block level)요소와 인라인(Inline)요소 (feat.div와 span태그 차이) (1) | 2023.12.19 |
| HTML 기본 (0) | 2023.12.15 |