01. Semantic이란 무엇인가
시맨틱 요소 = 의미있는 요소를 뜻하며, 이 시맨틱 요소는 브라우저와 개발자 모두에게 요소의 의미나 목적을 명확하게 설명해 줄 수 있는 요소이다.
기존의 HTML에서는 웹 문서의 구획을 나눌 때 사용하던 <div>, <span>태그는 구획의 의미를 명확하게 나타내지 못했고 모호한 표현과 일관되지 않다는 특징을 가지고 있었고, 단순히 컨테이너 역할만 수행할 수 있었다.
그 이후에 등장한 HTML5에서부터는 <article>, <section>, <header>, <footer> 등과 같이 시맨틱 요소를 정의해 구조적인 부분을 정의할 수 있는 구획 태그를 사용할 수 있게 되었다.
02. 시맨틱 웹(Semantic Web)이란?
인터넷이 발전함에 따라 방대한 양의 웹 문서가 생산되어, 정보는 매우 다양해 졌지만 원하는 정보를 제대로 찾기가 어려워졌다.
그리하여 나온 것이 이 시맨틱 웹인데, 정보를 컴퓨터가 이해할 수 있는 형태로 표현하고 이를 컴퓨터가 처리하도록 하는 기술이다.
즉 사용자가 찾고싶은 정보를 검색하면 컴퓨터가 사람을 대신해 정보를 찾아 뜻을 이해하고 이를 가공, 추론하는것 까지 가능한 '차세대 지능형 웹'을 뜻한다.
03. 시맨틱 요소
1) <header>
문서 혹은 <section>의 머릿글을 지정한다.
일반적으로 하나 이상의 제목 요소(<h1>~<h6>), 로고or아이콘, 저자 정보를 포함한다.
하나의 문서 내 여러개의 <header>태그가 있을 수 있다.
2) <nav>
내비게이션(navigation)을 의미하며, 웹 문서 내에서 메뉴 등에 사용한다.
3) <section>
챕터, 머리말, 꼬리말 또는 문서의 다른 섹션과 같이 문서의 한 부분을 정의한다.
4) <article>
독립적인 내용을 지정한다.
게시물, 기사의 내용 등이나 블로그의 포스트, 본문 내 세부 절 등의 위치에서 사용한다.
* <section>요소(<article>요소) 안에 <section>요소(<article>요소)가 올 수 있고,
<section>요소(<article>요소) 안에 <article>요소(<section>요소)가 올 수도 있다.
5) <aside>
사이드 바 처럼 옆에 위치하여 주요 내용과는 이외로 별개의 내용을 정의한다.
6) <footer>
문서 혹은 <section>의 바닥글을 지정한다.
저자 정보, 저작권 정보, 사용 약관 링크, 위로 가기 링크, 사이트 맵, 연락처 등의 내용을 표시한다.
하나의 문서 내 여러개의 <footer>태그가 있을 수 있다.
7) <figure>
그림이나 도표를 나타낸다.
8) <time>
날짜와 시간을 표시한다.
04. 시맨틱 구조 태그 사용
시맨틱 태그는 구획 정의를 위한 태그로서, 그 자체는 특별한 모양을 갖고 있지 않고 단지 문서의 구조를 정의하는 것을 위해 사용된다.
<코드>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <!DOCTYPE html> <html> <head> <title>시맨틱 요소</title> <meta charset="utf-8"> </head> <body> <header><h2>헤더</h2></header> <nav>네비게이션</nav> <article>본문</article> <section>내용</section> <aside>사이드바</aside> <footer>푸터</footer> </body> </html> | cs |
<실행 결과>
'프로그래밍 > 웹표준' 카테고리의 다른 글
| 6. 목록을 만드는 태그 <ul>, <ol>, <dl> (0) | 2017.01.11 |
|---|---|
| 5. 문단 정렬 태그 (0) | 2017.01.09 |
| 4. 제목을 나타내는 태그 <h1>~<h6> (0) | 2017.01.08 |
| 2. <meta>태그 (0) | 2017.01.04 |
| 1. HTML 문서의 기본 구조 (0) | 2017.01.03 |
댓글,
