HTML5 모범 사례;

Programing

HTML5 모범 사례;

lottogame 2020. 2. 11. 22:16

HTML5 모범 사례; 섹션 / 헤더 / 옆 / 기사 요소

웹 (및 스택 오버플로)에 HTML5에 대한 충분한 정보가 있지만 이제는 "모범 사례"에 대해 궁금합니다. 섹션 / 헤더 / 기사와 같은 태그는 새로운 것이며,이 태그를 언제 / 어떻게 사용해야하는지에 대한 의견이 모두 다릅니다. 그렇다면 다음 레이아웃과 코드에 대해 어떻게 생각하십니까?

웹 사이트 레이아웃

  1  <!doctype html>
  2      <head>
  3          <title>Website</title>
  4      </head>
  5  
  6      <body>
  7          <section>
  8              <header>
  9                  <div id="logo"></div>
 10                  <div id="language"></div>
 11              </header>
 12  
 13              <nav>
 14                  <ul>
 15                      <li>menu 1</li>
 16                      <li>menu 2</li>
 17                      <li>menu 3</li>
 18                      <li>menu 4</li>
 19                      <li>menu 5</li>
 20                  </ul>
 21              </nav>
 22  
 23              <div id="main">
 24                  <div id="main-left">
 25                      <article>
 26                          <header><h1>This is a title</h1></header>
 27  
 28                          <p>Lorem ipsum dolor sit amet, consectetur
 29                          adipiscing elit. Quisque semper, leo eget</p>
 30  
 31                          <p>Lorem ipsum dolor sit amet, consectetur
 32                          adipiscing elit. Quisque semper, leo eget</p>
 33  
 34                          <p>Lorem ipsum dolor sit amet, consectetur
 35                          adipiscing elit. Quisque semper, leo eget</p>
 36  
 37                          <p>Lorem ipsum dolor sit amet, consectetur
 38                          adipiscing elit. Quisque semper, leo eget</p>
 39                      </article>
 40                  </div>
 41  
 42                  <div id="main-right">
 43                      <section id="main-right-hot">
 44                          <h2>Hot items</h2>
 45                          <ul>
 46                              <li>Lorem ipsum</li>
 47                              <li>dolor sit</li>
 48                              <li>...</li>
 49                          </ul>
 50                      </section>
 51  
 52                      <section id="main-right-new">
 53                          <h2>New items</h2>
 54                          <ul>
 55                              <li>Lorem ipsum</li>
 56                              <li>dolor sit</li>
 57                              <li>...</li>
 58                          </ul>
 59                      </section>
 60                  </div>
 61              </div>
 62  
 63              <div id="news-items">
 64                  <header><h2>The latest news</h2></header>
 65  
 66                  <div id="item_1">
 67                      <article>
 68                          <header>
 69                              <img src="#" title="titel artikel" />
 70                              <h3>Lorem ipsum .....</h3>
 71                          </header>
 72                          <p>Lorem ipsum dolor sit amet,
 73                          adipiscing elit. Quisque semper, </p>
 74                          <a href="#">Read more</a>
 75                      </article>
 76                  </div>
 77  
 78  
 79                  <div id="item_2">
 80                      <article>
 81                          <header>
 82                              <img src="#" title="titel artikel" />
 83                              <h3>Lorem ipsum .....</h3>
 84                          </header>
 85                          <p>Lorem ipsum dolor sit amet,
 86                          adipiscing elit. Quisque semper, </p>
 87                          <a href="#">Read more</a>
 88                      </article>
 89                  </div>
 90  
 91  
 92                  <div id="item_3">
 93                      <article>
 94                          <header>
 95                              <img src="#" title="titel artikel" />
 96                              <h3>Lorem ipsum .....</h3>
 97                          </header>
 98                          <p>Lorem ipsum dolor sit amet,
 99                          adipiscing elit. Quisque semper, </p>
100                          <a href="#">Read more</a>
101                      </article>
102                  </div>
103              </div>
104  
105              <footer>
106                  <ul>
107                      <li>menu 1</li>
108                      <li>menu 2</li>
109                      <li>menu 3</li>
110                      <li>menu 4</li>
111                      <li>menu 5</li>
112                  </ul>
113              </footer>
114          </section>
115      </body>
116  </html>

7. section전체 웹 사이트에서? 아니면 div?

각 줄 section은 header?로 시작합니다 .

23 행. div맞습니까? 또는 이것은 section?

라인 24.로 왼쪽 / 오른쪽 열을 분할하십시오 div.

