웹 (및 스택 오버플로)에 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
line 63. 모든 (관련되지 않은) 뉴스 항목이있는 Div
라인 64. headerh2와 함께
라인 65. 흠, div또는 section? 또는 이것을 제거 div하고 article-tag 만 사용하십시오.
105 행. 바닥 글 🙂
답변
사실, 머리말 / 꼬리말에 관해서는 아주 옳습니다. 다음은 각각의 주요 HTML5 태그를 사용하고 사용하는 방법에 대한 기본 정보입니다 (아래에 링크 된 전체 소스를 읽는 것이 좋습니다).
section – 주제 관련 컨텐츠를 그룹화하는 데 사용됩니다. div 요소처럼 들리지만 그렇지 않습니다. div에는 의미가 없습니다. 모든 div를 섹션 요소로 교체하기 전에 항상 스스로에게 물어보십시오.“모든 내용이 관련되어 있습니까?”
따로 – 접선으로 관련된 콘텐츠에 사용됩니다. 일부 컨텐츠가 기본 컨텐츠의 왼쪽 또는 오른쪽에 나타나기 때문에 aside 요소를 사용해야하는 이유는 충분하지 않습니다. 주요 내용의 의미를 줄이지 않고 별도의 내용물을 제거 할 수 있는지 스스로에게 물어보십시오. 인용 부호는 접선 적으로 관련된 내용의 예입니다.
헤더 – 헤더 요소와 일반적으로 허용되는 헤더 (또는 마스트 헤드) 사용에는 중요한 차이가 있습니다. 일반적으로 페이지에는 하나의 헤더 또는 ‘마스트 헤드’만 있습니다. HTML5에서는 원하는만큼 가질 수 있습니다. 이 사양은 “소개 또는 탐색 보조 도구 그룹”으로 정의합니다. 사이트의 모든 섹션에서 헤더를 사용할 수 있습니다. 실제로 대부분의 섹션에서 헤더를 사용해야합니다. 이 스펙은 섹션 요소를 “일반적으로 제목이있는 주제별 컨텐츠 그룹”으로 설명합니다.
탐색 – 주요 탐색 정보를 제공합니다. 그룹화 된 링크 그룹만으로도 nav 요소를 사용할 수 있습니다. 반면 사이트 전체 탐색은 탐색 요소에 속합니다.
바닥 글 – 위치에 대한 설명과 같지만 그렇지 않습니다. 바닥 글 요소에는 포함 요소에 대한 정보가 포함되어 있습니다. 작성자, 저작권, 관련 내용에 대한 링크 등 HTML5는 일반적으로 전체 문서에 대해 하나의 바닥 글이있는 반면 HTML5를 사용하면 섹션 내에 바닥 글을 가질 수도 있습니다.
출처 : https://clzd.me/html5-section-aside-header-nav-footer-elements-not-as-obvious-as-they-sound/
또한 article위의 소스에는없는 에 대한 설명이 있습니다 .
article – 독립적이고 독립적 인 컨텐츠를 지정하는 요소에 사용됩니다. 기사는 독자적으로 이해해야합니다. 모든 div를 기사 요소로 교체하기 전에 항상 다음과 같이 스스로에게 묻습니다. “나머지 웹 사이트와 독립적으로 읽을 수 있습니까?”
답변
불행히도 지금까지 주어진 답변 (가장 많은 투표 포함)은 “정상적인”상식, 명백한 잘못 또는 혼동입니다. 없음 중요한 키워드의 하나는 팝업 없습니다!
나는 3 가지 답변을 썼다 :
- 이 설명 (여기에서 시작)
- OP의 질문에 대한 구체적인 답변.
- 세부적인 HTML 개선
여기서 논의 된 html 요소의 역할을 이해하려면 일부 요소가 문서를 섹션화해야합니다. 각각의 모든 HTML 문서가 될 수 받는 따른 단면 HTML5 개요 알고리즘 내용의 개요 – or 테이블 (TOC)을 생성하기위한 목적. 개요는 일반적으로 보이지 않지만 (현재) 저자는 결과 개요가 의도를 반영하는 방식으로 html을 사용해야합니다.
당신과 섹션 만들 수 있습니다 정확히 이러한 요소와 다른 아무것도 :
- (명시 적) 하위 섹션 만들기
<section>섹션<article>섹션<nav>섹션<aside>섹션
- 형제 섹션 또는 하위 섹션 만들기
- 으로 지정되지 않은 유형의 섹션
<h*>2 (모든이 작업을 수행, 아래 참조)
- 으로 지정되지 않은 유형의 섹션
- 현재 명시 적 (하위) 섹션을 레벨 업하기
섹션 이름은 다음과 같습니다.
<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>섹션 3 에서는 허용되지 않습니다
- 그러나
- “실제”를 문서의 머리글, 바닥 글, 기본이 아닌 내용과 구별하는 데 도움이됩니다.
(1) 마음에 온다 : 개요, 알고리즘, 암시 적 절편을
2 I 사용을 <h*>위한 속기로 <h1>, <h2>, <h3>, <h4>, <h5>및 <h6>
3 도 아니다 <main>허용되지 <aside>나 <nav>,하지만 그건 놀라운 일이다. – 실제로 : <main>내림차순 <section>섹션 만 숨기 거나 최상위 레벨에 표시 할 수 있습니다 .<body>
답변
해당 문서의 마크 업은 다음과 같습니다.
<body>
<header>...</header>
<nav>...</nav>
<article>
<section>
...
</section>
</article>
<aside>...</aside>
<footer>...</footer>
</body>이 기사에서 더 많은 정보를 찾을 수 있습니다 .
답변
HTML5 구조화에 관한 W3 위키 페이지를 읽는 것이 좋습니다 .
<header>사이트의 헤더 내용을 포함하는 데 사용됩니다.<footer>
사이트의 바닥 글 내용을 포함합니다.<nav>탐색 메뉴 또는 페이지의 다른 탐색 기능이 포함되어 있습니다.
<article>
RSS 항목 (예 : 뉴스 항목)으로 신디케이트 될 경우 의미 가있는 독립형 컨텐츠를 포함합니다 .
<section>다른 기사를 다른
목적이나 주제 로 그룹화 하거나 단일 기사의 다른 섹션을 정의하는 데 사용됩니다.
<aside>주요 컨텐츠와 관련이 있지만 컨텐츠의 흐름의 중심이 아닌 컨텐츠 블록을 정의합니다.
여기에 정리 한 이미지 가 포함 됩니다.
코드에서 이것은 다음과 같습니다.
<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><!-- first blog post --></article> <article><!-- second blog post --></article> <article><!-- third blog post --></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를 사용하십시오.
구조는 문서를 스타일 화하는 것이 아니라 자체 설명 된 문서를 구성하는 것입니다.
이것을 나머지 문서에 적용하십시오. 행운을 빕니다 😉