Sementic 태그
이번시간에는 Sementic(의미론적) 태그에 대해서 알아보겠습니다.
먼저 Sementic 태그를 사용하면 다음과 같은 이점을 얻을 수 있습니다.
- 검색엔진 최적화
- 웹 접근성 향상
- 가독성 향상
그럼 이제 HTML의 Sementic 태그에는 어떤것들이 있는지 살펴볼까요?
<header>: 페이지에 대한 정보를 담는 태그. 보통 페이지 상단에 위치<nav>: 네비게이션 링크. 다른 페이지나 같은 페이지 안에 다른 부분으로 이어줌.<aside>: 페이지 전체 내용과는 관련이 있지만, 주요 내용과는 직접적인 연관이 없는 내용을 담고 있음.<main>: 문서의 body의 main content를 정의할 때 사용.<section>: 문서나 응용프로그램의 일반적인 섹션을 표현.<article>: 여러가지 아이템들을 묶어 재사용 가능하도록 그룹화.<footer>: 사이트 하단에 위치. 주로 저작권이나 서비스 제공자 등을 표시.<details>: 추가정보나 요약정보등을 나타냄.<summary>: details의 자녀요소. 내용에 대한 요약이나 캡션등을 나타냄.<figcaption>: details의 자녀요소. 내용에 대한 캡션이나 제목등을 나타냄.<figure>: 일러스트,사진,코드,다이어그램등에 주석을 다는 용도로 사용됨.<mark>: 하나의 문서 내에서 다른 문맥과의 관련성을 나타내기 위해서 참조 목록으로 마킹되거나 하이라이트된 텍스트를 표현.<time>: 24시간 혹은 그레고리력에서의 정밀한 시간을 나타낼 때 사용.
과거에는 div 태그의 class를 정의해서 사용하였지만, 현재는 위 그림과 같이 Sementic 태그를 사용해서 HTML을 작성하는것을 권장하고 있습니다.
실습
먼저 div 태그로 class를 정의하는 방법을 살펴보겠습니다.
참고로 div 태그로 클래스를 생성할때 .뒤에 만들고자 하는 태그이름을 붙이면 자동으로 생성해줍니다.
예를들어 .header 을 입력하면 <div class="header"> 가 생성됩니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Non Sementic Tag</title>
<style>
* {
text-align: center;
}
.header {
border: 2px solid red;
line-height: 55px;
height: 55px;
}
.nav {
border: 2px solid blue;
height: 110px;
}
.main {
border: 2px solid green;
height: 300px;
line-height: 300px;
}
.footer {
border: 2px solid black;
height: 55px;
line-height: 55px;
}
.ul {
list-style: none;
padding-left: 0px;
}
</style>
</head>
<body>
<div class="header">Header 영역</div>
<div class="nav">
<ul>
<li>menu1</li>
<li>menu2</li>
<li>menu3</li>
<li>menu4</li>
</ul>
</div>
<div class="main">Content 영역</div>
<div class="footer">Footer 영역</div>
</body>
</html>
먼저 div의 class를 통해서 만들면 모두 div 태그의 클래스를 정의해서 만들기 때문에 가독성이 떨어진다는 단점이 있습니다. CSS의 스타일을 정의할때도 앞에 .이 붙는다는 차이점이 있네요.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Sementic</title>
<style>
* {
text-align: center;
}
header {
border: 2px solid red;
line-height: 55px;
height: 55px;
}
nav {
border: 2px solid blue;
height: 110px;
}
main {
border: 2px solid green;
height: 300px;
line-height: 300px;
}
footer {
border: 2px solid black;
height: 55px;
line-height: 55px;
}
ul {
list-style: none;
padding-left: 0px;
}
</style>
</head>
<body>
<header>Header 영역</header>
<nav>
<ul>
<li>main1</li>
<li>main2</li>
<li>main3</li>
<li>main4</li>
</ul>
</nav>
<main>Content 영역</main>
<footer>Footer 영역</footer>
</body>
</html>
이제 Sementic 태그를 이용해서 코드를 작성해보았습니다. 해당 내용이 어떤 파트인지 한눈에 알아보기 쉽게 가독성이 좋아졌습니다.