줄 25. article태그를 위한 적당한 장소 ?

26 행. h1-tag를 -tag에 넣어야 header합니까?

나는 이것이입니다 결정 있도록 라인 (43)의 콘텐츠는 메인 기사와 관련되지 않은 sectiona와 없습니다 aside.

44 행.없는 H2 header

53 행. section없이header

63 행. 모든 (관련되지 않은) 뉴스 항목이있는 Div

라인 64. headerh2와 함께

라인 65. 흠, div또는 section? 아니면 이것을 제거하십시오div 하고 article-tag 만 사용하십시오.

105 행. 바닥 글 :-)

사실, 머리말 / 꼬리말에 관해서는 아주 옳습니다. 다음은 각각의 주요 HTML5 태그를 사용하고 사용하는 방법에 대한 기본 정보입니다 (아래에 링크 된 전체 소스를 읽는 것이 좋습니다).

부분 – 주제 관련 컨텐츠를 그룹화하는 데 사용됩니다. div 요소처럼 들리지만 그렇지 않습니다. div에는 의미가 없습니다. 모든 div를 섹션 요소로 교체하기 전에 항상 스스로에게 물어보십시오.“모든 콘텐츠가 관련되어 있습니까?”

따로 – 접선으로 관련된 콘텐츠에 사용됩니다. 일부 컨텐츠가 기본 컨텐츠의 왼쪽 또는 오른쪽에 나타나기 때문에 aside 요소를 사용할 충분한 이유가 없습니다. 주요 내용의 의미를 줄이지 않고 별도의 내용물을 제거 할 수 있는지 자문 해보십시오. 인용 부호는 접선 적으로 관련된 내용의 예입니다.

헤더 – 헤더 요소와 일반적으로 허용되는 헤더 (또는 마스트 헤드) 사용에는 중요한 차이가 있습니다. 일반적으로 페이지에는 하나의 헤더 또는 '마스트 헤드'만 있습니다. HTML5에서는 원하는만큼 가질 수 있습니다. 이 사양은 "소개 또는 탐색 보조 도구 그룹"으로 정의합니다. 사이트의 모든 섹션에서 헤더를 사용할 수 있습니다. 실제로 대부분의 섹션에서 헤더를 사용해야합니다. 이 스펙은 섹션 요소를 "일반적으로 제목이있는 주제별 컨텐츠 그룹"으로 설명합니다.

탐색 – 주요 탐색 정보를 제공합니다. 그룹화 된 링크 그룹만으로도 nav 요소를 사용할 수 있습니다. 반면 사이트 전체 탐색은 탐색 요소에 속합니다.

바닥 글 – 위치에 대한 설명과 같지만 그렇지 않습니다. 바닥 글 요소에는 포함 요소에 대한 정보가 포함되어 있습니다. 작성자, 저작권, 관련 내용에 대한 링크 등 HTML5는 일반적으로 전체 문서에 대한 바닥 글이 하나 인 반면 HTML5를 사용하면 섹션 내에 바닥 글을 가질 수도 있습니다.

출처 : http://www.anthonycalzadilla.com/2010/08/html5-section-aside-header-nav-footer-elements-not-as-obvious-as-they-sound/

또한 article위 소스에서 찾을 수없는 에 대한 설명이 있습니다 .

article – 독립적이고 독립적 인 컨텐츠를 지정하는 요소에 사용됩니다. 기사는 독자적으로 이해해야합니다. 모든 div를 기사 요소로 교체하기 전에 항상 다음과 같이 스스로에게 묻습니다. "나머지 웹 사이트와 독립적으로 읽을 수 있습니까?"

불행히도 지금까지 주어진 답변 (가장 많은 투표 포함)은 "정상적인"상식, 명백한 잘못 또는 혼동입니다. 없음 중요한 키워드의 ^하나는 팝업 없습니다!

나는 3 가지 답변을 썼다.

여기에 설명 된 html 요소의 역할을 이해하려면 일부 요소가 문서를 섹션화해야합니다. HTML5 개요 알고리즘 에 따라 각각의 모든 HTML 문서를 구분할 수 있습니다. 내용의 개요 - ⁠or⁠ 테이블 (TOC)을 생성하기위한 목적. 개요는 일반적으로 보이지 않지만 (현재) 저자는 결과 개요가 의도를 반영하는 방식으로 html을 사용해야합니다.

당신과 섹션 만들 수 있습니다 정확히 이러한 요소와 다른 아무것도 :

