📝HTML 문서 구조화
📌공간 분할 태그
| 태그 | 설명 |
|---|---|
| div | 블록 형식으로 공간 분할 |
| span | 인라인 형식으로 공간 분할 |
블록 형식은 각 태그가 한 행을 차지한다는 것이고
인라인 형식은 각 태그가 자신의 글자 크기만큼 차지하며 왼쪽에서 오른쪽으로 쌓임.
<body>
<div>div태그 - 블록형식</div>
<div>div태그 - 블록형식</div>
<div>div태그 - 블록형식</div>
</body>👉🏻결과
<body>
<span>span태그 - 인라인형식</div>
<span>span태그 - 인라인형식</div>
<span>span태그 - 인라인형식</div>
</body>👉🏻결과
📌블록 형식 태그와 인라인 형식 태그 정리
| 블록 형식 태그 | 인라인 형식 태그 |
|---|---|
| div 태그 | span 태그 |
| h1~h6태그 | a태그 |
| p태그 | input태그 |
| 목록 태그 | 글자형식 태그 |
| 테이블 태그 | 입력양식 태그 |
📌시맨틱 태그
코드의 가독성을 높여준다.
| 태그 | 설명 |
|---|---|
| header | 머리말(페이지 제목, 페이지 소개) |
| nav | 하이퍼링크들을 모아 둔 내비게이션 |
| aside | 본문 흐름에 벗어나는 노트나 팁 |
| section | 문서의 장이나 절에 해당하는 내용 |
| article | 본문과 독립적인 콘텐츠 영역 |
| footer | 꼬리말(저자나 저작권 정보) |
<body>
<header>
<h1>HTML5 기본</h1>
</header>
<nav>
<ul>
<li><a href ="#">메뉴 - 1</a></li>
<li><a href ="#">메뉴 - 2</a></li>
<li><a href ="#">메뉴 - 3</a></li>
</ul>
</nav>
<section>
<article>
<h1>Lorem ipsum dolor sit amet</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</article>
<article>
<h1>Lorem ipsum dolor sit amet</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</article>
</section>
<footer>
<address>서울특별시 강서구 마곡동</address>
</footer>
</body>👉🏻결과
The only thing worse than starting something and failing...is not starting something