Traduceți site-ul în HTML5 Unele elemente care și-au pierdut relevanța sunt șterse din HTML5. De exemplu: , , , , , , , , , , <strike>, <tt>, <u>, <xmp>. Dar au existat noi etichete - <section>, <nav>, <aside>, <header>, <footer> și atributele <role> - <article>, <main>, <form>, <button>, <search>. Lista este incompletă, dar acesta nu este subiectul conversației noastre.</p><p>Pentru a face acest lucru, trebuie să eliminăm elementele irelevante, să îmbunătățim structura și semantica conținutului site-ului. Ei bine, cu primul lucru totul este clar, eliminat. Dacă ați folosit unul dintre etichetele eliminate, adăugați o clasă la element și descrie-l în fișierul style.css.</p> <p>Apoi, să studiem structura și semantica. În primul rând, vom aborda noile etichete. Versiunea anterioară a limbii a folosit o etichetă peste tot <div>. Structura pe "divas" a fost "totul nostru"! Dar în sine <div> nu avea niciun sens semantic. Poate conține atât elemente mici, cât și elemente de bloc, desen și text. Nu a dispărut nicăieri, dragul nostru <div>, nr. Acesta va continua să fie folosit de noi, dar nu va mai fi principalul.</p> <p>Luați în considerare etichetele principale în ordinea în care acestea pot fi localizate pe pagină:</p><p>1.<header> - antetul site-ului.</p> <p>2.<nav> - meniul de navigare al site-ului.</p> <p>3.<section> - un grup de blocuri de informații integrate logic.</p> <p>4.<article> - un bloc de informații independent.</p> <p>5.<aside> - Bara laterală, de obicei cu informații suplimentare sau de navigație.</p> <p>6.<footer> - subsolul paginii.</p> <p>Să trecem la atributele de bază ale HTML5.</p> <p>Nu le voi lista pe toate, vom considera doar cele principale care vor fi utile pentru noi. Atributele fac din semantica paginii și mai ușor de înțeles. Ele clarifică semnificația elementelor structurale, rolul lor:</p> <p>2.<main> - Blocul principal de informații.</p> <p>3.<form> - un fel de formă interactivă.</p> <p>4.<button> Element activ, buton.</p> <p>5.<search> - căutați pe site.</p> <p>6.<banner> - sigla și numele site-ului, titlul paginii.</p> <p>7.<complementary> - un bloc suplimentar, separat de conținutul site-ului.</p> <p>8.<contentinfo> - informații generale despre site, de obicei în subsol.</p> <p>9.<navigation> - meniu de navigare.</p> <p>10.<textbox> - câmpul de introducere a textului.</p> <p>Aproximativ, robotul va acorda prioritate blocului situat între astfel de etichete:</p> <p>Și aproape ignorați:</p> <p>Astfel, cea mai bună optimizare a conținutului site-ului este realizată în conformitate cu cerințele SEO. Robotul va indexa rapid și corect o pagină construită pe acest principiu. Da, și "citi" acest webmaster text este mai convenabil.</p> <p>Să trecem la scrierea paginii html.</p> <p>În cele din urmă, vom obține un astfel de șablon pentru pagina de site:</p> <p>Succes în construirea site-ului!</p> <p>Înregistrări similare: Tipurile de logo-uri și stilurile acestora.<br> Dragoste și ură în CSS<br> Sortarea manuală a publicațiilor în motorul Ruxe<br> CSS axiomatic. Partea 3. Sintaxă.<br> CSS axiomatic. Partea 2<br></p> <h4>Articole similare</h4> <ul> <li> <p><a href="/utilizator-175/construirea-unui-site-pe-un-div-layout-si.html">Construirea unui site pe un div-layout și conectarea stilurilor CSS</a></p> </li> </ul> <div class="vnizine"><p style="text-align: left;"><a href="/utilizator-175/10-fapte-curioase-din-istoria-aeronauticii-sau.html">Pagina anterioară</a></p><p style="text-align: right;"><a href="/utilizator-175/eraser-athenka-ce-este-pentru-par-cum-sa-poarte.html">Pagina următoare</a></p> </div> </article> </div> </div> </div> </div><footer class="akatita-footer clearfix"> <div class="akatita-content-layout layout-item-0"> <div class="akatita-content-layout-row"> <div class="akatita-layout-cell layout-item-1" style="width: 20%"> <p style="font-size: 18px; font-family: 'Times New Roman';">Articole aleatoare</p> <br> <ul> <li><a href="/utilizator-133/mergand-pe-minune-de-carbune-sau-pe-sarlatan.html">Mergând pe minune de cărbune sau pe șarlatan</a></li> <li><a href="/utilizator-143/contractorii-maikop-sunt-judecati-pentru-dezertare.html">Contractorii Maikop sunt judecați pentru dezertare</a></li> <li><a href="/utilizator-123/afectarea-glicerinei-in-tigari-electronice.html">Afectarea glicerinei în țigări electronice</a></li> <li><a href="/utilizator-115/cum-sa-obtineti-rapoartele-carfax-si-autocheck.html">Cum să obțineți rapoartele carfax și autocheck, informații gratuite și verificarea vin carfax și autocheck</a></li> <li><a href="/utilizator-122/lalele-de-varza-lenes.html">Lalele de varză leneș</a></li> </ul> </div><div class="akatita-layout-cell layout-item-1" style="width: 20%"> <p style="font-size: 18px; font-family: 'Times New Roman';">locație</p> <br> <ul> <li><a href="/locul-pe-harta.html">Suntem pe hartă</a></li> <li><a href="/adresa.html">Adresa</a></li> </ul> <ol> <li><a href="/sitemap/sitemap122.html">sitemap</a></li> <li><a href="/sitemap/sitemap636.html">sitemap</a></li> <li><a href="/sitemap/sitemap646.html">sitemap</a></li> <li><a href="/sitemap/sitemap775.html">sitemap</a></li> <li><a href="/sitemap/sitemap1063.html">sitemap</a></li> </ol> </div><div class="akatita-layout-cell layout-item-1" style="width: 20%"> <p style="font-size: 18px; font-family: 'Times New Roman';">Mai multe despre noi</p> <br> <ul> <li><a href="/contactati-ne.html">Contactați-ne</a></li> <li><a href="/despre-site.html">Despre site</a></li></ul> </ul> </div><div class="akatita-layout-cell layout-item-1" style="width: 40%"> <p style="text-align:right;"><a href="#"></a>Drepturi de autor © 2025. Toate drepturile rezervate.</p><br> <p style="text-align: right;"> <script> new Image().src = "https://counter.yadro.ru/hit;adolfru?r"+ escape(document.referrer)+((typeof(screen)=="undefined")?"": ";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth? screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+ ";h"+escape(document.title.substring(0,150))+ ";"+Math.random();</script> </p> </div> </div> </div> </footer> </div> </div></body> </html>