시맨틱 태그
: -태그만 봤을 때 브라우저가 구성된 구조를 알 수 있는 태그. 시멘틱태그 자체적으로는 기능이 없고, 구조를 구분할 때 사용한다.
-시맨틱태그를 사용하여 개발한 웹사이트를 시맨틱 웹이라고 하며 웹 브라우저가 코드를 읽고 의미를 인식할 수 있는 지능형 웹을 말한다.
-시맨틱은 "의미론적인"이라는 뜻이다. 즉, "태그에 의미를 부여했다".
-웹 사이트의 구조에 사용되는 태그를 표준화함으로써 웹 개발자가 임의로 구성했던 웹 사이트의 구조가 더욱 명확해졌다.
"인터프리터 (해석기)" 에게 바디 부분에 대한 태그의 종류, 목적, 콘텐츠의 내용을 미리 제공하면 식별이 더 빨라진다 (웹 접근성이 좋다).
-인터프리터, 검색엔진, 스크린 리더와 같은 장비등에도 도움을 준다
-휴대용 단말기의 급격한 발전과 접근 방식의 다양화로 인해 문서의 각 부분에 대한 식별은 매우 중요하다.
시맨틱 태그의 종류
- header : 머릿말, 로고, 검색, 탑메뉴 (로그인/회원가입/언어선택 등)
- nav : 내비게이션 바 (냅바(NavBar),GNB, 메인메뉴)
- section : 본문의 내용을 묶어놓은 영역
- article : section 내부에서 독립적으로 구성된 내용을 별도로 묶어놓은 영역
- aside : 본문내용과 연관성이 없는 분리된 내용을 묶어 놓은 영역(광고 배너, 서브 매뉴 등)
- footer : 꼬리말, 회사정보, 저작권, SNS 버튼 등으로 구성된 영역
[실습]
<!DOCTYPE html><!-- 독타입(문서형 정의), DTD(Document Type Definiton) -->
<html lang="ko"><!-- lang 속성에 ko 속성값을 지정, 한국어(ko), 영어(en) -->
<head><!-- 1.웹 페이지의 제목을 정의, 2.문자 인코딩을 정의, 3.문서의 정보를 제공, 4.스타일, 자바스크립트 문서를 포함 -->
<meta charset="UTF-8"><!-- 웹 페이지 인코딩 지정 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 1.반응형 웹 제작(다양한 기기들의 화면 크기에 맞춰준다),
2.width=device-width: 기기들의 너비를 브라우저의 너비에 맞춘다
3.intial-scale=1.0: 초기화면의 줌(zoom)을 1:1로 지정 -->
<title>시맨틱 태그</title><!-- 웹 페이지의 제목을 정의, 웹브라우저의 "제목 표시줄"에 표시된다. -->
<link rel="shortcut icon" href="images/favicon.ico"><!-- 파비콘을 지정 -->
<link rel="stylesheet" href="css/style.css"><!-- 외부 CSS 파일을 HTML 문서에 포함 -->
<style>
/* 내부 스타일시트 적용 */
</style>
<script src="js/script.js"></script><!-- 외부 JavaScript 파일을 HTML 문서에 포함 -->
<script>
//자바스크립트 적용
</script>
</head>
<body>
<header>
<h1>LOGO</h1>
<ul>
<li><a href="#">로그인</a></li>
<li><a href="#">회원가입</a></li>
</ul>
</header>
<nav>
<ul>
<li><a href="#">menu01</a></li>
<li><a href="#">menu02</a></li>
<li><a href="#">menu03</a></li>
</ul>
</nav>
<section>
</section>
<section>
<article>
<h3>Sub Title01</h3>
<img src="https://via.placeholder.com/300x200" alt="더미 이미지">
<p>text01</p>
</article>
<article>
<h3>Sub Title02</h3>
<img src="https://via.placeholder.com/300x200" alt="더미 이미지">
<p>text02</p>
</article>
<aside>
<p>aside text</p>
<p>aside text</p>
</aside>
</section>
<footer>
<h5>LOGO</h5>
<p>copyright © 2022</p>
</footer>
</body>
</html>[결과물]
'Html' 카테고리의 다른 글
| 07. 공간분할태그 (0) | 2022.09.20 |
|---|---|
| 06. 테이블태그 (0) | 2022.09.20 |
| 05. 하이퍼링크 태그 (0) | 2022.09.20 |
| 03.웹 콘텐츠를 저장하는 태그 (0) | 2022.09.20 |
| 01. Html 기본문서 (0) | 2022.09.20 |