시맨틱 마크업 / sementic markup

HTML을 다루는 사람이라면 들어봤을 <시맨틱 태그> 

Q. 그래서 그게 뭔데?

A. 브라우저와 개발자 모두에게 의미를 명확하게 알리기 위한 의미를 지닌 요소

    유지보수가 편리, SEO에 유리, 웹 접근성 등의 장점이 있음

 

<header>

: 소개 컨텐츠, 탐색 링크 집합에 대한 컨테이너

<header>내부에 <header>, <footer>, <address> 올 수 없음

 

<main>

: 문서의 주요 내용 지정

하나의 html에 하나만 있어야함, <header>, <article>, <aside>, <footre> 내부에 들어갈 수 없음

 

<section>

: 일반적으로 제목이 있는 주제별 컨텐츠 그룹, 문서의 섹션

<article>

: 독립적이고 자체 포함된 컨텐츠, 자체의 의미

<section>과 <article>은 서로/자신을 포함할 수 있음

 

<nav>

: 탐색 링크 세트, 항상 존재하지는 것은 아님

 

<aside>

: 자신이 배치된 컨텐츠 외의 일부 컨텐츠, 주변 컨텐츠와 관련되어야 함

 

<footer>

: 문서나 섹션의 바닥글

 

<figure>

: 일러스트, 사진, 코드 목록 등 독립된 컨텐츠 지정

<figcaption>

:  <figure>을 정의함, <figure>의 첫번째 또는 마지막 요소로 올 수 있음

Fig.1 - Trulli, Puglia, Italy.

<figure>
  <img src="pic_trulli.jpg" alt="Trulli" style="width:100%">
  <figcaption>Fig.1 - Trulli, Puglia, Italy.</figcaption>
</figure>

 

그 외

<details> : 숨김가능한 세부 정보

<summary> : <details> 요소의 보이는 제목 정의

Epcot Center (클릭해보세요)

Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.

<details>
  <summary>Epcot Center</summary>
  <p>
     Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, 
     international pavilions, award-winning fireworks and seasonal special events.
  </p>
</details>

 

<mark> : 강조 텍스트

Do not forget to buy milk today.

<p>Do not forget to buy <mark>milk</mark> today.</p>

 

<time> : 날짜/시간 정의

Open from 10:00 to 21:00 every weekday.

<p>Open from <time>10:00</time> to <time>21:00</time> every weekday.</p>