(명시 적) 하위 섹션 만들기
- <section> 섹션
- <article> 섹션
- <nav> 섹션
- <aside> 섹션
형제 섹션 또는 하위 섹션 만들기
- 으로 지정되지 않은 유형의 섹션 <h*>^² (모든이 작업을 수행, 아래 참조)
현재 명시 적 (하위) 섹션을 레벨 업하기

섹션 이름은 다음과 같습니다.

<h*> 생성 된 섹션 이름 자체
<section|article|nav|aside>섹션이 <h*>있으면 첫 번째 섹션에 이름이 지정됩니다.
- 이들은 <h*>섹션 자체를 만들지 않는 유일한 것입니다

섹션에는 한 가지가 더 있습니다. 다음 컨텍스트 (예 : 요소)는 "개요 경계"를 만듭니다. 포함 된 섹션은 모두 개인용입니다.

문서 자체 <body>
와 테이블 셀 <td>
<blockquote>
<details>, <dialog>, <fieldset>, 및<figure>
그 밖의 아무것도

example HTML <body> <h3>if you want siblings at top level...</h3> <h3>...you have to use untyped sections with <h*>...</h3> <article> <h1>...as any other section will descent</h1> </article> <nav> <ul> <li><a href=...>...</a></li> </ul> </nav> </body> has this outline 1. if you want siblings at top level... 2. ...you have to use untyped sections with <h*>... 2.1. ...as any other section will descent 2.2. (unnamed navigation)

이것은 두 가지 질문을 제기합니다.

차이점은 무엇이며 <article>그리고 <section>?

둘 다 할 수 있습니다 :
- 서로 내포되다
- 다른 상황이나 중첩 수준에서 다른 개념을 취하십시오.
<section>s는 책 장과 같습니다
- 그들은 대개 형제 자매를 가지고 있습니다 (다른 문서에있을 수도 있습니다).
- 함께 그들은 책의 장과 같은 공통점이 있습니다.
한 저자, 하나 <article> 는 최소한 가장 낮은 수준
- 표준 예 : 단일 블로그 주석
- 블로그 항목 자체도 좋은 예입니다
- 블로그 항목 <article>과 그 주석 <article>도<article>
- 그것은 일련의 유사한 부분이 아닌 "완전한"것입니다.
<section>의 <article>책은 책의 장과 같습니다
<article>의 s <section>는 볼륨의시와 같습니다 (시리즈 내).

어떻게 <header>, <footer>그리고 <main>에 적합?

그들은 섹션에 영향 을 미치지 않습니다
<header> 과 <footer>
- 각 섹션의 구역을 표시 할 수 있습니다.
- 섹션 내에서도 여러 번 가질 수 있습니다
- 이 섹션 의 주요 부분 과 차별화
- 저자의 취향에 의해서만 제한됨
- <header>
  - 이 섹션의 제목 / 이름을 표시 할 수 있습니다
  - 이 섹션의 로고가 포함될 수 있습니다
  - 섹션의 상단 또는 상단에있을 필요는 없습니다.
- <footer>
  - 이 섹션의 크레딧 / 저자 표시
  - 섹션 상단에 올 수 있습니다
  - 심지어 위에있을 수 있습니다 <header>
<main>
- 한 번만 허용
- 최상위 섹션의 주요 부분 (즉, 문서 <body>)을 표시합니다.
- 하위 섹션 자체에는 주요 부분에 대한 마크 업이 없습니다.
- <main>문서의 일부 하위 섹션에서 "숨길"수 있지만 문서 <header>및<footer> 수 없습니다 (마크 업이 그 하위의 / 바닥 글 헤더를 표시 할 것)
  - 그러나 <article>섹션 ³ 에서는 허용되지 않습니다
- "실제"를 문서의 머리글, 바닥 글, 기본이 아닌 내용과 구별하는 데 도움이됩니다.

^{⁽¹⁾ 마음에 온다 : 개요, 알고리즘, 암시 적 절편을}
^{² I 사용을 <h*>위한 속기로 <h1>, <h2>, <h3>, <h4>, <h5>및 <h6>}
^{³ 도 아니다 <main>허용되지 <aside>나 <nav>,하지만 그건 놀라운 일이다. – 실제로 : <main>내림차순 <section>섹션 만 숨기 거나 최상위 레벨에 표시 할 수 있습니다 .<body>}

div 요소는 머리글, 탐색 메뉴, 섹션, 기사, 옆으로 및 바닥 글과 같은 새 요소로 바꿀 수 있습니다.

