질문 : HTML5 모범 사례; 섹션 / 헤더 / 제외 / 기사 요소
웹 (및 stackoverflow)에 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 만?
8 행. 각 section 은 header 시작합니까?
23 행.이 div 맞습니까? 아니면 section 이어야합니까?
div 왼쪽 / 오른쪽 열을 분할합니다.
25 행. article 태그를위한 올바른 위치?
26 행. header -tag에 h1 -tag를 넣어야합니까?
43 행. 내용이 주요 기사와 관련이 aside section 이 제쳐두고있는 것이 아니라 섹션이라고 결정했습니다.
44 행. header
53 행. header 없는 section
63 행. 모든 (비 관련) 뉴스 항목이있는 사업부
64 행. h2가있는 header
65 행. Hmm, div 또는 section ? 또는이 div 제거하고 기사 -tag 만 사용 article
105 행. 바닥 글 :-)
답변
실제로 머리글 / 바닥 글에 관해서는 당신이 옳습니다. 다음은 각 주요 HTML5 태그가 어떻게 사용 / 사용되어야하는지에 대한 몇 가지 기본 정보입니다 (하단에 링크 된 전체 소스를 읽는 것이 좋습니다).
섹션 – 주제와 관련된 콘텐츠를 그룹화하는 데 사용됩니다. div 요소처럼 들리지만 그렇지 않습니다. div에는 의미 론적 의미가 없습니다. 모든 div를 섹션 요소로 교체하기 전에 항상 다음과 같이 자문 해보십시오. "모든 콘텐츠가 관련되어 있습니까?"
aside – 접선 적으로 관련된 콘텐츠에 사용됩니다. 일부 콘텐츠가 메인 콘텐츠의 왼쪽 또는 오른쪽에 표시되는 것만으로는 aside 요소를 사용할 충분한 이유가 없습니다. 주요 내용의 의미를 줄이지 않고 곁에있는 내용을 제거 할 수 있는지 스스로에게 물어보십시오. Pullquotes는 접선 적으로 관련된 콘텐츠의 예입니다.
header – 헤더 요소와 일반적으로 허용되는 헤더 (또는 마스트 헤드) 사용 간에는 중요한 차이가 있습니다. 일반적으로 페이지에는 하나의 헤더 또는 '마스트 헤드'만 있습니다. HTML5에서는 원하는만큼 가질 수 있습니다. 사양에서는이를 "입문 또는 탐색 보조 도구 그룹"으로 정의합니다. 사이트의 모든 섹션에서 헤더를 사용할 수 있습니다. 실제로 대부분의 섹션에서 헤더를 사용해야합니다. 사양에서는 섹션 요소를 '일반적으로 제목이있는 주제별 콘텐츠 그룹'으로 설명합니다.
nav – 주요 탐색 정보 용입니다. 함께 그룹화 된 링크 그룹은 nav 요소를 사용할 충분한 이유가 아닙니다. 반면 사이트 전체 탐색은 nav 요소에 속합니다.
footer – 위치에 대한 설명처럼 들리지만 그렇지 않습니다. Footer 요소에는 포함 된 요소에 대한 정보 (작성자, 저작권, 관련 콘텐츠 링크 등)가 포함됩니다. 일반적으로 전체 문서에 대해 하나의 바닥 글이있는 반면 HTML5에서는 섹션 내에 바닥 글도 포함 할 수 있습니다.
출처 : https://clzd.me/html5-section-aside-header-nav-footer-elements-not-as-obvious-as-they-sound/
또한 다음은 위의 출처에서 찾을 수없는 article 대한 설명입니다.
article – 독립적이고 독립적 인 콘텐츠를 지정하는 요소에 사용됩니다. 기사는 그 자체로 의미가 있어야합니다. 모든 div를 기사 요소로 바꾸기 전에 항상 자문 해보십시오. "다른 웹 사이트와 독립적으로 읽을 수 있습니까?"
출처 : https://stackoverflow.com/questions/4781077/html5-best-practices-section-header-aside-article-elements
'프로그래밍 언어 > HTML,CSS,JS' 카테고리의 다른 글
| JavaScript에서 큰 따옴표 또는 작은 따옴표 사용 시기 (0) | 2021.07.28 |
|---|---|
| HTML에서 ID와 name 속성의 차이점 (0) | 2021.07.28 |
| JavaScript에서 문자열을 Base64로 인코딩하는 방법 (0) | 2021.07.28 |
| HTML 레이아웃에 테이블을 사용하지 않는 이유 (0) | 2021.07.27 |
| JavaScript .prototype가 작동하는 방식 (0) | 2021.07.27 |