[따라하며 배우는 HTML, CSS] 1 - (2) 시맨틱 요소/태그

[Semantic]

: 의미가 있는 요소, 브라우저와 개발자 모두에게 의미를 명확하게 설명합니다.

: <form>, <article>, <table>

 

[Non- sementic]

: <div> 및 <span>은 내용에 대해 아무것도 알려주지 않습니다.

: 이 태그들의 이름만 보고는 어떤 내용인지 유추할 수가 없습니다.

 

 

# HTML에서 사용되는 시맨틱 요소들

 

<div>header</div>를 써도 되지만

여기가 header라는 것을 더 명확히 나타내기 위해 <header>header</header>를 사용합니다.

---

<header>

: 주로 제목과 소개 내용을 포함합니다.

ex h1~h6, 로고, 아이콘, 저작권 정보, 작성자 이름,...

 

하나의 HTML문서에는 여러 <header> 요소가 사용될 수 있지만,

<adress>, <footer>, 또 다른 <header> 안에는 배치될 수 없습니다.

 

블로그 예시 header

 

<section>

: 문서의 섹션을 정의합니다.

: 주로 "제목이 있는 주제별 콘텐츠 그룹"

ex 장, 소개, 뉴스 항목, 연락처 정보,...

 

블로그 section 예시

 

<article>

: 문서 페이지, 애플리케이션, 또는 사이트 안에서 독립적으로 구분해 배포하거나 재사용할 수 있는 구획

 

블로그 article 예시

 

<nav>

: 주로 목차, 메뉴 등에 사용이 됩니다.

 

블로그 nav 예시

 

<aside>

: 주로 사이드바 혹은 콜 아웃 박스로 표현

 

블로그 aside 예시

 

 

<footer>

: 문서 또는 섹션의 바닥글

ex 저작권 정보, 연락처 정보, 사이트 맵

 

블로그 footer 예시

 

---

출처

따라하며 배우는 HTML, CSS - 인프런 | 강의