해당 문서의 마크 업은 다음과 같습니다.

<body>
     <header>...</header>
     <nav>...</nav>
     <article>
          <section>
               ...
          </section>
     </article>
     <aside>...</aside>
     <footer>...</footer>
</body>

이 기사에서 더 많은 정보를 찾을 수 있습니다 .

HTML5 구조화에 관한 W3 위키 페이지를 읽는 것이 좋습니다 .

<header>사이트의 헤더 내용을 포함하는 데 사용됩니다. <footer>사이트의 바닥 글 내용을 포함합니다. <nav>탐색 메뉴 또는 페이지의 다른 탐색 기능이 포함되어 있습니다.

<article>
RSS 항목 (예 : 뉴스 항목)으로 신디케이트 될 경우 의미 가있는 독립형 컨텐츠를 포함합니다 .

<section>다른 기사를 다른
목적이나 주제 로 그룹화 하거나 단일 기사의 다른 섹션을 정의하는 데 사용됩니다.

<aside> 주요 컨텐츠와 관련이 있지만 컨텐츠의 흐름의 중심이 아닌 컨텐츠 블록을 정의합니다.

여기에 정리 한 이미지 가 포함 됩니다.

html5

코드에서 이것은 다음과 같습니다.
<body>
  <header></header>    
  <nav></nav>    
  <section id="sidebar"></section>    
  <section id="content"></section>    
  <aside></aside>    
  <footer></footer>
</body>
일부 HTML5 요소에 대해 자세히 살펴 보겠습니다.

<section>

이 <section>요소는 서로 다른 기능 영역이나 주제 영역을 포함하거나 기사 또는 스토리를 다른 섹션으로 나눕니다. 따라서이 경우 : "sidebar1"에는 "RSS 구독"및 "상점에서 음악 구입"과 같이 사이트의 모든 페이지에 유지 될 수있는 다양한 유용한 링크가 포함되어 있습니다. "main"에는이 페이지의 주요 내용 인 블로그 게시물이 포함되어 있습니다. 사이트의 다른 페이지에서이 내용이 변경됩니다. 상당히 일반적인 요소이지만 여전히 낡은 것보다 의미가 더 큽니다 <div>.

<article>

<article>에 관련되어 <section>있지만 분명히 다릅니다. <section>콘텐츠 또는 기능의 개별 섹션을 그룹화 하는 반면 <article>개별 블로그 게시물, 비디오, 이미지 또는 뉴스 항목과 같은 개별 독립형 콘텐츠를 포함하기위한 것입니다. 이 방법으로 생각하십시오-당신이 각각 독자적으로 읽기에 적합하고 RSS 피드에서 별도의 항목으로 신디케이트하는 것이 합리적 일 수있는 많은 컨텐트 아이템을 가지고 있다면 <article>마크 업에 적합합니다. 이 예에서는 <section id="main">블로그 항목을 포함합니다. 각 블로그 항목은 RSS 피드의 항목으로 신디케이트하기에 적합하며 컨텍스트를 벗어나 독자적으로 읽을 때 의미가 있으므로 <article>다음과 같이하십시오.
<section id="main">
    <article></article>        
    <article></article>        
    <article></article>
</section>
허? 기사 내부에 섹션을 중첩시킬 수도 있다는 점에 유의하십시오. 예를 들어, 이러한 블로그 게시물 각각에 고유 한 섹션의 일관된 구조가있는 경우 기사 내에 섹션을 넣을 수도 있습니다. 다음과 같이 보일 수 있습니다.
<article>
  <section id="introduction"></section>      
  <section id="content"></section>
  <section id="summary"></section>
</article>
<header> 과 <footer>

위에서 이미 언급했듯이 <header>및 <footer>요소 의 목적은 각각 머리글과 바닥 글 내용을 래핑 하는 것입니다 . 특정 예에서 <header>요소에는 로고 이미지 <footer>가 포함 되고 요소에는 저작권 표시가 포함되지만 원하는 경우보다 정교한 내용을 추가 할 수 있습니다. 또한 노트 각 페이지에 하나 이상의 머리글과 바닥 글이 수 -뿐만 아니라 우리가 언급 한 최상위 머리글과 바닥 글을, 당신은 또한 가질 수 <header>및 <footer>각 안에 중첩 요소 <article>가 단지에 적용 할 경우에을, 특정 기사. 위 예제에 추가 :
<article>
  <header></header>    
  <section id="introduction"></section>      
  <section id="content"></section>      
  <section id="summary"></section>      
  <footer></footer>
