문서 부분 인 본문 부분에는 방문자가 볼 수있는 내용이 포함되어 있습니다. 기존의 HTML 문서는 일반적으로 div 요소를 통해 문서 구조를 구성하고 적절한 스타일 테이블과 결합합니다. 그러나 DIV 요소의 문제는 다른 사람의 소스 코드를 볼 때 어떤 DIV가 의미하는지 이해하기 위해 노력해야합니다. 특히 HTML 페이지의 조직 구조가 좋지 않은 경우 쉽게 혼란을 일으킬 수 있습니다. 이와 관련하여, 많은 시맨틱 요소가 HTML5에 추가되어 DIV 요소와 별도의 의미 및 프리젠 테이션을 대체합니다.
모든 의미 론적 요소는 중요한 특성을 가지고 있습니다. 실제로는 아무것도하지 않고 외관에 대한 내용에 거의 영향을 미치지 않으며 전혀 영향을 미치지 않습니다. 시맨틱 요소의 존재에 대한 몇 가지 이유가 있습니다.
1) 쉽게 수정하고 유지 관리 할 수 있습니다. HTML5의 의미 론적 요소를 통해 추가 구조화 된 정보를 전달할 수 있으므로 사람들이 문서의 전체 레이아웃과 다른 블록의 역할을 쉽게 이해할 수 있습니다.
2) 비 관습. 현대 웹 디자인의 중요한 주제는 누구나 장애물없이 웹 페이지에 액세스 할 수 있도록하는 것입니다. 즉, 스크린 리더 및 기타 보조 도구를 사용하는 사람들은 페이지에서 자유롭게 탐색 할 수 있습니다.
3) 검색 엔진 최적화. HTML5를 사용하면 검색 엔진이 웹 사이트를 더 잘 이해하고 인덱스 페이지에서 더 많은 정보를 수집 할 수 있습니다.
4) 미래 기능. 새로운 브라우저와 웹 편집 도구는 앞으로 의미 론적 요소를 사용할 것입니다. 예를 들어, 문서의 주요 부분이 표시됩니다.
가장 중요한 것은 의미 론적 요소를 올바르게 사용하는 경우 더 명확한 페이지 구조를 만들 수 있으며 향후 브라우저 및 웹 디자인 도구의 개발 추세에 적응할 수 있다는 것입니다. 다음은 조직 문서 구조에 대한 시맨틱 요소를 소개합니다.
HTML5 문서 구조이전 HTML 페이지는 적절한 스타일 테이블과 결합 된 DIV 요소를 사용하지만 DIV 요소의 문제는 페이지와 관련된 정보를 반영하지 않는다는 것입니다. HTML5 페이지는 이러한 DIV 요소를 설명 시맨틱 요소로 바꾸는 것입니다. 다음 예제는 HTML5에서 사용 된 주요 의미 요소를 포함합니다.
<body> <header> <hgroup> <h1> 내가 좋아하는 것들 </h1> <h2> Adam Freeman </h2> </hgroup> <dendress> 질문과 의견은 나에게 이메일을 보냅니다 > </address> <av> <h1> 목차 </h1> <li> <a href =#fruitsilike> 내가 좋아하는 과일 </a> </a> </li> <ul> <li> <a href =#morefruit> 추가 </a> </li> </ul> <li> <a href =#내가 좋아하는 활동 </a> </a> </li> <li> <li> <li> <li> <li > <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> < li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <ul> <li> <li> <ul > <li> <li> <li> <li> <a href =#tritypes> 트라이 애슬론 종류 </a> </li> <li> <a href =#mytri> 트라이 애슬론의 종류 < /a> </li> </ul> </ul> </nav> </header> <main room = main> <artadicle> <header> ...... </header> <avelice> <h1 > 왜 건강에 좋은 이유 </h1> <섹션> 여기에 모든 사람들이 더 많은 과일을 먹어야하는 세 가지 이유 : <ol> <li> 과일은 비타민이 많습니다 </li> <li> 과일은 섬유의 원천입니다 </li> <li> 과일에는 wclies가 포함되어 있습니다 /p> <sumbly> 종류의 트라이 애슬론 </summary> 다른 종류의 트라이 애슬론 -스프린트, lympic 등이 있습니다. li> <li> 40km 사이클 </li> <li> 10km run </li> </ol> </settrage> </section> </article> </main> <av> 추가 정보 : <a href = http : // fruit .org> 과일에 대해 자세히 알아보기 </a> <a href = http://triatlon.org> trithlons에 대해 자세히 알아보십시오 </a> </nav> <foloter id = mainfooter> © 2011, Adam 프리먼. = htp://apress.com> Visi Apress </a> </fotern> </body>
위의 문서에는 많은 HTML5 요소가 포함되어 있습니다. 프레젠테이션에서 다른 요소를 구별하려면이 기사에는 외관이 필요하지 않습니다.
제목HTML은 제목의 요소 시스템을 H1에서 H6으로 정의하고 H1은 가장 높습니다. 동일한 레벨의 제목은 일반적으로 컨텐츠를 하나의 테마의 각 부분으로 나누는 데 사용됩니다. 모든 수준의 제목은 일반적으로 동일한 테마의 모든 측면을 나타내는 데 사용됩니다. 이들은 문서의 개요를 구성하므로 사용자는 문서 제목을 탐색하는 한 처음에 치료와 구조를 이해할 수 있으며 사용자는 제목 시스템을 통해 관심 콘텐츠로 빠르게 탐색 할 수 있습니다.
<body> <h1> 과일 나는 좋아한다 </h1> ...... </body>부제
HGROUP 요소는 전체 처리로 사용될 수 있습니다 (HGROUP 요소가 사용되지 않으면 기본 제목과 자막은 두 개의 제목으로 사용되며 HGROUP를 사용하면 제목과 자막이 제목으로 취급됩니다). HTML 문서를 방해합니다.
<body> <hgroup> <h1> 과일 나는 좋아하는 과일 </h1> <h2> 감귤을 사랑하는 법을 배웠는 방법 </h2> </hgroup> ...... </body> </body> </body >
여기서, 나는 감귤을 사랑하는 법을 배우는 방법은 내가 좋아하는 과일의 하위 제목으로 존재하며 제목과 자막은 일반적으로 스타일이 더 단단합니다.
마크 페이지의 주요 영역주 컨텐츠를 나타내는 페이지의 일부만이 기본 요소에 배치 될 수 있으며, 이는 한 페이지에서 한 번만 사용됩니다.
<바디> ...... <메인 역할 = main> <artlicle> ...... </article> </main> ...... </body>
역할 = 메인은 스크린 리더 포지셔닝 페이지의 주요 영역을 도울 수 있습니다.
기사를 만듭니다기사 요소는 HTML 요소의 독립적 인 컨텐츠를 나타냅니다. 기사는 내부와 외부 기사가 전반적인 관계와 부분적으로 관련되어있는 한 다른 기사에 중첩 될 수 있으며, 의미 적으로 존재할 수 있습니다. 한 페이지는 여러 기사 요소를 가질 수 있고 각 기사를 독립적으로 형성 할 수 있으며 하나의 기사에는 하나 이상의 섹션 요소가 포함될 수 있습니다 (다음 섹션 참조).
<body> ...... <main role = main> <artadicle> <Header> ...... </header> <따로> ... </downe> <섹션> ... ... ... ... </section> </article> <arttern <ArtAder> ...... </header> <따로> ...... </down> <섹션> .../섹션> </article>. .. </main> ...... </body>부분
섹션 요소는 문서의 섹션을 나타 내기 위해 새로 추가되었습니다. 섹션 요소를 사용하기위한 명확한 사양은 없지만 일반적으로 섹션 요소를 사용하여 문서 개요 또는 디렉토리에 포함되어야합니다. 섹션은 특정 기사에 속할 수 있으며 기사에는 하나 이상의 섹션이 포함될 수 있습니다. 섹션 요소에는 일반적으로 하나 이상의 단락과 하나의 제목이 포함되어 있지만 제목은 필요하지 않습니다.
<body> <섹션 <hgroup> <h1> 과일 나는 감귤을 좋아하는 방법 </h2> </hgroup> 사과와 오렌지를 좋아합니다 , 망고, 체리, 살구, 자두, 복숭아 및 포도. </a>
위는 3 개의 섹션, 중첩 레이어를 정의하며 각 섹션의 제목은 H1입니다. 그러나 다른 브라우저의 경우 섹션의 계층 구조의 기본 모양이 다르며 사용자 정의 스타일을 만들어이 문제를 해결할 수 있습니다. 섹션과 기사의 차이점은 섹션이 본질적으로 더 조직적이고 구조적이며 독립 단락으로 간주 될 수 있으며 기사는 포함 된 컨테이너를 나타냅니다.
첫 번째와 꼬리헤더 요소는 첫 번째 섹션을 나타내며 헤더와 로고를 포함 할 수 있습니다. 헤더 요소에는 일반적으로 제목 요소 또는 HGROUP 요소가 포함되어 있으며이 섹션의 탐색 요소도 포함 할 수도 있습니다. 페이지에는 임의의 수의 헤더 요소가 포함될 수 있으며 그 의미는 컨텍스트에 따라 다를 수 있습니다.
FOOS 요소는 일반적으로 섹션의 요약 정보를 포함하는 섹션의 꼬리를 나타내며 저자 소개, 저작권 정보, 관련 내용 링크, 로고 및 면제 명세서도 포함 할 수 있습니다.
<body> <header> <hgroup> <h1> 내가 좋아하는 것들 </h1> <h2> by Adam Freeman </h2> </hgroup> </header> <seader> <hgroup> <h1> 과일 나는 좋아한다 < /h1> <H2> 내가 감귤을 사랑하는 법을 배웠는 방법 </h2> </hgroup> </header> ...... </section> <Seader> <H1> 내가 좋아하는 활동 </h1> </header > ...... <섹션> <바보 id = 메인 발거> © 2011, <a href = http://apress.com> visi apuse </a> </body>
이 예제는 3 개의 헤더 요소를 정의합니다. 신체 요소의 헤더 요소는 전체 문서 중 첫 번째입니다.
참고 : 바닥 글에 헤더 또는 다른 바닥 글로 중첩 될 수 없으며 헤더 또는 주소 요소에 중첩 될 수 없습니다.
내비게이션 영역NAV 요소는 문서의 내비게이션 영역을 나타내며, 여기에는 다른 페이지의 다른 부분 또는 같은 페이지의 다른 부분에 대한 링크가 포함되어 있습니다. 모든 링크를 NAV 요소에 배치 할 필요는 없습니다.
<body> <header> <hgroup> <h1> 내가 좋아하는 것들 </h1> <h2> Adam Freeman </h2> </hgroup> <av> <h1> 목차 </h1> <ul> <li> <a href =#fruitsilike> 내가 좋아하는 과일 </a> </a> </li> <ul> <li> <a href =#morefruit> 추가 과일 </a> </li> </ul> <li> <a href =#ActivitionIlike> 내가 좋아하는 활동 </a> </li> <li> <a href =#tritypes> 트라이 애슬론 종류 </a> </li> <li> <a href =#mytri> 종류 트라이 애슬론 나는 </a> </li> </ul> </ul> </ul> </nav> </header> <섹션> ...... </section> <섹션> .. ... ... . > </nav> <FUTER ID = mainfooter> ...... </footer> </body>
여기에서 두 개의 NAV 요소가 사용됩니다. 헤더의 일부 사람들은이 문서의 내비게이션 방법을 제공하고 다른 사람들은 문서 끝에 배치되어 사용자에게 추가 링크를 제공합니다.
NAV 블록에 모든 링크를 넣지 않도록주의하십시오. NAV는 일반적으로 페이지에서 가장 크고 가장 중요한 내비게이션 영역에서만 사용해야합니다. 예를 들어, 위에서 제공된 문서 탐색은 NAV 블록에 넣으려면 필요하지만 라이센스 및 연락처 정보에 대한 정보 만 있으면 NAV 블록에 넣을 필요가 없습니다.
주석 바따로 요소는 책이나 잡지의 사이드 바와 유사한 주변 컨텐츠와 약간 얼룩이있는 내용을 나타내는 데 사용됩니다. 주요 내용. 일부 배경 정보와 관련된 기사 등.
<body> <header> ...... </header> <artadicle> <header> ...... </header> <따로> <h1> 과일이 건강한 이유 </h1> <섹션> 여기 Ar Threee resonyone shuld 더 많은 과일을 먹는다 : <ol> <li> 과일은 비타민이 많다. ol> <섹션> </asside> ...... </article> <바이트 id = mainfooter> ...... </footer> </body>
인쇄 된 물질에서 메모 바와 같은 제외 요소를 사용할 수 있으며,이를 통해 다른 관련 주제를 소개하거나 기본 문서에서 제안 된 관점을 설명 할 수 있습니다. 제외 요소를 사용하여 광고, 관련 콘텐츠 링크 등을 저장할 수도 있습니다.
연락처 정보주소 요소는 문서 또는 기사 요소의 연락처 정보를 나타내는 데 사용됩니다. 주소 요소가 기사 요소의 하위 요소 인 경우, 제공하는 연락처 정보는 주소 요소가 본문 요소 인 경우 제공되는 연락처 정보가 전체 문서로 간주됩니다. 주소 요소는 다음과 같은 문서 또는 기사의 연락처 정보를 넘어 주소를 나타내는 데 사용할 수 없습니다. 고객 또는 사용자의 주소를 나타내는 데 사용할 수 없습니다.
<body> <header> ...... <duddre> 질문과 의견?세부 영역
세부 사항 요소는 문서의 영역을 생성하며 사용자는 테마에 대한 자세한 내용을 이해하기 위해이를 시작할 수 있습니다. 세부 사항 요소에는 일반적으로 세부 사항 영역에 대한 설명 레이블 또는 제목을 생성하기위한 요약 요소가 포함되어 있습니다.
<body> <header> ...... </header> <artcticle> <header> ...... </header> <섹션> <p> 나는 수영, 순환 및 달리기를 좋아합니다 첫 번째 트라이 애슬론을위한 훈련이지만 어려운 일입니다. : <ol> <li> 1.5km 수영 </li> <li> 40km 사이클 </li> <li> 10km run </li> </ol> </section> </</section> </article> </body>
세부 사항 요소는 브라우저에서 기본 모양이 있습니다.
세부 사항 요소는 기본적으로 접힌 요약 요소의 내용 만 볼 수 있습니다.
<세부 정보> <mondary> 트라이 애슬론 종류 < /summary> 다른 종류의 트라이 애슬론 -스프린트, 올림픽 등이 있습니다. /li> <li> 10km run </li> </ol> </defails>
효과는 다음과 같습니다.
요약HTML5의 의미 론적 요소는 기존 웹 페이지 연구에서 발명가를 기반으로 정의됩니다. 관심이 있으시면 여기에서 볼 수 있습니다 (Google 사이트, 직접 볼 수 없습니다).
현재 HTML5의 시맨틱 요소는 모든 현대식 브라우저에서 지원되었지만 일부 기존 버전의 브라우저 (주로 IE9의 인터넷 익스플로러)의 경우 일부 치료 조치가 필요합니다. 시맨틱 요소 자체는 아무것도하지 않기 때문에 브라우저가 일반적인 div 요소로 취급 할 수있는 한,이 웹 페이지는이 웹 페이지를 추가하는 것입니다 문제가 있습니다. 다행히도이 작업 Modernizr는 당신이 그것을 달성하는 데 도움이되었습니다.