[HTML] Semantec

VScode/HTML

[HTML] Semantec

hvoon 2022. 9. 8. 13:45

* HTML5 semantec 태그를 사용한 웹 페이지.

- HTML5 semantec 구조 태그(주로 body 안에서 사용)

. <header>: 헤더를 의미(회사명/로고).

. <nav>: 네비게이션을 의미(주메뉴 구성)

. <aside>: 사이드에 위치(sub 메뉴/광고)하는 공간을 의미

. <section>: 여러 중심 내용을 감싸는 공간을 의미

. <article>: 글자가 많이 들어가는 부분을 의미

-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>