[html]시멘틱 태그

의미있는 요소

장점은

1. 검색 최적화 (seo) 사이트 최적화
(head 태그안에 meta태그 & 시멘틱태그  꼼꼼하게 작성)

네이버에 검색했을 때 상단에 사이트가 검색되게끔하는것

2 웹 접근성(A11y)
스크린리더를 사용하여 시각장애인이 사용할 수 있게 도와줌
장벽없는 인터넷을 만드는데 중요함

---

 

1. header

html문서의 헤더를 정의하는 요소(로고, 네비게이션바 등등 포함)

ex> <header></header>

​

2. section

html 문서의 sction을 정의하는 요소

section이란 제목이 있으면 html문서의 전체적인 내용과 관련이 있는 콘텐츠의 집합(li처럼 목록으로 묶여있는?)

 

ex)

<section></section>

​

3.footer

html문서의 푸터부분을 정의하는 요소

ex)

<footer></footer>

​

4.main   

html요소의 주요 컨텐츠 부분을 정의하는 요소(한페이지에 한번만 사용)

ex)

<main></main>

​

5.nav

html문서를 탐색하는 링크의 집합을 정의하는 요소(네비게이션 바)

ex)

<nav></nav>

 

6. article

html문서의 독립적인 내용을 정의하는 요소 

 

ex)

<article></article>

 

7. figure

html 문서의 이미지와 텍스트가 묶여 있는 내용을 정의하는 요소

 

ex)

<figure></figure>

​

ex)

<footer>
<section>
<main>
<nav>

<div id="warp>
	<header></header>
	<main>
		<section></section>
	</main>
	<footer></footer>
</div>

 

참고 자료

https://velog.io/@remon/%EC%8B%9C%EB%A7%A8%ED%8B%B1-%ED%83%9C%EA%B7%B8Semantic-Tag%EB%9E%80

시맨틱 태그(Semantic Tag)란!