WEB-HTML-HTML 시맨틱 태그

시맨틱 태그

시맨틱 태그 살펴보기

<header> 태그

헤더 영억을 나타내며 맨 위쪽이나 왼쪽에 있으며 사이트 메뉴나 검색창을 삽입한다.

같은 웹 문서 안에서 다른 웹 문서로 연결하는 링크를 만든다.

<main> 태그

핵심이 되는 내용을 넣는다. 주로 웹 문서마다 다른 내용을 구성한다. 웹 문서에서 한 번만 사용이 가능하다.

<article> 태그

실제로 웹에서 보여주고 싶은 내용을 넣는다. ex) 블로그 포스트, 뉴스 기사처럼 독립된 항목 여러 개 사용 가능

<section> 태그

콘텐츠 영역을 나타낸다. <section> 태그는 여러개의 항목을 묶지만 <article>은 독립된 콘텐츠로 사용한다.

<aside> 태그

사이드 바 영역을 나타낸다.

맨 아래 쪽에 있는 푸터 영역을 나타낸다. 주로 저작권 정보, 연락처 등을 넣는다.

<div> 태그

문서 구조를 만들때 사용한다. 지금은 <header>, <section> 같은 시맨틱 태그를 주로 사용한다.


출처

  • (고경희, ⌜Do it! HTML+CSS+자바스크립트 웹 표준의 정석⌟, 이지스퍼블리싱, 2021)을 학습하고 개인 학습용으로 정리한 내용입니다.

© 2021. All rights reserved.

Powered by __YJ__