</article>
<nav>

이 <nav>요소는 현재 사이트의 다른 페이지 또는 현재 페이지의 다른 영역으로 이동하는 탐색 링크 또는 기타 구성 (예 : 검색 양식)을 표시하기위한 것입니다. 스폰서 링크와 같은 다른 링크는 포함되지 않습니다. 물론 제목 및 기타 구조화 요소를 포함 할 수 <nav>있지만 필수는 아닙니다.

<aside>

우리 <aside>는 두 번째 사이드 바를 마크 업 하기 위해 요소를 사용했음을 알았을 것입니다 : 최신 깁과 연락처를 포함하는 사이드 바. 이는 완벽하게 적합 <aside>주요 흐름과 관련된 정보의 조각을 마킹이지만, 직접에 적합하지 않다. 그리고이 경우의 주요 내용은 밴드에 관한 것입니다! 에 대한 다른 좋은 선택은 <aside>블로그 게시물의 저자 (들), 밴드 전기, 또는 자신의 앨범을 구입하는 링크가있는 밴드 음반에 대한 정보가 될 것입니다.

그게 어디 떠나요 <div>?

그렇다면 우리의 페이지에서 사용할 수있는이 모든 위대한 요소들이 겸손의 시대에 <div>반드시 포함되어 있습니까? 아니. 실제로, <div>여전히 완벽하게 유효합니다. 컨텐트 영역을 그룹화하는 데 사용할 수있는 더 적합한 다른 요소가없는 경우이 스타일을 사용해야합니다. 이는 요소를 순수하게 스타일링 / 시각적 목적으로 그룹화하기 위해 요소를 사용하는 경우에 자주 사용됩니다. 일반적인 예는 a <div>를 사용 하여 페이지의 모든 내용을 래핑 한 다음 CSS를 사용하여 모든 내용을 브라우저 창에 가운데로 맞추거나 특정 배경 이미지를 전체 내용에 적용하는 것입니다.

[ "주요 답변"에 설명 ]

7. 전체 웹 사이트 주변의 섹션 ? 아니면 div 만 ?

둘 다. 스타일링 :을 사용하면 <body>이미 있습니다. sectioning / semantics의 경우 : 예제 HTML에서 자세히 설명 했듯이 그 효과는 유용성과 상반됩니다. 이미 래핑 된 내용에 대한 추가 래퍼는 개선되지 않지만 소음입니다.

각 섹션은 헤더로 시작합니까?

아니요, 일반적으로“헤더”로 요약 된 내용을 넣을 위치는 저자가 선택합니다. 추가 표시없이 해당 헤더 내용을 명확하게 인식 할 수 있으면이 없이도 완벽하게 유지 될 수 <header>있습니다. 저자의 선택이기도합니다.

23 행.이 div가 맞습니까? 또는 이것은 섹션 이어야 합니까?

은 <div>아마도 잘못된 것입니다. 그것은 의도에 달려 있습니다 : 스타일링을 위해서만 맞습니다. 의미 론적 인 목적이라면 잘못된 것 입니다. 다른 대답에 표시된<article> 대신 대신 해야합니다 . 스타일과 섹션을 모두 결합한 경우에도 적합합니다.<article>

<section>책의 장과 같이이 섹션 앞뒤에 유사한 섹션이 없으므로 여기에서 잘못 보입니다. (의 목적입니다 <section>).

라인 24. div로 왼쪽 / 오른쪽 열을 분할하십시오 .

이유없이?

25 행. 기사 태그의 올바른 위치 ?

그렇습니다.

26 행. h1 -tag를 헤더 -tag 에 넣어야 합니까?

아니요. 고독한 <h*>요소는 아마도 <header>앞으로 나아갈 것의 제목이라는 것이 이미 명확하기 때문에 아마도 들어 가지 않아도 될 것입니다 (그러나 원한다면 할 수 있습니다). – 예를 들어 <header>태그 라인 (으로 표시 <p>) 도 포함하는 것이 합리적 입니다.

내용은 주요 기사와 관련이 없으므로이 부분 은 제외 하고 섹션 이라고 결정했습니다 .

콘텐츠 와 관련<aside> 하여 "접선 적으로 관련 " 되어야 한다는 것은 오해입니다 . 요점은 다음과 같습니다. <aside>내용이 접선 으로 만 관련되어"있거나 전혀없는 것입니다!

