728x90
시맨틱 태그
시맨틱 태그란 사람이 이해하기 쉽도록 태그의 이름만 보고도 역할이나 위치를 알 수 있도록 만든 태그들입니다.
시맨틱 태그 장점
- 검색엔진 최적화(SEO)
- 쉬운 소스코드 구조화
- 코드 가독성 향상
1. 검색엔진 최적화(SEO)
검색엔진이 알맞은 검색결과를 내기 위해 웹사이트를 크롤링할 때 웹사이트의 내부에 담긴 정보를 토대로 사이트를 분석합니다. 그럴 때, 의미있는 태그를 사용하면 좀 더 정확한 구조로 분석할 수 있도록 도울 수 있습니다.
2. 쉬운 소스코드 구조화
브라우저가 웹 문서의 소스 코드를 보고 어느 부분이 헤더인지, 어느 부분이 본문인지를 쉽게 알아낼 수 있습니다. 웹 문서를 분석하는 서비스 (ex. 스크린 리더기) 같은 것들이 있을 때 분석하기 용이해집니다.
3. 코드 가독성 향상
여러 사람과 함께 작업을 할 때, 굳이 클래스를 지정하지 않아도 쉽게 어느 부분이 헤더 영역이고, 본문 영역인지 쉽게 알 수 있습니다. 그래서 유지보수를 하기도 쉬워집니다.
시맨틱 태그 종류
- header : 헤더 영역에 사용하는 태그, 로고 등이 들어있다.
- nav : 네비게이션 바(메뉴) 영역에 사용하는 태그.
- section : article 보다 큰 영역을 나타낼 때 사용하는 태그.
- article : 보통 제목 태그와 문단 태그를 포함하며, 개별 콘텐츠에 사용하는 태그.
- aside : 사이드 영역에 사용하는 태그, 보통 top버튼이나 본문 영역과 별개의 내용을 포함한다.
- footer : 풋터 영역에 사용하는 태그. 회사의 정보 등이 들어있다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>시멘틱 태그</title>
</head>
<body>
<!-- 내부의 태그 구성을 의미있게 작성하는 것이 매우 중요한 요소가 됨 -->
<div id="header"> <!-- 유일함 -->
<h1>사이트의 로고</h1>
</div>
<div class="gnb"> <!-- 2개이상 -->
<ul>
<li><a href="https://www.naver.com/">네이버</a></li>
<li><a href="https://comic.naver.com/index">네이버 웹툰</a></li>
</ul>
</div>
<div id="content">
<div class="article">
<h2>기사 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="article">
<h2>기사 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<div id="footer">
<span>회사소개</span>
<span>인재채용</span>
<span>이용약관</span>
<div/>
</body>
</html>GitHub
https://github.com/Qkrwnsgus0522/Web
GitHub - Qkrwnsgus0522/Web
Contribute to Qkrwnsgus0522/Web development by creating an account on GitHub.
github.com
728x90
