Semantic Tag
semantic tag는 html에서 사용하는 tag 중 의미가 있는 tag들을 의미합니다.
의미가 없는 요소(non-semantic)<div>이나<span>같은 태그들은 내용을 예측하기 힘듭니다.
그래서 semantic tag를 사용함으로써 여러 사람에게 그 의미를 전달할 수 있습니다.
의미가 명확해지는만큼 가독성이 높아지고 유지보수가 수월해집니다.
대표적인 시맨틱 태그
보편적으로 많이 사용하는 시맨틱 태그입니다.
배치는 취향에 맞게 자유롭게 할 수 있습니다.
⭕ 예시
- header : 문서의 머리말
- nav : 네비게이션, 링크의 집합
- main : 문서의 본문, 내용들의 집합
- section : 문서의 본문 내의 제목이 있는 관련 컨텐츠의 집합,
- article : 문서의 본문 중 독립적인 내용, section안에 포함 가능
- aisde : 사이드에 배치되는 내용, 메인과 관련이 적은 내용
- footer : 문서의 바닥글 또는 섹션의 꼬리말
⭕html 문서로 확인해보면 다음과 같이 표현됩니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="semantic.css">
<title>Layout Practice</title>
</head>
<body>
<heade>
<h1>header</h1>
</header>
<nav>
<h2>nav</h2>
</nav>
<div>
<section>
<h2>section</h2>
<article>
<h3>article1</h3>
</article>
<article>
<h3>article2</h3>
</article>
</section>
<aside>
<h2>aside</h2>
</aside>
</div>
<footer>
<h2>footer</h2>
</footer>
</body>
</html>개발을 진행하거나 문서를 확인할 때, 의미를 알아보기 쉽고 구역을 구분하기 편리합니다.
느낀점🧐
시맨틱 태그를 알아보기 전에 인라인, 블록 요소에 대해 알아보고 다양한 태그들의 이름과 속성을 먼저 알아봤어야 했는데...
다음 글에서 알아보도록 하겠습니다🥲
시맨틱 태그를 사용하는 것이 검색엔진이 탐색하는 데에도 유리하다고 하니, 웹사이트를 만들 때 이 부분에 대해 많은 고민이 필요할 것 같습니다.
아직도 div로 사용하는 개발자들이 많다고 하는데, 저는 아직 배워가는 단계이니 시맨틱 태그를 사용하는 것에 익숙해져야 겠네요.
나중에 협업을 할 경우에도 한 눈에 알아보기 편하게 만들 수 있도록 연습해야겠습니다.
다음에는 html 작성 예시에 있는 link 같은 태그와 안에 들어있는 속성의 의미 등을 CSS와 함께 알아보도록 하겠습니다!
매일 남기는 말
배워가는 단계에 있는 새싹 개발자입니다. 오탈자나 틀린 정보가 있다면 알려주시면 감사하겠습니다. 행복한 하루 되세요🐹
'개발일기 > Web' 카테고리의 다른 글
| [React]Redux로 상태관리하기 + Redux-toolkit (0) | 2022.08.24 |
|---|---|
| [Node.js] socket.io를 활용하여 채팅구현하기 (2) | 2022.06.16 |
| [Django] Django 기초(프로젝트 및 앱 만들기) (0) | 2022.03.03 |
| [Python] 가상환경(virtual environment) 사용하기 (0) | 2022.03.03 |
| [HTML] html 기본 (0) | 2022.02.12 |