ওয়েবে এইচটিএমএল 5 সম্পর্কে যথেষ্ট তথ্য রয়েছে (এবং স্ট্যাকওভারফ্লোতেও) তবে এখন আমি "সেরা অনুশীলনগুলি" সম্পর্কে আগ্রহী। বিভাগ / শিরোনাম / নিবন্ধের মতো ট্যাগগুলি নতুন, এবং আপনাকে / কখন এই ট্যাগগুলি ব্যবহার করা উচিত সে সম্পর্কে সবার মতামত রয়েছে। সুতরাং আপনি ছেলেরা নিম্নলিখিত লেআউট এবং কোড সম্পর্কে কি মনে করেন?
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>
লাইন sectionthe. পুরো ওয়েবসাইটের চারপাশে? নাকি শুধু ক div?
লাইন 8. sectionএকটি দিয়ে প্রতিটি শুরু header?
লাইন 23. এটা divঠিক? বা এই একটি হতে হবে section?
লাইন 24. একটি দিয়ে বাম / ডান কলাম বিভক্ত করুন div।
লাইন 25. articleট্যাগ জন্য সঠিক জায়গা ?
লাইন 26. আপনার h1-ট্যাগটি -ট্যাগে রাখা headerদরকার?
লাইন 43. সামগ্রীটি মূল নিবন্ধের সাথে সম্পর্কিত নয়, তাই আমি সিদ্ধান্ত নিয়েছি এটি একটি sectionএবং একটি নয় aside।
লাইন 44. এইচ 2 ছাড়াই header
লাইন 53. sectionছাড়াheader
লাইন 63. সমস্ত (সম্পর্কিত নয়) নিউজ আইটেমগুলির সাথে ডিভ
লাইন 64. headerএইচ 2 সহ
লাইন 65. হুম, divবা section? অথবা এটি সরান divএবং কেবল article-ট্যাগ ব্যবহার করুন
লাইন 105. পাদলেখ :-)