그럼에도 불구하고, <aside>적절한 선택 <article>이 <section>아니라,“핫 아이템”과“새로운 아이템”이 책의 두 장처럼 읽히지 않는 것보다 여전히 낫습니다 . 당신은 전체의 두 부분이 아닌 다른 대안 정렬처럼 다른 하나는 완벽하게 갈 수 있습니다.

라인 44. 헤더 없는 H2

중대하다.

53 행. 헤더가 없는 섹션

글쎄, <header>하지만 <h2>제목은이 섹션의 어느 부분이 헤더인지 명확하게 남깁니다.

63 행. 모든 (관련되지 않은) 뉴스 항목이있는 Div

<article>또는 <aside>더 좋을 수도 있습니다.

라인 (64) 의 헤더 와 H2를

이미 논의했다.

라인 65. 흠, 사업부 또는 섹션 ? 또는이 div를 제거 하고 기사 -tag 만 사용 하십시오

바로 그거죠! 을 제거하십시오 <div>.

105 행. 바닥 글 :-)

매우 합리적입니다.

내 "주"답변의 설명에 따르면 문제의 문서 개요에 따라 마크 업해야합니다.

다음 두 표에서 내가 보여줍니다.

원본 HTML과 개요
가능한 의도 된 개요와 HTML

original html (shortened) _{<body> <section> <header> <div id=logo></div> <div id=language></div> </header> <nav> ... </nav> <div id=main> <div id=main-left> <article> <header> <h1>The real thing</h1> </header> </article> </div> <div id=main-right> <section id=main-right-hot> <h2>Hot items</h2> </section> <section id=main-right-new> <h2>New items</h2> </section> </div> </div> <div id=news-items> <header> <h2>The latest news</h2> </header> <div id=item_1> <article> <header> <h3>...</h3> </header> <a>read more</a> </article> </div> <div id=item_2> <article> <header> <h3>...</h3> </header> <a>read more</a> </article> </div> <div id=item_3> <article> <header> <h3>...</h3> </header> <a>read more</a> </article> </div> </div> <footer> <ul><li>...</ul> </footer> </section>} original html relevant for outline _{<body> <section> // logo and language <nav> ... </nav> <article> <h1>The real thing</h1> </article> <section> <h2>Hot items</h2> </section> <section> <h2>New items</h2> </section> <h2>The latest news</h2> <article> <h3>...</h3> </article> <article> <h3>...</h3> </article> <article> <h3>...</h3> </article> // footer links </section>} resulting outline 1. (untitled document) 1.1. (untitled section) 1.1.1. (untitled navigation) 1.1.2. The real thing (h1) 1.1.3. Hot items (h2) 1.1.4. New items (h2) 1.1.5. The latest news (h2) 1.1.6. news item_1 (h3) 1.1.7. news item_2 (h3) 1.1.8. news item_3 (h3) The outline of the original is definitively not what was intended.

다음 표는 개선 된 버전에 대한 제안입니다. 다음 마크 업을 사용합니다.

~~<removed>~~
<NEW_OR_CHANGED_ELEMENT>
<element MOVED_ATTRIBUTE=1>

possible intended outline 1. (main) 1.1. The real thing 1.2. (hot&new) 1.2.1. Hot items 1.2.2. New items 2. The latest news 2.1. news item_1 2.2. news item_2 2.3. news item_3 modified html _{<body> <section> <header> <ASIDE> <div id=logo></div> <div id=language></div> </ASIDE> </header> <nav> ... </nav> <ARTICLE id=main> <div id=main-left> <article ID=main-left> <header> <h1>The real thing</h1> </header> </article> </div> <ARTICLE id=main-right> <ARTICLE id=main-right-hot> <h2>Hot items</h2> </ARTICLE> <ARTICLE id=main-right-new> <h2>New items</h2> </ARTICLE> </ARTICLE> </ARTICE> <ARTICLE id=news-items> <header> <h2>The latest news</h2> </header> <div id=item_1> <article ID=item_1> <header> <h3>...</h3> </header> <a>read more</a> </article> </div> <div id=item_2> <article ID=item_2> <header> <h3>...</h3> </header> <a>read more</a> </article> </div> <div id=item_3> <article ID=item_3> <header> <h3>...</h3> </header> <a>read more</a> </article> </div> </ARTICLE> <footer> <NAV> <ul><li>...</ul> </NAV> </footer> </section>``} resulting outline 1. (untitled document) 1.1. (untitled logo and lang) 1.2. (untitled navigation) 1.3. (untitled main) 1.3.1 The real thing 1.3.2. (untitled hot&new) 1.3.2.1. Hot items 1.3.2.2. New items 1.4. The latest news 1.4.1. news item_1 1.4.2. news item_2 1.4.3. news item_3 1.5. (untitled footer nav) The modified HTML reflects the intended outline way better than the original.

주요 실수 : 전체 문서에 "이염"이 있습니다.
왜 이런가요?

<header>
    <div id="logo"></div>
    <div id="language"></div>
</header>

대신에:

<header role="banner">
    <!-- Not the best -->
    <h1 id="logo"></h1> <!-- or <figure> and <figcaption>, or <h1> and <p>... -->
    <h2 id="language"></h2>

    <!-- Better, if the IDs have not semantic sense -->
    <h1></h1>
    <h2></h2>
</header>

이 헤더를 스타일 화하려면 CSS 계층 구조를 사용하십시오 : body> section> header> h1, body> section> header> h2

더 ... ... 행 63 : 왜 헤더가 h2를 감싸는가 ?? 헤더에 더 이상 요소를 포함시키지 않으면 단일 h2를 사용하십시오.
구조는 문서를 스타일 화하는 것이 아니라 자체 설명 된 문서를 구성하는 것입니다.

이것을 나머지 문서에 적용하십시오. 행운을 빕니다 ;)

