시맨틱 웹, 시맨틱 태그

시맨틱웹

개발자가 의도한 요소의 의미가 명확하게 드러나게 하는 작성 방식이자 코드의 가독성을 높이고 유지보수를 효율적으로 하는 방식이다.

시맨틱 태그

의미를 가지고 있는 테그

<h1>태그 : 제목을 표현할때 쓰는 태그
<span> 을 스타일로 사이즈 굵기를 넣어 같게 보일수 있으나 h1 을 적극 적으로 사용해야 함

시맨틱 태그를 사용하면 이로운점

• 검색엔진 최적화 (구글 .네이버에 상단에 올라오는 이점)
• 웹접근성 향상 (화면 낭독기 등이 해당 테그에 맞게 읽어줌 )
• 가독성 향상 (유지보수)

주로 사용하는 시맨틱 태그

<header>: 페이지에 대한 정보를 담는 태그로 , 페이지 상단에 위치함
<nav>: 다른 페이지나 같은 페이지 안에 다른 부분으로 이어주는 네비게이션 링크로 구성된 섹션을 표현.
<aside>:페이지 전체 내용과는 어느 정도의  관련성은 있지만 , 주로 내용과 직접적 연관이 없는 부분을 담고 있다.
<main>: 문서의 body 요소의 메인콘텐츠를 정의할떄 사용
<section>: 문서나 응용 프로그램의 일반적인 섹션 표현
<article>: 여러가지 아이탬들을 묶어 재사용 가능하게 그룹화함
<footer>: 주로 저작권정보나 서비스 제공자 정보등 사이트하단에 표시
<mark>: 하나의 문서내에서 다른 문맥과 관련성을 나타내기위해서 마킹되거나 하이라이트 된 텍스트

더 알아보기