HTML5 시맨틱 요소

의미론은 언어의 단어와 구문의 의미를 연구하는 학문이다.

시맨틱 요소가 의미 요소입니다.

시맨틱 HTML은 단지 프리젠 테이션을 정의하거나 보는 것이 아니라 웹 페이지 및 웹 애플리케이션의 정보의 의미, 또는 의미를 강화하기 위해 HTML 마크 업의 사용이다.

시맨틱 HTML은 기존의 웹 브라우저뿐만 아니라 다른 많은 사용자 에이전트에 의해 처리된다. CSS는 인간 사용자에게 프리젠 테이션을 제안하는 데 사용됩니다.

시맨틱 요소는 무엇인가?

시맨틱 요소는 명확 브라우저와 개발자 모두에게 그 의미를 설명합니다.

비 의미 론적 요소의 예 : <div> 와 <span> -의 내용에 대해 아무것도 알려줍니다.

의미 론적 요소의 예 : <form> , <table> 및 <img> - 명확하게 내용을 정의합니다.

브라우저 지원

HTML5 의미 요소는 모든 최신 브라우저에서 지원됩니다.

또한, 당신은 할 수 있습니다 "teach" 방법을 처리하는 이전 버전의 브라우저를 "unknown elements" .

에 대해 읽어 HTML5 브라우저 지원 .

HTML5의 새로운 시맨틱 요소

: 많은 웹 사이트와 같은 HTML 코드를 포함하는 <div id="nav"> <div class="header"> <div id="footer">
탐색, 머리글, 바닥 글을 나타냅니다.

HTML5는 웹 페이지의 다른 부분을 정의하는 새로운 의미 론적 요소를 제공합니다 :

HTML5 <section> 요소

<section> 요소는 문서의 부분을 정의한다.

W3C의 HTML5 문서에 따르면 "A section is a thematic grouping of content, typically with a heading."

웹 사이트의 홈 페이지가 도입, 컨텐츠 및 연락처 정보 섹션으로 분할 할 수있다.

HTML5 <article> 요소

<article> 요소는 독립적 급식 콘텐츠를 지정한다.

기사 자체에 의미를해야하고,이 웹 사이트의 나머지 부분에서 독립적으로 읽을 수 있어야한다.

위치의 예 <article> 요소가 사용될 수있다 :

• 포럼 게시물
• 블로그 게시물
• 신문 기사

중첩 시맨틱 요소

HTML5의 표준에서, <article> 요소가 관련 요소의 완전 독립형 블록을 정의한다.

<section> 요소가 관련 요소들의 블록으로서 정의된다.

우리는 둥지 요소 방법을 결정하기 위해 정의를 사용할 수 있습니까? 아니야 우리는 할 수 없어!

인터넷에서 당신과 함께 HTML 페이지를 찾을 수 <section> 요소를 포함하는 <article> 요소 및 <article> 요소를 포함한 <sections> 요소를.

또한 포함 된 페이지 찾을 수 <section> 요소를 포함하는 <section> 요소 및 <article> 요소를 포함한 <article> 요소를.

HTML5 <header> 요소

는 <header> 엘리먼트는 문서 또는 섹션 헤더를 지정한다.

<header> 요소 소개 콘텐츠에 대한 컨테이너로서 사용한다.

당신은 여러 가지있을 수 있습니다 <header> 하나 개의 문서에서 요소를.

다음의 예는 기사에 대한 헤더를 정의한다 :

HTML5 <footer> 요소

<footer> 엘리먼트는 문서 또는 섹션 푸터를 지정한다.

<footer> 요소는 포함 된 요소에 대한 정보를 포함해야합니다.

바닥 글은 일반적으로 문서, 저작권 정보의 저자를 포함 등의 이용 약관, 연락처 정보에 대한 링크

당신은 여러 가지있을 수 있습니다 <footer> 하나 개의 문서에서 요소를.

HTML5 <nav> 요소

<nav> 요소는 탐색 링크의 세트를 정의한다.

<nav> 요소는 탐색 링크의 큰 블록위한 것이다. 그러나 문서의 모든 링크는 내부에 있어야한다 <nav> 요소!

HTML5 <aside> 요소

는 <aside> 요소가 배치되는 내용을 제외하고 어떤 콘텐츠를 정의 (like a sidebar) .

따로 컨텐츠는 주변 콘텐츠에 관련되어야한다.

HTML5 <figure> 및 <figcaption> 요소

책과 신문, 이미지와 캡션을하는 것이 일반적이다.

자막의 목적은 이미지를 시각적으로 설명을 추가한다.

HTML5, 이미지 그리고 자막은 함께 그룹화 될 수있다 <figure> 요소 :

<img> 요소는 이미지를 정의하는 상기 <figcaption> 엘리먼트는 자막을 정의한다.

왜 HTML5 요소 시맨틱?

HTML4 개발자는 자신의 좋아하는 스타일의 페이지 요소에 속성 이름을 사용 :

header, top, bottom, footer, menu, navigation, main, container, content, article, sidebar, topnav, ...

이것은 불가능 검색 엔진이 올바른 웹 페이지의 콘텐츠를 식별 할 수있었습니다.

같은 HTML5 요소 : <header> <footer> <nav> <section> <article> 이 쉽게 될 것입니다.

W3C의, 시맨틱 웹에 따르면 :

"데이터 공유 및 응용 프로그램, 기업, 지역 사회에서 재사용 할 수 있습니다."

고려

경우에 문서는 <스팬 클래스 = "저자"> 및 <div 클래스 = "송장"와 같은 문서의 단편을 의미 클래스 명과 스팬 DIV 요소 내에 포함 할 수있다 HTML 단독 표현보다 더 정확한 의미를 필요 곳 >. 이 클래스 이름은 또한 스키마 또는 온톨로지 내에서 부분 식별자있는 경우, 그들은 더 정의 된 의미에 링크 할 수 있습니다. 마이크로 포맷은 HTML의 의미에이 방법을 공식화.

이 방법의 한 가지 중요한 제한 요소를 포함에 따라 같은 마크 업이 잘 형성됨을위한 조건을 충족해야한다는 것입니다. 이들 문헌은 광범위 트리 구조이기 때문에,이 서브 트리 만 균형 단편이 방식에 표시 될 수 있다는 것을 의미한다. 마크 업 HTML의 임의의 부분을위한 수단은 XPointer에 같은 마크 업 구조체 자체의 독립적 인 메카니즘을 필요로한다.

좋은 의미 HTML은 (또한 웹 콘텐츠 접근성 지침 참조). 예를 들어 [표창장은 필요로했다], 화면 판독기 또는 오디오 브라우저가 제대로 문서의 구조를 확인할 수있을 때, 그것은 낭비되지 않습니다 웹 문서의 접근성을 향상 시각 장애인 사용자의 이 올바르게 표시되었을 때 반복 또는 관련이없는 정보를 읽어 시간.

HTML5의 시맨틱 요소

다음은 HTML5의 새로운 의미 요소의 알파벳 목록입니다.

링크는 우리의 완전한 이동 HTML5 참조 .