HTML5와 시맨틱(semantic) 태그, 검색 엔진 최적화
목차
HTML5와 시맨틱 태그
시맨틱(semantic) : "의미, 의미론적인"
HTML5에 도입된 시맨틱 태그는 개발자와 브라우저에게 의미있는 태그를 제공합니다.
검색 엔진 최적화에서 시맨틱 태그는 매우 중요한 요소입니다.
그렇기 때문에 검색 결과에 많은 노출을 시키고 싶다면 시맨틱 태그를 필수로 사용하는 것이 좋습니다.
<div> : non-semantic 태그, 안에 들어갈 의미를 크게 유추하기 힘듭니다.
<header>, <footer> : semantic 태그, 특정 형태의 글이 포함될 것이라는 유추가 가능합니다.
header : 상단, 헤더를 의미
nav : 메뉴, 내비게이션을 의미
aside : 사이드에 위치하는 공간을 의미
section : 여러 중심 내용을 감싸는 공간을 의미
article : 글자가 많이 들어간 부분을 의미
footer : 하단, 푸터를 의미
<header> 태그
1. 머리말 지정
2. 사이트 전체의 헤더는 주로 페이지 맨 위쪽이나 왼쪽에 삽입하며
헤더의 내용으로는 주로 <form>태그를 사용해 검색 창을 넣거나
<nav>태그를 연동하여 사이트 메뉴를 넣습니다.
<nav> 태그
1. 문서를 연결하는 내비게이션 링크
2. 내비게이션 역할을 하는 <nav>태그는 동일한 사이트 안의 문서나
다른 사이트의 문서로 연결하는 링크 모음을 나타냅니다.
3. <nav>태그는 내비게이션 메뉴 뿐 아니라 <footer>에 있는 사이트 링크 모음 부분에도 많이 사용됩니다.
<section> 태그
1. 주제별 컨텐츠 영역 나타내기
2. <section>태그는 문맥 흐름 중에서 컨텐츠를 주제로 묶을 때 사용하며
그 안에는 섹션 제목을 나타내는 <h1> ~ <h6>제목 태그가 함께 사용됩니다.
<aside> 태그
1. 본문 이외의 내용 표시
2. 블로그에서 왼쪽이나 오른쪽 또는 하단에 사이드 바가 표시된 형태입니다.
3. 필수 요소가 아니므로 광고나 링크 모음 등 문서의 메인 내용에 영향을 미치지 않는 내용을 넣을 때 사용합니다.
<article> 태그
1. 컨텐츠 내용 넣기
2. 웹 상의 실제 내용을 넣고, 보통 블로그의 포스트나 웹 사이트의 내용,
사용자가 등록한 코멘트, 독립적인 웹 컨텐츠 항목을 포함합니다.
<footer> 태그
1. 제작 정보와 저작권 정보 표시
2. 웹 문서 끝자락에 들어가는 태그
3. <footer>태그 안에는 <section>, <article> 등 다른 레이아웃 태그들을
모두 사용할 수 있으며, 이런 태그를 이용해서 푸터 안에 다양한 정보를 넣습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5와 시맨틱 태그</title>
<style>
body {
width: 440px;
margin-left: auto;
margin-right: auto;
}
header, nav, section, article, aside, footer {
display: block;
width: 400px;
margin: 4px;
padding: 4px;
background-color: #ddd;
text-align: center;
}
section {
float: left;
width: 280px;
height: 60px;
}
article {
width: 264px;
background-color: #efefef;
}
aside {
float: left;
width: 104px;
height: 60px;
}
footer {
overflow: hidden;
}
</style>
</head>
<body>
<header>header</header>
<nav>nav</nav>
<aside>aside</aside>
<section>
section
<article>article</article>
</section>
<footer>footer</footer>
</body>
</html>'KoreaIt Academy > HTML & CSS' 카테고리의 다른 글
| [프론트 실습] 템플릿을 수정하여 회원가입, 로그인창 만들어 보기 (0) | 2021.08.20 |
|---|---|
| [CSS] 웹 앱 반응형 개발, 미디어 쿼리(media query) (0) | 2021.08.20 |
| [CSS] 폰트 크기(em, rem, px), 글꼴(구글 폰트 적용 방법), 글씨 굵기 (0) | 2021.08.20 |
| [CSS] 우선순위(캐스캐이딩(Cascading)) (0) | 2021.08.20 |
| [CSS] 선택자(전체 선택자, 요소 선택자, 클래스 선택자, 아이디 선택자, 그룹 선택자) (0) | 2021.08.20 |
댓글