시맨틱 태그

  • 시맨틱 태그(Semantic Elements) : '의미를 갖는다' 는 뜻으로, 스스로 자신이 사용된 의미를 명확히 전달해 주는 요소를 의미

 

 

  • 시맨틱 태그의 종류
    • header : 사이트에 대한 소개 정보나 메인 메뉴, 사이트 로고 등이 포함됨
    • hgroup : 제목과 부제목을 묶는 역할 (현재 W3C HTML5 명세서에서 제거되었으나 브라우저에서는 지원됨)
    • nav : 사이트의 메뉴나 링크 같은 내비게이션 요소들이 포함
    • section : 실제 문서 내용이 들어감
    • article : 문서 내용이 많을 경우 여러개의 <article> 요소로 나눌 수 있음
    • aside : 문서의 주요 내용 외의 내용들을 넣어 문서의 주영역 주변에 배치
    • footer : 작성자 정보나 저작권 정보, 또는 관련 문서 링크 등 부사 정보를 담고 있음. 주로 문서 하단에 배치

    출처 : https://tcpschool.com/html/html5_element_semantic

     

    • 시맨틱 태그의 활용
    <body>
 	<header>
 		<hgroup>
 			<h1>플라워마켓</h1>
 			<h4>아름다운 꽃들을 만나보세요.</h4>
 		</hgroup>
 		<nav>
 			<ul>
 				<li><a href="1.html">메뉴 </a></li>
 				<li><a href="2.html">튤립</a></li>
 				<li><a href="3.html">프리지아</a></li>
                <li><a href="4.html">국화</a></li>
 			</ul>
 		</nav>
 	</header>
 	<section>
 		<header><h3>베스트 상품</h3></header>
 		<article>
 			금주의 베스트 상품은 망고튤립입니다.
 		</article>
 	</section>
 	<footer>
 		&copy; 플라워마켓
 	</footer>
</body>

     

    저작자표시 비영리 변경금지

    'Web > HTML5' 카테고리의 다른 글

    [HTML] 파일(File) API  (0) 2021.08.09
    [HTML] 웹 스토리지(Web Storage) API  (0) 2021.08.09
    [HTML] 비디오 태그 <video>, 오디오 태그 <audio>, iframe 태그  (0) 2021.07.28
    [HTML] 입력 양식 태그 <form>  (0) 2021.07.28
    [HTML] 목록 태그 <ul> <ol>, 표 태그 <table>  (0) 2021.07.28

    티스토리툴바