-
[HTML] SemantecVScode/HTML 2022. 9. 8. 13:45
* HTML5 semantec 태그를 사용한 웹 페이지.
- HTML5 semantec 구조 태그(주로 body 안에서 사용)
. <header>: 헤더를 의미(회사명/로고).
. <nav>: 네비게이션을 의미(주메뉴 구성)
. <aside>: 사이드에 위치(sub 메뉴/광고)하는 공간을 의미
. <section>: 여러 중심 내용을 감싸는 공간을 의미
. <article>: 글자가 많이 들어가는 부분을 의미
. <footer>: 맺음말(이용약관|주소(위치)|저작권|사이트맵)을 의미
-Semantec 태그는 화면의 구성을 테마(제목, 메뉴, 본내용, 회사소개 등)를 태크로 구분함으로써 외부에서 검색을 할경우 효과적인 검색내용을 제공하지 위한 목적으로 만들어 짐.
-그 외 영역별 개발화면 구분 등에 활용이 되기도 하지만, 메뉴에서 또는 제목에서 검색어를 검색하는 오류를 줄이기 위한 목적이 더 크게 사용됨.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Semantec.html</title> </head> <body> <header><h1>회사</h1></header> <nav><ul><li>회사소개</li><li>사업소개</li><li>채용정보</li></ul></nav> <section> <aside> <h2>회사소개</h2> <ul> <li>CEO 인사말</li><li>회사개요</li> <li>회사연혁</li> <li>찾아오시는길</li><li>사이트맵</li> </ul> </aside> <article> <h2>CEO 인사말</h2> <p>고객 여러분 반갑습니다. 지난 2021년 ... 어쩌구 저쩌구....</p> <p>고객 여러분! 감사합니다.</p> </article> </section> <footer> <span>이용약관 | 개인정보처리방침 | 이메일무단수집거부</span> <span>회사명<br>주소. Tel : 010-1000-1000</span> </footer> </body> </html>
'VScode > HTML' 카테고리의 다른 글
[HTML] div, span, 특수기호 (0) 2022.09.08 [HTML] Table (0) 2022.09.08 [HTML] List (0) 2022.09.08 [HTML] Marquee (0) 2022.09.08 [HTML] Anchor (0) 2022.09.08