기사 태그 자체에 item_1, item_2 등의 ID가없는 이유는 무엇입니까? 이처럼 :

<article id="item_1">
...
</article>
<article id="item_2">
...
</article>
...

래퍼 div를 추가 할 필요가없는 것 같습니다. ID 값은 HTML에서 의미 론적 의미가 없으므로이 작업을 수행하는 것이 완벽하게 유효하다고 생각합니다. 첫 번째 기사가 항상 item_1 아니라 현재 페이지의 컨텍스트 내에서 item_1 일뿐입니다. ID는 문맥과 무관 한 의미를 가질 필요는 없습니다.

또한 26 행의 질문에 대해서는 <header> 태그가 필요하다고 생각하지 않으며 "main-left"div에 자체적으로 있기 때문에 생략 할 수 있다고 생각합니다. 주요 기사 목록에있는 경우 일관성을 위해 <header> 태그를 포함시킬 수 있습니다.

섹션은 문서 내에서 섹션을 감싸는 데만 사용해야합니다 (예 : 장 및 유사)
와 헤더 NO : 태그입니다. 헤더 태그는 페이지 헤더의 래퍼를 나타내며 H1, H2 등과 혼동해서는 안됩니다.
어느 사업부? :디
예
W3C 학교에서 :

태그는 외부 컨텐츠를 정의합니다. 외부 콘텐츠는 외부 공급자의 뉴스 기사, 웹 로그 (블로그)의 텍스트 또는 포럼의 텍스트 또는 외부 소스의 다른 콘텐츠 일 수 있습니다.
아니요, 헤더 태그는 다른 용도로 사용됩니다. H1, H2 등은 문서 제목을 나타냅니다. H1이 가장 중요합니다.

나는 당신이 말하는 것을 추측하기가 어렵 기 때문에 다른 것에 대답하지 않았습니다. 더 궁금한 점이 있으면 알려주세요.

내가 일하는 나의 예는 다음과 같습니다.

여기에 이미지 설명을 입력하십시오

<body itemscope itemtype="http://schema.org/Blog">
 <header>
  <h1>Wake up sheeple!</h1>
  <p><a href="news.html">News</a> -
     <a href="blog.html">Blog</a> -
     <a href="forums.html">Forums</a></p>
  <p>Last Modified: <span itemprop="dateModified">2009-04-01</span></p>
  <nav>
   <h1>Navigation</h1>
   <ul>
    <li><a href="articles.html">Index of all articles</a></li>
    <li><a href="today.html">Things sheeple need to wake up for today</a></li>
    <li><a href="successes.html">Sheeple we have managed to wake</a></li>
   </ul>
  </nav>
 </header>
 <main>
  <article itemprop="blogPosts" itemscope itemtype="http://schema.org/BlogPosting">
   <header>
    <h1 itemprop="headline">My Day at the Beach</h1>
   </header>
   <div itemprop="articleBody">
    <p>Today I went to the beach and had a lot of fun.</p>
    ...more content...
   </div>
   <footer>
    <p>Posted <time itemprop="datePublished" datetime="2009-10-10">Thursday</time>.</p>
   </footer>
  </article>
  ...more blog posts...
 </main>
 <footer>
  <p>Copyright ©
   <span itemprop="copyrightYear">2010</span>
   <span itemprop="copyrightHolder">The Example Company</span>
  </p>
  <p><a href="about.html">About</a> -
     <a href="policy.html">Privacy Policy</a> -
     <a href="contact.html">Contact Us</a></p>
 </footer>
