본문 바로가기
개발/HTML

시맨틱 태그(Sementic Tag)...2

by 알짭배기 2023. 9. 9.
반응형

 

시맨틱 태그

 

사전의미는 의미의, 의미론적인 이라는 뜻을 가진 형용사다

 

따라서 의미가 있는 태그를 말한다

 

 

 

그래서 써야하는 이유

 

 

1) 검색엔진 최적화 : 태그를 기반으로 페이지 내 검색 키워드의 우선 순위를 판단한다

2) 구분하여 탐색하기 쉽게 나눠진다

 

 

 

 

홈페이지의 대표적인 사용 기본 구성

 

 

header / nav / section / article / aside / footer

 

 

로 나눠진다

 

 

 

Header

 

 

 

일반적으로 생각하는게 로고 옆에 있고 사람들이 가장 먼저 보는곳이라고 생각하면된다

페이지의 제목과 로고 등 소개하는 내용들이 포함된다.

 

 

nav

 

 

목차나 메뉴 설정을 하는 부분이다.

유사 예시

 

 

 

 

 

 

section

 

 

구체적인 시맨틱 태그가 없는 문서의 독립적인 영역을 나타낸다

 

 

 

body안에 여러개를 넣어 구간을 나눠 작업 할 수 있다.

 

 

 

 

 

 

article

 

 

 

신문 잡지의 글 / 조항

위 의미 대로 한 부분의 글 내용물 같은걸로 생각하면된다.

 

 

 

 

 

 

aside



의미 사전으로 한쪽으로 ,비켜 이며

광고 구역 또는 로그인 구역으로 되어있는데

대부분들은 광고 구역으로 설정되어있다.



 





footer





홈페이지 맨끝이나 쇼핑몰 맨끝에 보면
개인정보처리방침이나 저작권, 작성자에 대한 정보 관련 서류 문서링크를 포함하며
전화번호나 고객센터들이 주로 여기에 많있다.


 





밑에는 이걸 어떤식으로 시작하는지 태그의 내용에 대해 대충 흐름도에 대한 내용을 작성해보았다.



<!DOCTYPE html>
<!-- html : Hyper Text Markup Language
태그 
<태그명>내용</태그명>
시작        /끝
구조를 만들기위해 생성하는구조 : 시멘틱 태그 -->
<!-- 문서 유형 -->
<html lang="en">
    <!-- 웹 문서 시작 -->
<head>
    <!--  문서 헤더 시작 : 서버-클라이언트간 메타정보교환 -->
    <meta charset="UTF-8">
    <!-- 문자 셋  -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--호환성 설정web 표준을 지키기 위한 코드 content="IE=edge" 호환성을 위한 세팅-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 디바이스의 너비에 맞게 페이지 조절 기본배율 1 -->
    <title>Document</title>
    <!-- 문서 타이틀 -->
</head>
<body>
     <!-- 문서 바디 시작 : page code -->
</body>
</html>​