07.02(semantic tags)

semantic tags

 

자신의 의미를 브라우저와 개발자 모두에게 명확히 나타내는 요소

시맨틱태그를 사용하여 코드의 가독성을 높이고 명확하게 함

non-semantic 요소 - <div>, <span> 자신의 컨텐츠에 대해 아무것도 설명해주지 않음

semantic 요소 - <form>, <table>, <article> 자신의 컨텐츠를 명확하게 정의

---

semantic tags

태그	설명
<article>	내용을 정의
<aside>	페이지 콘텐츠를 제외한 콘텐츠를 정의 링크, 광고, 사이드바 표시 등
<details>	사용자가 보거나 숨길 수있는 추가 세부 정보를 정의
<figcaption>	<figure> 요소에 대한 캡션을 정의
<figure>	일러스트레이션, 다이어그램, 사진, 코드 목록 등과 같은 자체 포함 된 콘텐츠를 지정
<footer>	문서 또는 섹션의 바닥글을 지정 주로 저작권, 연락처 정보 등 내용이 삽입되며 <header>, <section>, <article> 등 다른 레이아웃 사용가능
<header>	문서나 섹션의 머릿글을 지정 사이트 맨 위쪽이나 왼쪽에 사용하며 헤더 안에 <form> 태그를 이용, 검색창을 넣거나 <nav>태그를 이용해 사이트메뉴를 넣음
<main>	문서의 주요 내용을 지정
<mark>	강조표시된 텍스트를 정의 형광펜을 칠한 것처럼 노랗게 칠해짐
<nav>	네비게이션 링크를 정의 같은 사이트내의 링크나 다른 사이트로의 링크들의 모음
<section>	<header>, <footer>와 함께 문서의 구역을 정의 <section>안에 <section>을 넣을 수도 있고, <article>을 이용해 내용을 넣음
<summary>	<details> 요소를 위한 눈에 보이는 제목을 정의
<time>	날짜/시간을 정의

 

header

사이트 전체의 header, article태그의 header를 나타냄

 

 

nav

네비게이션 메뉴를 나타냄

header, aside, footer 안에 자유롭게 사용가능

 

 

article

실제 content를 나타냄

독립적으로 표현가능한 글, 기사, 사용자 의견 등을 작성

article 내부적으로 header/footer구조를 다시 가질 수 있음

 

 

section

연관된 컨텐츠를 그룹핑할 때 사용(여러개의 article을 가질수도 있고, header, footer등을 가질수도 있음)

article태그를 그룹핑, article내부에서 내용들을 그룹핑할 경우 사용

 

 

aside

주내용이 아닌 부수적 내용 표현시 사용. 광고, 날씨정보 등

 

 

footer

사이트 하단부, article의 하단부에 사용됨

저작권정보, 사이트맵 등을 표현