</body>

https://www.w3.org/TR/2014/REC-html5-20141028/sections.html#the-nav-element

뉴스 항목 요약 (67, 80, 93 행)에 태그를 사용해야한다고 생각하지 않습니다. 섹션을 사용하거나 둘러싸는 div를 가질 수 있습니다.

기사는 독자적으로 설 수 있어야하고 여전히 이해가되거나 완성되어야합니다. 불완전하거나 추출한 것으로서 기사가 될 수 없으며 더 많은 섹션이 될 수 있습니다.

'더 읽기'를 클릭하면 다음 페이지에서

편집 : 불행히도 나는 나 자신을 수정해야합니다.

아래 https://stackoverflow.com/a/17935666/2488942를 참조 하십시오. for a link to the w3 specs which include an example (unlike the ones I looked at earlier on).

그러나 .... 여기 @Fez에 그것을 감사에 대한 좋은 기사입니다.

My original response was:

The way the w3 specs are structured:

4.3.4 Sections

4.3.4.1 The body element

4.3.4.2 The section element

4.3.4.3 The nav element

4.3.4.4 The article element

....

suggests to me that section is higher level than article. As mentioned in this answer section groups thematically related content. Content within an article is in my opinion thematically related anyway, hence this, to me at least, then also suggests that section groups at a higher level compared to article.

I think it's meant to be used like this:

section: Chapter 1
    nav: Ch. 1.1
         Ch. 1.2

    article: Ch. 1.1
             some insightful text

    article: Ch. 1.2
             related to 1.1 but different topic

or for a news website:

section: News
    article: This happened today
    article: this happened in England

section: Sports
    article: England - Ukraine 0:0
    article: Italy books tickets to Brazil 2014

„line 23. Is this div right? or must this be a section?“

Neither – there is a main tag for that purpose, which is only allowed once per page and should be used as a wrapper for the main content (in contrast to a sidebar or a site-wide header).

<main>
    <!-- The main content -->
</main>

http://www.w3.org/html/wg/drafts/html/master/grouping-content.html#the-main-element

I want to clarify this question more precisely,correct me if I am wrong Lets take an example of Facebook Wall

1.Wall comes under "section" tag,which denotes it is separate from page.

2.All posts come under "article" tag.

3.Then we have single post,which comes under "section" tag.

3.We have heading "X user post this" for this we can use "heading" tag.

4. 그런 다음 포스트 우리는 세 섹션 하나는 이미지 / 텍스트, 같은 주석 버튼 및 댓글 상자.

5. 주석 박스에는 기사 태그를 사용할 수 있습니다.

에 따르면 나단의 대답은 ,이 (어쩌면 당신이 사용할 수, 붉은 색과 오렌지색 부품에 대한 완벽한 의미가 div의 및 / 또는 header 과 footer각각) :

참고 URL : https://stackoverflow.com/questions/4781077/html5-best-practices-section-header-aside-article-elements

'Programing' 카테고리의 다른 글

링크 vs 컴파일 vs 컨트롤러 (0)	2020.02.11
Django의“슬러그”란 무엇입니까? (0)	2020.02.11
CSS에 여러 변환을 적용하는 방법은 무엇입니까? (0)	2020.02.11
JavaScript의 그래프 시각화 라이브러리 (0)	2020.02.11
GitHub에서 단일 파일 다운로드 (0)	2020.02.10

현재글HTML5 모범 사례;

복권의 역사, 로또 정보와 IT 기술 등을 다루는 블로그입니다.

java, 극장순위, spring, 볼거리, 가족나들이, JQuery, 뮤지컬, 여행, 자바, c#, 연극, 놀거리, 축제, Spring3, 행사, 공연, c++, 무비순위, 관광, Javascript,

Today :
Yesterday :

lottogame

HTML5 모범 사례;

HTML5 모범 사례; 섹션 / 헤더 / 옆 / 기사 요소

'Programing' 카테고리의 다른 글

'Programing'의 다른글

티스토리툴바

« 2024/12 »
일	월	화	수	목	금	토
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30	31

HTML5 모범 사례;

HTML5 모범 사례; 섹션 / 헤더 / 옆 / 기사 요소

'Programing' 카테고리의 다른 글

'Programing'의 다른글

관련글

티스토리툴바