HTML5 페이지 구조 기본 사항

html5 시맨틱 요소에 대한 자세한 설명 및 구조 구조에 대한 안내

코어 포인트

HTML5는 새로운 시맨틱 요소를 소개하여 헤더, 섹션, 기사, Nav, 제쳐두고 바닥 요소와 같은 문서 구조의 의미를 향상시킵니다. 이러한 요소는 페이지를 나누고 내용의 목적을 명확히하는 데 사용될 수 있습니다.

헤더 요소는 페이지 제목에 사용될뿐만 아니라 컨텐츠의 모든 부분을 소개합니다. 섹션 요소는 일반적으로 제목과 함께 컨텐츠 그룹화를 나타냅니다. 기사 요소는 문서의 완전하고 독립적 인 구성 요소를 나타내며 독립적으로 존재할 수 있습니다.

NAV 요소는 일련의 탐색 링크를 나타내며 기본 탐색을 위해 예약해야합니다. 따로 요소는 페이지의 일부를 나타내며 주변 내용과 간접적으로 관련되며 컨텐츠와 별개로 간주 될 수 있습니다.
바닥 글 요소는 최신 조상 컨텐츠 섹션의 바닥 글을 나타냅니다. 일반적으로 저작권 정보, 관련 링크 목록, 저자 정보 및 일반적으로 컨텐츠 블록의 끝에 있다고 생각하는 유사한 정보가 포함되어 있습니다.
• (다음은 Alexis Goldstein, Louis Lazaris 및 Estelle Weyl이 공동 저술 한 책 "실제 세계를위한 html5 & css3, Real World, 2nd Edition"이라는 책에서 발췌 한 것입니다.이 책은 전 세계 상점에서 구입할 수 있습니다. 여기에서 찾을 수 있습니다 템플릿의 기본 사항을 세분화 한 후 페이지에 컨텐츠를 추가하고 구조를 구축하기 시작합시다.
이 책 이후, 우리는 CSS3 기능 및 기타 HTML5 요소의 추가를 구체적으로 소개 할 것입니다. 이 섹션과 다음 장에서는 의미론을 광범위하게 다룰 것입니다. "Semantic"이라는 용어를 사용하면 주어진 HTML 요소가 내용의 의미를 설명하는 방식을 나타냅니다.

html5 헤럴드의 스크린 샷을 되돌아 보면 (또는 온라인으로 웹 사이트를 보면) 다음 섹션으로 나뉘어 있음을 알 수 있습니다.

로고 및 제목이있는 헤더 섹션 탐색 바

기본 내용은 세 개의 열로 나뉩니다 열의 기사 및 광고 블록 일부 저자 및 저작권 정보가 포함 된 바닥 글

페이지의 이러한 다른 부분에 적합한 요소를 결정하기 전에 몇 가지 옵션을 고려해 봅시다. 먼저, 페이지를 나누고 문서 구조에 더 많은 의미를 추가하는 데 사용할 수있는 새로운 HTML5 시맨틱 요소를 소개합니다. 헤더 요소

당연히 헤더 요소에 먼저 집중할 것입니다. 이 사양은이를 "소개 또는 내비게이션 보조 장치 세트"로 간결하게 설명합니다.

일반적으로 가정하는 것과는 달리, 컨텐츠의 각 부분을 소개하기 위해 새 헤더 요소를 포함시킬 수 있습니다. 페이지 헤더에만 국한되지 않습니다 (일반적으로

에 태그를 사용할 수 있음). 여기서“섹션”이라는 단어를 사용하면 다음 섹션에 설명 된 실제 섹션 요소에 국한되지 않습니다. 이는 페이지에 여러 블록이 있다는 것을 의미하더라도 자신의 헤더가 필요할 수있는 컨텐츠 블록을 의미합니다. 헤더 요소는 페이지의 단일 부분에 특정한 입문 컨텐츠 또는 탐색 보조 장치를 포함하거나 전체 페이지 또는 둘 다에 적용하는 데 사용될 수 있습니다. <div> <er> 헤더 요소는 일반적으로 페이지 또는 섹션의 상단에 배치되지만 그 정의는 그 위치와 관련이 없습니다. 귀하의 웹 사이트 레이아웃은 기사 나 블로그 게시물의 제목이 왼쪽, 오른쪽 또는 컨텐츠 아래에 있어야 할 수도 있습니다. <p> 섹션 요소 </p> <you> 다음 요소에 익숙 해야하는 요소는 html5의 섹션 요소입니다. 사양은 섹션을 다음과 같이 정의합니다 <p> <strong> 섹션 요소는 문서 또는 응용 프로그램의 공통 부분을 나타냅니다. 이와 관련하여 섹션은 일반적으로 제목이있는 컨텐츠의 주제 그룹입니다. </strong> </p> <ains> 섹션은 스타일이나 스크립트 목적으로 만 범용 컨테이너로 사용해서는 안된다고 설명합니다. 섹션을 범용 컨테이너로 사용할 수없는 경우 (예 : 필수 CSS 레이아웃을 구현하기 위해) 무엇을 사용해야합니까? 우리의 오랜 친구 div 요소, 그것은 의미 적으로 아무것도 의미하지 않습니다. <p> <definition> 사양의 정의로 돌아 가면 섹션 요소의 내용은 "주제"이어야하므로 관련없는 부품을 래핑하는 일반적인 방식으로 사용하는 것이 잘못되었습니다. </definition></p> <blockquote> 섹션 요소의 허용 가능한 용도의 일부 예는 다음과 같습니다. <p> <tab> 탭 인터페이스의 섹션 <the> "정보"페이지의 섹션은 회사의 "정보"페이지에 회사 이력, 미션 선언문 및 팀에 관한 섹션을 포함 할 수 있습니다. <of> 장거리 서비스 용어 페이지의 다른 섹션 <an> 온라인 뉴스 웹 사이트의 각 섹션; </an></of></the></tab></p> </blockquote> 참고 : 섹션을 올바르게 사용하십시오 <p> <new> 웹 디자이너에게 새로운 시맨틱 마커가 제공 될 때마다, 이러한 요소의 올바른 사용, 표준의 의도 등이 논의됩니다. HTML 사양에서 DL 요소의 적절한 사용에 대한 이전 논의를 기억할 수 있습니다. 예상 한 바와 같이, HTML5는 특히 섹션 요소 측면 에서이 현상에 면역되지 않습니다. 존경받는 HTML5 권위자 인 Bruce Lawson조차도 과거에 섹션을 잘못 사용하는 것을 인정합니다. 분명한 이해를 위해서는 그의 실수를 설명하는 Bruce의 기사를 읽을 가치가 있습니다. </new></p> 간단히 말해서 : <p></p> <ul> 섹션은 generic <li>이므로보다 구체적인 의미 론적 요소가 적용되면 (예 : 기사, 제쳐두거나 Nav) 해당 요소를 대신 사용하십시오. <em> </em> 섹션 </li>는 의미 론적 의미를 가지고 있습니다. 섹션에 넣으려는 모든 것을 간결하게 설명하기 위해 몇 마디 만 사용할 수 없다면 의미 적으로 중립적 인 컨테이너 인 눈에 띄지 않는 div. <li> <em> <like>, 즉 의미와 마찬가지로 어떤 경우에는 해석 될 수 있습니다. 다른 요소 대신 주어진 요소를 사용하는 이유를 설명 할 수 있다고 생각되면 계속하십시오. 누군가가 이것에 대해 정말로 당신을 비판한다면, 결과 토론은 모든 참가자들에게 흥미롭고 유익하며 더 넓은 공동체가 표준을 이해하도록 도울 수도 있습니다. </like></em> <if> 또한 적절한 경우 섹션 요소를 기존 단면 요소로 둥지 할 수 있습니다. 예를 들어, 온라인 뉴스 사이트의 경우 세계 뉴스 섹션은 각 주요 글로벌 지역의 섹션으로 더 세분화 될 수 있습니다. </if> </li> 기사 요소 </ul> <p> </p> 기사 요소는 섹션 요소와 유사하지만 몇 가지 중요한 차이점이 있습니다. 다음은 사양의 정의입니다 <p> </p> 기사 요소는 문서, 페이지, 응용 프로그램 또는 사이트의 완전하거나 독립적 인 구성 요소를 나타내며 원칙적으로 공동 릴리스에서 독립적으로 배포되거나 재사용 될 수 있습니다. <p> <strong> <s>이 정의의 키워드는 독립적 인 구성 요소 </s></strong> 및 </p> 독립적으로 분포되어 있습니다. 섹션에는 주제별로 그룹화 할 수있는 내용이 포함될 수 있지만 기사는 독립적으로 존재할 수있는 단일 컨텐츠 여야합니다. 이 차이는 이해하기 어려울 수 있으므로 질문이 있으면 공동 게시 테스트를 시도해보십시오. 수정없이 다른 웹 사이트에서 콘텐츠를 다시 게시 할 수 있거나 RSS 또는 Twitter 또는 Facebook Push와 같은 소셜 미디어 사이트를 통해 만들 수있는 경우 컨텐츠를 다시 게시 할 수 있습니다. 업데이트는 기사의 특성을 가지고 있습니다. <p> 궁극적으로, 기사를 구성하는 요소를 결정하는 것은 당신에게 달려 있지만, 다음은 사양을 준수하는 몇 가지 제안이 있습니다. </p> 포럼 게시물 <news news> 잡지 또는 신문 기사 블로그 게시물 사용자가 제출 한 블로그 게시물 또는 기사에 대한 의견 <posts> <blockquote> <just> 마지막으로 섹션 요소와 마찬가지로 기사 요소는 다른 기사 요소에 중첩 될 수 있습니다. 기사의 섹션을 기사로 둥지하고 그 반대도 마찬가지입니다. 그것은 모두 당신이 표시하고 싶은 것에 달려 있습니다. <p> NAV 요소 </p> </just> </blockquote> 확실히, NAV 요소는 거의 모든 프로젝트에 나타납니다. NAV는 의미로서의 의미 : 내비게이션 링크 세트. NAV의 가장 일반적인 사용은 정렬되지 않은 랩핑 링크 목록이지만 다른 옵션이 있습니다. 예를 들어, 페이지 또는 페이지 섹션의 기본 탐색 링크가 포함 된 텍스트 단락 주위에 NAV 요소를 랩핑 할 수 있습니다. <p> 두 경우 모두 NAV 요소는 가장 중요한 내비게이션을 위해 예약되어야합니다. 따라서 바닥 글과 같은 짧은 링크 목록에 NAV를 사용하지 않는 것이 좋습니다. <em> </em> 참고 : 탐색 링크를 건너 뜁니다 <em> </em><you> 많은 웹 사이트에서 구현할 수있는 디자인 패턴은 "Navigation Skip"링크입니다. 목적은 화면 리더 사용자가 웹 사이트의 메인 탐색을 들었을 때 신속하게 건너 뛸 수 있도록하는 것입니다. 결국 새 페이지를 클릭 할 때마다 큰 웹 사이트의 전체 탐색 메뉴를들을 필요가 없습니다! NAV 요소는 이러한 요구를 제거 할 가능성이 있습니다. 화면 리더가 NAV 요소를 보면 사용자가 추가 링크없이 내비게이션을 건너 뛸 수 있습니다. 사양은 다음과 같이 말합니다. "초기 렌더링에서 내비게이션 정보를 생략하여 혜택을 누릴 수있는 사용자를위한 사용자 에이전트 또는 화면 리더와 같은 내비게이션 정보를 즉시 제공하면이 요소를 사용하여 초기에 처음으로 건너 뛰거나 제공할지 여부를 결정할 수 있습니다. 페이지에서. 또는 둘 다 <a> 모든 보조 장치가 NAV를 인식하는 것은 아니지만 표준을 구축하여 이제 스크린 리더가 개선함에 따라 시간이 지남에 따라 페이지에 더 액세스 할 수있게 될 수 있습니다. <p> 참고 : 사용자 에이전트 </p> <p> <enc> 탐색 할 때 종종 "사용자 에이전트"라는 용어가 발생합니다. 실제로 브라우저의 멋진 용어 일뿐입니다. 사용자가 페이지의 콘텐츠에 액세스하는 데 사용하는 소프트웨어 "에이전트"입니다. 사양이 단순히 "브라우저"라고 말하지 않는 이유는 사용자 에이전트가 스크린 리더 또는 웹 페이지를 읽는 다른 기술적 수단을 포함 할 수 있기 때문입니다. </enc></p> <nav> 주어진 페이지에서 NAV를 여러 번 사용할 수 있습니다. 웹 사이트의 기본 탐색 표시 줄이있는 경우 NAV 요소가 필요합니다. 또한 현재 페이지의 다른 부분에 대한 보조 링크 세트 (인 페이지 앵커 또는 "로컬"링크 사용)가있는 경우 NAV 요소에도 래핑 할 수도 있습니다. <p> 섹션과 마찬가지로, NAV의 허용 가능한 사용을 구성하는 요소와 어떤 경우에는 권장되지 않는 이유 (예 : 바닥 글에서)에 대한 논쟁이 있습니다. 일부 개발자는이 요소가 페이징 또는 빵 부스러기 링크 또는 웹 사이트의 주요 탐색을 구성하는 검색 양식 (Google의 경우)에 적합하다고 생각합니다. <strong> 이 결정은 궁극적으로 개발자에 달려 있습니다. Whatwg의 HTML5 사양의 주요 편집자 인 Ian Hickson은 "클래스 = Nav를 사용할 때마다 사용"에 대한 질문에 직접 대답했습니다. [7] </strong> </p> <p> 제쳐두고 요소 </p> <p> 이 요소는 페이지의 일부를 나타내며, "제외 요소 주변의 내용과 간접적으로 관련되며 컨텐츠와 분리 된 것으로 간주 될 수 있습니다". </p> 제외 요소는 다음과 간접적으로 관련된 컨텐츠 부분을 래핑하는 데 사용될 수 있습니다. <p> 특정 독립 컨텐츠 (예 : 기사 또는 섹션). </p> <or> 전체 페이지 또는 문서. 일반적으로 페이지 나 웹 사이트에 사이드 바를 추가 할 때 수행됩니다. <p> <sup> <never> 제외 요소는 기본 내용이있는 페이지 부분을 랩핑하는 데 사용되지 않습니다. 따로 내용은 독립적으로 존재할 수 있지만 여전히 더 큰 전체의 일부 여야합니다. </never></sup>를 제외한 일부 가능한 사용에는 사이드 바, 보조 링크 목록 또는 광고 블록이 포함됩니다. 또한 제외 요소 (헤더와 같은)는 페이지의 위치에 따라 정의되지 않습니다. 측면이나 다른 곳에있을 수 있습니다. 내용 자체와 다른 요소와의 관계를 정의합니다. </p> <p> </p> 바르저 요소 <p> <strong> 이 장에서 논의 될 마지막 요소는 바닥 글 요소입니다. 헤더와 마찬가지로 단일 페이지에 여러 바닥 글 요소를 가질 수 있으며 와 같은 공통 대신 바닥 글을 사용해야합니다. 사양에 따라 바닥 글 요소는 최신 조상 컨텐츠 섹션의 바닥 글을 나타냅니다. 컨텐츠 부분은 전체 문서 일 수 있거나 섹션, 기사 또는 제쳐두고 요소 일 수 있습니다. </strong> <cont> 바닥 글은 일반적으로 저작권 정보, 관련 링크 목록, 저자 정보 및 일반적으로 컨텐츠 블록의 끝에 있다고 생각하는 유사한 정보를 포함합니다. 페이지이므로 섹션의 끝이나 페이지 하단에 나타날 필요가 없습니다. 아마도 그렇지 않을 가능성이 있지만 필요하지 않습니다. 예를 들어, 블로그 게시물의 저자에 대한 정보는 아래가 아닌 기사 위에 표시 될 수 있으며 여전히 바닥 글 정보로 간주됩니다. </cont></p> <p> 참고 : 우리는 어떻게이 시점에 도달 했습니까? <code><div> <some> html5로가는 길과 우리가 끝나는 태그에 대한 질문이 있다면 Luke Stevens의 HTML5에 대한 진실을 확인하고 싶을 것입니다. Luke의 책은 현재 두 번째 판에 출판되었으며 내용은 다소 논란의 여지가 있습니다. 그는 비디오 및 캔버스와 같은 많은 HTML5 기술을 다루는 것 외에도 HTML5의 역사를 탐구하고 새로운 요소에 내재 된 의미 및 접근성 문제를 설명하고 이들을 다루는 방법에 대한 제안을 제공합니다. <p> [7] 참조 </p> <p> https://www.php.cn/link/729db3e07a09db3a41dc1734e04ce44e html5 페이지 구조 FAQ (FAQ) <meaning> html5에서 진술의 의미는 무엇입니까? </meaning></p> <ation> 선언은 HTML5 문서의 첫 번째 줄입니다. HTML 태그가 아닙니다. html5에서 선언은 <p>로 단순화됩니다. 이를 통해 브라우저가 페이지를 표준 모드로 렌더링하여 최신 HTML 사양을 지원합니다. </p> <element> 요소는 HTML5 문서에서 어떻게 작동합니까? <hr> <p> 요소는 태그와 태그 사이에 위치한 메타 데이터 (데이터에 대한 데이터)의 컨테이너입니다. 메타 데이터는 페이지에 표시되지 않지만 기계에서 구문 분석 할 수 있습니다. 일반적으로 문서 제목, 문자 세트, 스타일, 스크립트 및 기타 메타 정보를 정의합니다. 요소의 내용은 , , , 및 와 같은 요소를 포함 할 수 있습니다. <a href="https://www.php.cn/link/729db3e07a09db3a41dc1734e04ce44e">html5에서 <h3> 요소의 기능은 무엇입니까? <code> 요소에는 HTML 문서의 기본 내용 또는 웹 페이지에서 직접 볼 수있는 HTML 문서의 일부가 포함됩니다. 여기에는 텍스트, 이미지, 테이블, 링크, 양식 및 기타 유형의 데이터가 포함될 수 있습니다. 태그는 일반적으로

태그가 뒤 따릅니다. 요소는 HTML5 구조를 어떻게 향상 시키는가? html5의

요소는 입문 내용 또는 일련의 내비게이션 링크를 포함하는 데 사용됩니다. 일부 제목 요소를 포함 할 수 있으며 로고, 부품 포장 제목, 검색 양식 등과 같은 다른 요소도 포함 할 수 있습니다. 요소에는 일반적으로 하나 이상의 제목 태그 (H1 - H6), 로고 또는 아이콘 및 저자 정보가 포함되어 있습니다.

html5에서

요소의 목적은 무엇입니까?

<header></header> html5의 <header></header> 요소는 문서 또는 부품의 바닥 글을 정의하는 데 사용됩니다. 일반적 으로이 섹션의 저자에 대한 정보, 저작권 정보, 관련 문서에 대한 링크 등이 포함되어 있습니다. 하나의 문서에 여러 요소를 포함시킬 수 있습니다.

요소는 HTML5 페이지 구조를 어떻게 개선합니까?

<footer></footer> html5의 요소는 내비게이션 링크 세트를 정의하는 데 사용됩니다. 페이지의 모든 링크 그룹이 메인 탐색 링크 블록에만 사용되는

요소에있을 필요는 없습니다. 브라우저 (예 : 장애인 사용자의 화면 리더와 같은)는이 요소를 사용 하여이 컨텐츠의 초기 렌더링을 생략할지 여부를 결정할 수 있습니다.

html5에서 <footer></footer> 요소의 기능은 무엇입니까? <footer></footer>

html5의

요소는 문서, 페이지, 응용 프로그램 또는 사이트의 완전하거나 독립적 인 구성 요소를 나타냅니다. 포럼 게시물, 잡지 또는 신문 기사, 블로그 게시물, 사용자 제출 댓글, 대화식 위젯 또는 위젯 또는 기타 독립형 콘텐츠 항목 일 수 있습니다. <nav></nav> 요소는 어떻게 HTML5 구조를 촉진합니까?

html5의 <nav></nav> 요소는 html 문서에 포함 된 별도의 기능적 부분을 나타냅니다. 일반적으로 제목으로 컨텐츠의 주제 그룹화로 문서 구조를 쉽게 이해할 수 있습니다. <nav></nav> html5에서

요소의 기능은 무엇입니까?

<article></article> html5의

요소는 컨텐츠가 문서의 주요 내용과 간접적으로 만 관련된 문서의 일부를 나타내는 데 사용됩니다. 제쳐두고 일반적으로 사이드 바 또는 레이블 상자로 표시됩니다.

요소는 HTML5 구조를 어떻게 향상 시키는가? <article></article>

html5의 요소는 의 주요 내용을 나타냅니다. 주요 내용 영역은 문서의 중심 주제와 직접 관련이 있거나 중심 주제를 확장하는 응용 프로그램의 컨텐츠 또는 중심 기능으로 구성됩니다. 문서 별이어야하며 문서 세트 (예 : 사이트 탐색 링크, 헤더 또는 바닥 글 정보)에 중복 내용을 포함하지 않아야합니다.