HTML5의 새로운 시맨틱 요소 nav aside figcaption figure

HTML5의 새로운 시맨틱 요소

HTML5 <nav> 요소

<nav> 요소는 일련의 탐색 링크를 정의합니다.

문서의 모든 링크가 <nav> 요소 내에 있어야하는 것은 아닙니다. <nav> 요소는 탐색 링크의 주요 블록에만 사용됩니다.
예
<nav>
  <a href="/html/"> HTML </a> |
  <a href="/css/"> CSS </a> |
  <a href="/js/"> 자바 스크립트 </a> |
  <a href="/jquery/"> jQuery </a>
</ nav>

HTML5 <aside> 요소
<aside> 요소는 사이드 바처럼 배치 된 내용을 제외하고 일부 내용을 정의합니다.

별도의 콘텐츠는 주변 콘텐츠와 관련되어야합니다.
예
<p> 우리 가족과 나는 이번 여름에 Epcot 센터를 방문했습니다. </ p>

<옆으로>
  <h4> Epcot Center </ h4>
  <p> Epcot Center는 플로리다의 Disney World에있는 테마 파크입니다. </ p>
</ aside>

HTML5 <figure> 및 <figcaption> 요소

그림 캡션의 목적은 이미지에 시각적 인 설명을 추가하는 것입니다.

HTML5에서 이미지와 캡션을 <figure> 요소로 함께 그룹화 할 수 있습니다.
예
<그림>
  <img src = "pic_mountain.jpg"alt = "설교 바위"width = "304"height = "228">
  <figcaption> Fig1. - 노르웨이의 풀핏 락 (Pulpit Rock) </ figcaption>
</ figure>

<img> 요소는 이미지를 정의하고 <figcaption> 요소는 캡션을 정의합니다.
왜 의미 론적 요소인가?

HTML4를 사용하여 개발자는 머리글, 위쪽, 아래쪽, 바닥 글, 메뉴, 탐색, 기본, 컨테이너, 내용, 기사, 사이드 바, topnav 등의 요소 스타일에 고유 한 ID / 클래스 이름을 사용했습니다.

이로 인해 검색 엔진이 올바른 웹 페이지 컨텐츠를 식별 할 수 없었습니다.

새로운 HTML5 요소 (<header> <footer> <nav> <section> <article>)를 사용하면이 작업이 더욱 쉬워집니다.

W3C에 따르면 시맨틱 웹 (Semantic Web) : "응용 프로그램, 기업 및 커뮤니티에서 데이터를 공유하고 재사용 할 수 있습니다."
HTML5의 의미 론적 요소들

다음은 HTML5의 새로운 의미 론적 요소의 사전 순 목록입니다.

링크는 Google의 전체 HTML5 참조로 이동합니다.


태그 설명
<article> 기사 정의
<aside> 페이지 콘텐츠를 제외하고 콘텐츠를 정의합니다.
<details> 사용자가 보거나 숨길 수있는 추가 세부 정보를 정의합니다.
<figcaption> <figure> 요소의 캡션을 정의합니다.
<figure> 일러스트레이션, 다이어그램, 사진, 코드 목록 등과 같은 자체 포함 된 콘텐츠를 지정합니다.
<footer> 문서 또는 섹션에 대한 바닥 글을 정의합니다.
<header> 문서 또는 섹션의 머리글을 지정합니다.
<main> 문서의 주요 내용을 지정합니다.
<mark> 강조 표시된 텍스트를 정의합니다.
<nav> 탐색 링크 정의
<section> 문서의 섹션을 정의합니다.
<summary> <details> 요소에 대한 눈에 보이는 제목을 정의합니다.
<time> 날짜 / 시간을 정의합니다.