Html #5 - 시멘틱 태그(Semantic tag)

Lina·2024년 6월 17일

Web Design

목록 보기

27/29

semantic tag(시멘틱태그)

웹 표준 태그로 구조를 쉽게 파악하고 큰 영역들을 잡는 구조 태그.
검색 엔진 같은 프로그램에서 자료를 검색해 정보의 의미를 분석할 수 있게 도와주는 지능형 웹 태그.
또한 시각장애인들을 위한 웹 표준 방식.

시멘틱 태그의 종류

    1. <header> : 웹페이지 최상단에 위치하는 태그. 보통 로고와 메뉴 검색창이나 로그인 영역이 들어감.
    
    2. <nav> : 헤더에 들어가는 GNB영역과 같이 메뉴부분을 표현할 때 사용함.
    웹페이지에 여러개의 메뉴 영역이 들어갈 경우 #아이디 선택자로 구분함. 
    헤더뿐만 아니라 컨텐츠 영역 또는 푸터 부분에도 자유롭게 몇 개든 들어갈 수 있다.
                
    3. <section> : 컨첸츠 영역을 포함하는 태그. 해당 컨첸츠를 주제별로 묶을 때 사용하며 section태그 
    내부에는 h1~h6 제목 태그가 포함됨. section안에는 또 다른 section태그를 넣을 수 있다.
                
    4. <main> : section영역들을 하나로 묶어주는 컨텐츠 전체 영역을 말함. 
    보통 header의 아래쪽에 들어감.
    
    5. <article> : article의 사전적 의미는 신문이나 잡지의 '기사'를 의미함. 
    이 태그는 웹 상의 실제 내용을 작성하는 것이며 블로그의 포스트나 웹사이트의 이벤트 내용과 같이 
    독립적인 웹 컨텐츠를 말함.
    article태그는 안에 section태그를 넣을 수 있고 section태그도 article태그를 포함할 수 있다.
                
    6. <aside> : 웹 문서에서 왼쪽이나 오른쪽 또는 하단에 들어가는 사이드바 영역을 말함. 
    이 태그는 필수 요소는 아니며, 보통 광고나 일반적인 링크 모음처럼 문서의 메인 내용의 영향을
    미치지 않는 내용을 넣을 때 사용함.
                
    7. <footer> : 웹 문서의 가장 하단에 위치하며 보통 저작권 표시나 본문 내용과는 상관없지만 
    중요한 내용들이 들어감. 예를 들어 로그인이나 판매가 가능한 사이트는 이용약관, 개인정보 처리방침, 
    사업자 등록번호, 통신판매 신고업 번호, 고객센터, 청소년 보호정책 등의 내용이 들어감.