HTML Semantic Tag List

시맨틱 태그

<header> // 페이지나 섹션의 머리말

<nav> // navigation의 줄임말로 하이퍼링크들을 모아 놓은 특별한 섹션. 페이지 내 목차에 주로 사용.

<section> // 필수적인 내용. 문서의 장 혹은 절을 구성하는 역할. <section>에는 <h1>~<h6>로 섹션의 주제를 기재하는 것이 바람직

<article> // 보조적인 내용. 웹페이지의 본질을 훼손하지 않는 보조적인 기사, 블로그 포스트, 댓글이나 기타 독립적인 내용을 담는 영역.

<aside> // 웹페이지의 본문 흐름에서 약간 벗어난 노트나 팁, 삽입 어구. 페이지의 오른쪽이나 왼쪽에 주로 배치.

<footer> // 꼬리말 영역 표시. 저자나 저작권 정보를 주로 표시. 단, <header>나<footer>가 꼭 웹페이지의 서두나 말미에 배치될 필요는 없다.

※ 이 태그들의 콘텐츠가 출력되는 위치나 모양은 개발자가 CSS에서 직접 만들어야 한다.

 

 

- 시멘틱 블록 태그#그림

<figure> // 본문에 삽입된 그림을 블록화하는 시멘틱 태그

<figure id="1-1">

<figcaption>alert() 함수 활용</figcaption>

<pre><code>function f() { alert("경고합니다"); }</code></pre>

<hr><small>실행결과</small>

<pre><img src="media/alert.png" alt="실행결과"></pre>

</figure>

 

 

- 시멘틱 블록 태그#상세정보

<details> // 브라우저 화면에 핸들(▶)이 나타나며, 그 핸들을 클릭해 상세 정보를 표시/숨김.

<summary> // <details>로 구성되는 블록의 제목을 표현

<details>

<summary>Question 1</summary>

<p>웹 개발자가 알아야 하는 언어 3가지?</p>

</details>

 

 

- 시멘틱 인라인 태그

<mark> // 중요한 텍스트임을 표시

<time> // 시간 정보임을 표시

<meter> // 주어진 범위나 %의 데이터 양을 표시

<progress> // 작업의 진행 정도를 표시

<p>

내일<mark>HTML5 시험</mark><br>

시간은<time>09:00</time><br>

난이도<meter value="0.8" max="1.0">80%</meter><br>

자료 업로딩(20%) <progress value="2" max="10">

</progress><br>

</p>