[코드잇 풀스택 1기] - 시맨틱 태그

Semantic Tag ?

Semantic(의미의, 의미론적인)의 뜻으로

의미를 가진 태그라고 해서 시맨틱 태그라고 합니다.

 

시맨틱 태그 요소로

자주 사용하는 태그

 

<header>, <nav>, <main>, <footer>

<article>, <section>, <figure>

태그	설명
<header>	문서나 섹션의 머리말, 로고, 제목, 탐색 링크 등을 포함할 수 있음
<nav>	탐색 링크를 정의하며, 주로 메뉴, 목차 등을 포함
<main>	문서의 중요 내용을 나타내고, 문서에서 하나만 사용 함
<footer>	문서나 섹션의 바닥글을 나타내며, 저작권 정보, 연락처 등 사용
<article>	독립적으로 구분된 콘텐츠를 나타내며, 블로그 글, 뉴스 등 포함할 수 있음
<section>	일반적으로 제목을 포함
<figure>	이미지, 다이어그램 등 독립적인 콘텐츠를 나타냄

 

여기서 main 같은 경우 한 페이지(html)에
main은 단 1개만 사용할 수 있습니다.

요소 main은 문서의 주요 내용을 나타내기 때문에,
main 문서에는 속성이 지정되지 않은 요소가 두 개 이상 있어서는 안 됩니다.
아래 html 명세서, 참고 내용 참고하세요!

 

 

참고내용

 

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/main

<main>: The Main element - HTML: HyperText Markup Language | MDN

https://html.spec.whatwg.org/#the-main-element

HTML Standard

 

 

왜 사용할까 ?

div를 사용해서 다 만들어도 상관이 없을 텐데....

 

좋은 점 :

 

검색 최적화(Search Engine Optimization) SEO

만들어진 웹 사이트가 어떤 정보가 들어가 있는지 빠르게 파악할 수 있고,

그 내용을 토대로 정확도를 높 우선순위를 만들어준다.

 

의미 전달

태그마다 의미가 있고 각 부분의 역할이 명확히 전달됩니다.

개발자와 디자이너가 코드를 읽고 이해하는데 큰 도움이 됩니다.

하나의 약속이라고 생각하시면 좋을거 같아요!

유지보수도 편하겠죠!?