[HTML] 구조를 잡을 때 사용하는 태그

HTML 태그 구성 요소

목차 / 본문 / 부록

목차

<header>	<!-- 상단 영역 -->
	<img src="elice_logo.png" alt="엘리스 로고">
	<nav>	<!-- 메뉴 버튼 영역 -->
        <ul>
            <li><a href=" ">홈</a></li>
            <li>전체 목록</li>
        </ul>
    </nav>
</header>

<header> 태그

• 웹사이트의 머리글을 담는 공간

<nav> 태그

• 메뉴 버튼을 담는 공간 (navigation)
• <ul>, <li>, <a>와 함께 사용

 

본문

<main role="main"> <!-- 본문 영역 -->
    <article>	<!-- 정보 영역 -->
        <h#> ... </#h>
        ...
    </article>
</main>

<main> 태그

• 문서의 주요 내용을 담는 태그
• IE(Internet Explorer)는 지원하지 않으므로 role="main" 속성 필수 입력

<article>태그

• 문서의 주요 이미지나 텍스트 등의 정보를 담고 구역을 설정하는 태그
• 태그 내에 구역을 대표하는 타이틀 <h#> 태그가 존재해야 함.

 

부록

<footer> <!-- 하단 영역 -->
    <div> <!-- 사이트 정보 -->
        <p>주소 : 서울특별시 OO구 OO로</p>
        <p>이메일 : email@xxxxxx.xxx</p>
    </div>
    <div>
        <p>사업자등록번호 : xxx-xx-xxxxx 대표 : ooo</p>
    </div>
</footer>

<footer> 태그

• 가장 하단에 들어가는 정보를 표기할 때 사용

 

기타

<div> 태그

• 임의의 공간을 만들 때 사용