본문 : 섹션(Section) 요소 (시맨틱 태그) - body, header, nav, section, aside, article, footer

시맨틱 태그 (semantic)

html 태그가 특정 목적, 역할, 의미적 가치를 가지는 것을 시맨틱 태그라고한다.

div 태그를 대체하여 의미를 가진 태그들이 있다.

대표적인 시맨틱 태그로는 Header, nav, aside, section, article, footer가 있다.

단순히 구역만 나누ㄴ느 것이 아니라 의미를 가지는 태그를 활용하면 요소의 의미가 명확해져서 코드의 가독성이 높아지고 유지보수를 쉽게 할 수 있다.

non-semantic 태그 : div, span 등...

<body>
    <header>웹페이지에서 맨 윗부분, 머리글, 제목영역</header>
    <nav>하이퍼 링크 모음, 주로 메뉴영역</nav>
    <div class="container">
        <section>
            본문 영역
            <article>본문 내용 영역</article>
        </section>
        <aside>본문 외적인 내용, 광고영역, section과 상관 없는 내용</aside>
    </div>
    <footer>웹페이지에서 맨 아래부분, 꼬리말,
        copyright, 사업자정보, 개인정보처리방침, 고객센터
    </footer>
</body>

<header>

웹 페이지에서 맨 윗부분, 머리글, 제목 영역

HTML <header> 요소는 소개 및 탐색에 도움을 주는 콘텐츠를 나타내고 제목, 로고, 검색 폼, 작성자 이름 등의 요소를 포함할 수 있다.

<footer>

웹 페이지에서 맨 아래부분, 꼬리말, copyright, 사업자정보, 개인정보처리방침, 고객센터...

HTML <footer> 요소는 가장 가까운 구획 콘텐츠가 구획 루트의 푸터를 나타낸다. 푸터는 일반적으로 구획의 작성자, 저작권 정보, 관련 문서 등의 내용을 담는다.

<article>

본문 내용 영역

HTML <article> 요소는 문서, 페이지, 애플리케이션, 또는 사이트 안에서 독립적으로 구분해 배포하거나 재사용할 수 있는 구획을 나타내고 게시판과 블로그 글, 매거진이나 뉴스 기사 등으로 사용할 수 있다.

article 영역 내에 헤더(header)와 푸터(footer)를 둘 수 있다.

<section>: 일반 구획 요소

본문 영역

HTML <section> 요소는 HTML 문서의 독립적인 구획을 나타내며, 더 적합한 의미를 가진 요소가 없을 때 사용한다.

같은 성격 관련있는 내용들을 section 요소로 묶어서 나타낸다.

Section 내에도 헤더(header)와 푸터(footer)를 둘 수 있고 Section 마다 제목 요소를 가질 수 있다.

<hgroup>

HTML <hgroup> 요소는 문서 구획의 다단계 제목을 나타내고 다수의 h1 ~ h6 요소를 묶을 때 사용한다.

<main>

HTML <main> 요소는 문서 <body>의 주요 콘텐츠를 나타낸다. 주요 콘텐츠 영역은 문서의 핵심 주제나 앱의 핵심 기능에 직접적으로 연결됐거나 확장하는 콘텐츠로 이루어진다.

문서내에서 main 요소는 한번만 허용된다.

<nav>: 탐색 구획 요소

하이퍼링크 모음, 주로 메뉴영역

HTML <nav> 요소는 문서의 부분 중 현재 페이지 내, 또는 다른 페이지로의 링크를 보여주는 구획을 나타낸다. ul, li, a 요소들을 여전히 함께 사용하면서 메뉴, 목차, 색인 등을 구성한다.

<aside>: 별도 구획 요소

본문 외적인 내용, 광고영역, section과 상관없는 내용

HTML <aside> 요소는 문서의 주요 내용과 간접적으로만 연관된 부분을 나타낸다. 주로 사이드바 혹은 콜아웃 박스로 표현한다.

페이지의 주요 내용과는 직접적인 연관성은 없는 분리된 내용을 담고 있다.

'WEB > HTML' 카테고리의 다른 글

이미지맵 태그 - img, map, area (0)	2022.05.27
HTML 태그 : progress, figure, blockquote, dl/dt/dd, pre, mark (0)	2022.05.27
HTML input 태그 : form / input / label / select / textarea (1)	2022.05.27
HTML 표(Table) 만들기 - table, tr, th, td 태그 (1)	2022.05.26
하이퍼링크로 북마크 연결하기 (2)	2022.05.25

Develop Me